伪元素选择器选中元素中的一些特殊位置常用伪元素选择器优先级简单描述行内样式 ID选择器 类选择器 元素选择器 通配选择器详细描述1、计算方式每个选择器都可以计算出一组权重格式为abc2、比较规则按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比3、特殊规则行内样式权重大于所有选择器important的权重大于行内样式大于所有选择器权重最高权重图示css三大特性1、层叠性如果发生了样式冲突就会根据一定的规则选择器优先级进行样式的层叠覆盖2、继承性元素会自动拥有其父元素、或其祖先元素上所设置的某些样式规则优先继承离得近的常见的可继承属性text-font-line-color…注参照MDN网站可查询属性是否可被继承3、优先级简单聊important 行内样式 ID选择器 类选择器 元素选择器 * 继承的样式详细聊需要计算权重注并集选择器的每一个部分是分开算的像素我们的电脑屏幕是是由一个一个“小点”组成的每个“小点”就是一个像素px规律像素点越小呈现的内容就越清晰、越细腻注电脑设置默认开了缩放颜色编写方式1、直接使用颜色对应的英文单词具体颜色名参考MDN官方文档named-color CSS type2、使用红、黄、蓝这三种光的三原色进行组合r表示红色g表示绿色b表示蓝色a表示透明度举例注1、若三种颜色值相同呈现的是灰色值越大灰色越浅2、rgb0,0,0是黑色rgb255,255,255是白色3、对于rgb来说前三位的rgb形式要保持一致要么都是0~255的数字要么都是百分比3、HEX或HEXA格式为#rrggbb每一位数字的取值范围是0~f所以每一种光的最小值是00最大值是ff注IE浏览器不支持HEXA但支持HEX若每种颜色的两位都是相同的就可以简写且透明度也要简写4、HSL或HSLA格式为hsl色相hue、饱和度saturation、亮度lightnessHSLA就是在HSL的基础上添加了透明度常用字体属性1、字体大小属性名font-size语法div {font-size 40px}注1、Chrome浏览器支持的最小文字为12px默认的文字大小为16px并且0px会自动消失2、不同浏览器默认的字体大小可能不一致所以最好给一个明确的值3、通常以给body设置font-size属性这样body中的其他元素就都能继承了4、由于字体设计原因文字最终呈现的大小并不一定与font-size的值一致例如font-size设为40px不同字体最终呈现的文字可能比40px大或小5、通常情况下文字相对字体设计框并不是垂直居中的通常都靠下一些借助控制台看样式2、字体族属性名font-family语法div {font-family “STCaiyun”“Microsoft YaHei”sans-serif}注1、使用字体的英文名字兼容性会更好2、如果字体名包含空格必须使用引号包裹起来3、可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上serif衬线字体或sans-serif非衬线字体此时由浏览器和电脑决定字体4、windows系统中默认的字体就是微软雅黑3、font-style字体风格属性名font-style常用值normal正常默认值italic斜体使用字体子代的斜体效果更推荐oblique斜体强制倾斜产生的斜体效果语法div {font-style italic}4、字体粗细属性名font-weight常用值关键词lighter细normal正常bold粗bolder很粗多数字体不支持数值100~1000且无单位数值越大字体越粗或一样粗具体得看字体设计时的精确程度100~300等同于lighter400~500等同于normal600及以上等同于bold语法div {font-weight bold}div {font-weight 600}5、字体复合属性属性名font可以把上述字体样式合并成一个属性编写规则1、字体大小、字体族必须都写上2、字体族必须是最后一位、字体大小必须是倒数第二位3、各个属性间用空格隔开常用文本属性1、文本颜色属性名color可选值颜色名rgb或rgbaHEX或HEXA十六进制HSL或HSLA开发中常用的是rgb/rgba或HEX/HEXA十六进制2、文本间距字母间距letter-spacing单词间距word-spacing通过空格识别词属性值为像素px正值让间距增大负值让间距缩小3、文本修饰属性名text-decoration可选值none无装饰线underline下划线overline上划线line-through删除线可搭配如下值使用dotted虚线wavy波浪线也可以指定颜色代码演示4、文本缩进属性名text-indent属性值css中的长度单位语法div {text-indent 40px}5、文本对齐水平方向属性值text-align常用值left左对齐默认值right右对齐center居中对齐语法div {text-align center}垂直方向1、顶部无需任何属性在垂直方向上默认就是顶部对齐2、居中对于单行文字用heightline-height3、底部对于单行文字让line-heightheight × 2- font-size - x注x是根据字体族动态决定的一个值6、行高属性名line-height可选值1、normal由浏览器根据文字大小决定的一个默认值2、像素px3、数字参考自身font-size的百分比4、百分比参考自身font-size的百分比语法div {line-height 60pxline-height 1.5line-height 150%}注1、由于字体设计原因文字在一行中并不是绝对垂直居中2、line-height过小小于40px文字产生重叠且最小值为0不能为负数3、line-height是可以继承的且为了能更好的呈现文字最好写数值4、line-height和height的关系设置了height那么高度就是height的值不设置height的时候会根据line-height计算高度应用场景1、对于多行文字控制行与行之间的距离2、对于单行文字让height等于line-height可以实现文字垂直居中由于字体设计原因靠上述办法实现的居中并不是绝对的垂直居中7、vertical-align用于指定同一行元素之间或表格单元格内文字的垂直对齐方式属性名vertical-align常用值1、baseline使元素的基线与父元素的基线对齐默认值2、top使元素的顶部与其所在行的顶部对齐3、middle使元素的中部与其父元素的基线加上父元素字母x的一半对齐4、bottom使元素的底部与其所在行的底部对齐注vertical-align不能控制块元素作业代码实现效果