1.CSS 伪类选择器三.否定伪类:not选择器排除满足括号中条件的元素四.UI伪类1.:checked被选中的复选框或单选按钮。2.:enable可用的表单元素没有disabled属性3.:disabled不可用的表单元素有disabled属性五、目标伪类了解:target选中锚点指向的元素。2.伪元素选择器作用选中元素中的一些特殊位置常用伪元素1.:irst-letter选中元素中的第一个文字2.:first-line选中元素中的第一行文字3.:selection选中被鼠标选中的内容4.:placeholder选中输入框的提示文字5.:before在元素最开始的位置创建一个子元素必须用content属性指定内容6.:after在元素最后的位置创建一个子元素必须用content属性指定内容3.选择器优先级通过不同的选择器选中相同的元素并且为相同的样式名设置不同的值时就发生了样式的冲突到底应用哪个样式此时就需要看优先级了简单描述行内样式ID选择器类选择器元素选择器通配选择器2.比较规则按照从左到右的顺序依次比较大小当前位胜出后后面的不再对比例如(1,0,0)(0,2,2)(1,1,0)(1,0,3)(1,1,3)(1,1,2)3.特殊规则1.行内样式权重大于所有选择器2.important的权重大于行内样式大于所有选择器权重最高4.CSS 三大特性1.层叠性概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆盖什么是样式冲突元素的同一个样式名被设置了不同的值这就是冲突2.继承性概念元素会自动拥有其父元素、或其祖先元素上所设置的某些样式规则优先继承离得近的常见的可继承属性text-??,font-??, line-??、color3.优先级important行内样式ID选择器类选择器元素选择器*继承的样式。详细聊需要计算权重计算权重时需要注意并集选择器的每一个部分是分开算的5.CSS 像素与颜色表示方式一颜色名编写方式直接使用颜色对应的英文单词编写比较简单例如1.红色red2.绿色green3.蓝色blue4.紫色purple5.橙色orange6.灰色gray表示方式二rgb或rgba编写方式使用红、黄、蓝这三种光的三原色进行组合。r表示红色g表示绿色b表示蓝色a表示透明度举例/使用0~255之间的数字表示一种颜色/color:rgb(255,0,0)红色/color:rgb(θ,255, 0);/* 绿色*/color:rgb(θ,0,255);/蓝色/color:rgb(θ,0,0);/* 黑色*/color:rgb(255,255,255);/白色//混合出任意一种颜色/co1or:rgb(138,43,226/紫罗兰色/color:rgba(255,0,0,0.5);/半透明的红色//也可以使用百分比表示一种颜色用的少/color:rgb(100%,0%0%);/* 红色*/color:rgba(100%0%,0%,50%);/半透明的红色/小规律1、若三种颜色值相同呈现的是灰色值越大灰色越浅2.rgb(000是黑色rgb(255,255,255)是白色3.对于rbga来说前三位的rgb形式要保持一致要么都是0~255的数字要么都是百分比表示方式三HEX或HEXAHEX的原理同与rgb一样依然是通过红、绿、蓝色进行组合只不过要用6个数字分成3组来表达格式为#rrggbb每一位数字的取值范围是0~f即:01234567,89abcdef所以每一种光的最小值是00最大值是ffcolor:#ffo00e;/红色/color:#0offoo;/绿色/color:#0000ff;/蓝色/color:#000000;/* 黑色 */color:#ffffff;/白色//如果每种颜色的两位都是相同的就可以简写/color:#ff9988;/*可简为:#f98 *//但要注意前三位简写了那么透明度就也要简写/color#ff998866;/可简为#f986/注意点IE浏览器不支持HEXA但支持HEX表示方式四HSL 或HSLAHSL是通过色相、饱和度、亮度来表示一个颜色的格式为hs1色相饱和度亮度色相取值范围是0~360度具体度数对应的颜色如下图饱和度取值范围是0%~100%。向色相中对应颜色中添加灰色0%全灰100%没有灰亮度取值范围是0%~100%。0%亮度没了所以就是黑色。100%亮度太强所以就是白色了HSLA其实就是在HSL的基础上添加了透明度6.CSS 常用字符属性1.字体大小属性名font-size语法div {font-size:40px;}注意点1.Chrome浏览器支持的最小文字为12px默认的文字大小为16px并且0px会自动消失2.不同浏览器默认的字体大小可能不一致所以最好给一个明确的值不要用默认大小3.通常以给body设置font-size属性这样body中的其他元素就都可以继承了2.字体族属性名font-family语法div {font-family: “STCaiyun”,“Microsoft YaHei”,sans-serif}注意1.使用字体的英文名字兼容性会更好具体的英文名可以自行查询或在电脑的设置里去寻找2.如果字体名包含空格必须使用引号包裹起。3.可以设置多个字体按照从左到右的顺序逐个查找找到就用没有找到就使用后面的且通常在最后写上serif衬线字体或sans-serif非衬线字体4.windows系统中默认的字体就是微软雅黑3.字体风格属性名font-style常用值1.normal正常默认值)2.italic斜体使用字体自带的斜体效果3.oblique斜体强制倾斜产生的斜体效果实现斜体时更推荐使用italic。语法div {font-style: italic;}4.字体粗细属性名fontweight常用值关键词1.lighter细2.normal正常3.bold粗4.bolder很粗(多数字体不支持数值1.100~1000且无单位数值越大字体越粗或一样粗具体得看字体设计时的精确程度。2.100~ 300等同于1ighter400~500等同于normal600及以上等同于bold。语法div {font-weight: bold;div {font-weight: 600;5.字体复合写法属性名font可以把上述字体样式合并成一个属性。编写规则1.字体大小、字体族必须都写上2.字体族必须是最后一位、字体大小必须是倒数第二位。3.各个属性间用空格隔开。·实际开发中更推荐复合写法但这也不是绝对的比如只想设置字体大小那就直接用font-size属性6.文本颜色属性名color可选值1.颜色名2.rgb 或 rgba3.HEX或HEXA十六进制4.HSL或HSLA开发中常用的是rgb/rgba或HEX/HEXA十六进制)。举例:div {color:rgb(112,45,78):7.文本间距字母间距letter-spacing单词阀距:word-spacing通过空格识别词属性值为像素px正值让间距增大负值让间距缩小8.文本修饰属性名text-decoration可选值1.none无装饰线常用2.underline下划线常用3.overline上划线4.line-through删除线可搭配如下值使用1.dotted虚线2.wavy波浪线3.也可以指定颜色举例a{text-decoration:none;}9.文本缩进属性名text-indent属性值css中的长度单位例如px举例:div {text-indent:40px;}后面我们会学习css中一些新的长度单位目前我们只知道像素px10.文本对齐 水平属性名text-align常用值1.left左对齐默认值)2.right右对齐3.center:居中对齐举例div {text-align:center;}11.font-size 细说