ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

HTML+CSS学习笔记.4

HTML+CSS学习笔记.4 1关于否定伪类,ui伪类和目标伪类在使用选择器时于选择器前方加上:not(),用于排除满足括号中条件的元素通过这种方法可以使值不会作用于某些特定的元素上。UI伪类里有很多种小类主要用于根据表单按钮和输入框的状态自动切换样式。前文说过的hover,active和focus在这里均可使用。checked可以使单选或者复选框处于被勾选状态时对应样式生效当取消勾选时则失效。enabled使元素在没有disabled属性的时候可以点击进行输入若元素加入了disabled则无法交互。target可以通过选中锚点指向的元素这里不过多介绍。2关于伪元素选择器伪元素选择器可以用于选中元素中的一些特殊位置。常用的伪元素有很多比如first-letter可以用于选中元素中第一个文字详细内容见上图。这里补充几个要点伪元素选择器通常使用两个“”但部分伪元素选择器在只加了一个“”的情况下是可以正常运行的。这是因为有些伪元素选择器是html5新增的而大部分html4时期就可以使用的伪元素选择器在当时并没有明文规定使用几个“”所以在仅使用一个“”时尤其是html5新增的选择器极容易产生错误。3关于选择器的优先级前文曾经讨论过给文字”上色“时优先级带来的影响即“优先级相同时后来者居上“优先级高的优先渲染”。在选择器这里也有优先级这一说不同选择器优先级不同但是大致遵循这一规律行内样式ID选择器类选择器元素选择器通配选择器当选择器组合使用时需要比较选择器的权重权重以(a,b,c)的形式呈现a指ID选择器的个数b指类伪类属性选择器的总个数c指元素伪元素选择器的总个数比较规则为先a后b最后c只有当前一次比较时双方相等的情况下才会进行第二次比较若一次比较大小时有一方胜出则不进行后续比较。当选择器使用!important时会优先渲染这一个选择器。4关于CSS的三大属性CSS的三大属性分别为层叠性继承性和优先级详细内容见上图。5关于颜色的表示颜色的表示主要有四种方法除去直接写颜色名称还有rgb或rgba,HEX或HEXAHSL或HSLA,下面我会按照顺序进行大体介绍初中物理说过光的三原色为红绿蓝理论上所有色光都能由这三种颜色混合得到rgb和后续的HEX都用了这个原理在rgb中r指红色red,g指绿色green,b指蓝色blue,rgb通过对这三种颜色的浓度进行划分以红色举例0即为白色255即为纯红色也可以用百分比表示其他两个颜色浓度也用相同方法表示后将三个颜色混合就能得到最终颜色rgba中的a指透明度用0~1表示透明度越接近1越不透明可以使用小数且小数点前0可省略。HEXA中的A也指透明度后续不过多介绍这一方法与rgb类似也是三色混合但是它改用了16进制6个数字2个为一组且不用逗号或者空格隔开比如用ff代替了255。但还有比较特殊的一点当每组数字前后位都相同时可以两个数字省略为一个数字使用效果不变。HSLA使用色环来表示颜色并用色相饱和度和亮度三个属性来表示颜色。因为这个不太常用不做过多介绍。6关于CSS字体属性使用font-size可以更改字体大小通常使用的单位为像素(px)对于大部分浏览器来说存在支持的最小像素谷歌浏览器为12px有些浏览器为10px当字体大小小于所支持的最小像素时字体的大小将不再改变但当设置大小为0px时字体将不再显示同时字体大小也有继承特性。使用font-family时还可以对字体的样式进行修改具体可使用的样式可在电脑的设置中查看也可以去下载自己想要的字体样式。字体在输入时可以直接输入对应的中文名但一般来说英文名的兼容性会更好具体英文可以自行查询。字体分为衬线字体和非衬线字体主要靠字体有没有棱角分辨一般非衬线字体在观感上会更加圆滑现在在制作网页时非衬线字体往往也会被更多的使用当输入了一个不存在的字体时浏览器会自动更换成微软雅黑。在使用时可以选择多个字体渲染时会根据从前到后的优先级渲染在最后输入“serif”或sans-seif时浏览器会在前方所有字体均不可使用时更换默认的衬线字体或非衬线字体。font-style可以更改字体的风格常用的值有三个分别为normal,italic和oblique,normal为默认字体italic和oblique为斜体字但两者存在区别oblique会在对应字体为设置斜体字的时候强制产生斜体效果这种写法兼容性差而且所得字体可能不太美观所以平时使用相对italic就较少。font-weight可以改变字体粗细程度常用的值有lighter,normal,bold和bolder,分别对应细正常粗和很粗但对于一些只设计了三种粗细的字体来说很粗的实际表现和粗其实是完全一样的所以bolder这个词也并不常用。除此之外也可以用树枝代替单词规则如上图。使用font属性可以将上述字体复合成一个属性但要注意的是字体族必须放在最后一位大小必须在倒数第二位其余顺序可随意。7关于文本的设置文本颜色可以通过color设置颜色的使用方法同前文所说的内容包括rgb在内的4种方法都可以使用。letter-spacing和word-spacing可以控制文本的间距前者可以调整字母之间的间距在输入单词和汉字的时候各个字母和汉字之间都会产生空格包括原文本中的空格也会被认为是一个字母。但后者则通过空格识别词也就是说在纯汉字的情况下后一种写法是不会产生实际效果的。间距使用的单位为px。使用text-decoration属性可以对文本进行修饰通常用于划线可以为对应的线条施加颜色不需要写color且没顺序要求text-indent可以控制文本缩进简单的说就类似于写作文时每一段前两行的空格这里也同样以像素px为单位。text-align可控制文本的对齐用法与之前讲表格时的用法类似不过多介绍。line-height可控制行高可选值写法通常有四个分别为normal像素值倍数和百分比。其中最常用的是倍数由于字体设计的过程比较复杂导致文字在一行中不是绝对垂直居中所以一行都是文字时不会太影响观感。行高不能过小当等于0时所有行会重叠小于0时会自动恢复默认值。同时行高可以继承与height也有所关联平时使用时可与height标签配合使用使观感更舒服达到更好的视觉效果。通常来说文本是默认顶部对齐的也可以通过单独设置line-height和height进行居中或者沿着底部对其总感觉好麻烦。8关于vertical-align:这一属性通常作用域指定同一行元素之间或表格单元格内文字的垂直对齐方式常用值有以下几种也与前文记录表格用法时讲过的内容类似实际上,valign的v就是选取了vertical的首字母。
返回列表