一、CSS简介1.全称层叠样式表Cascading Style Sheets2.作用是一种标记语言用于给HTML结构设置样式二、CSS行内样式1.行内样式写在标签的style属性中,又称内联样式e.g.h1stylecolor:red;font-size:60px;.../h12.内部样式写在HTML页面内部将所有的CSS代码提取出来单独放在style标签中写法styleh1{color:gray;font-size:22px;}/style3.外部样式写在单独的CSS文件中在HTML文件中引用CSS文件中h1{color:gray;font-size:22px;}HTML文件中link relstylesheet href./XXX.csslink标签要写在head标签中三、样式表的优先级1.优先级规则行内样式内部样式外部样式2.同级样式同级样式表现形式与顺序有关后面会覆盖前面的即后来者居上四、CSS的语法规范1.CSS语法的组成1选择器找到要添加样式的元素2声明块设置具体的样式声名块是由一个或多个声明组成的生命的格式为属性名属性值2.注意事项最后一个声明后的分号理论上能省略但最好还是写上选择器与声名块之间属性名与属性值之间均有一个空格理论上可以省略但最好还是写上3.注释写法/* 我是注释 */快捷键ctrl/五、CSS代码风格1.展开风格开发时推荐便于维护和调试2.紧凑风格删去空格及回车项目上线时推荐可减小文件体积六、HTML元素间的关系1.父元素直接包裹某个元素的元素就是该元素的父元素2.子元素被父元素直接包含的元素3.祖先元素父元素的父元素…一直往外找都是祖先元素注父元素也是祖先元素但一般称为父元素4.后代元素子元素的子元素…,一直往里找都是后代注子元素也是后代元素但一般称为子元素5.兄弟元素具有相同父元素的元素互为兄弟元素七、CSS基本选择器1.通配选择器1作用可以选中所有的HTML 元素2语法*{属性名:属性值;}3应用场景清除样式2.元素选择器1作用为页面中某种元素统一设置样式2语法标签名{属性名:属性值}3.类选择器1作用根据元素的class值来选中某些元素2语法.类名{属性名:属性值;}(3)注意点元素的class属性不带.但class选择器要带class的值的标准不使用纯数字不使用中文尽量使用英文与数字的组合若用多个单词组成使用-做连接一个元素不能写多个class属性一个元素的class属性可以有多个值要用空格隔开4.ID选择器1作用根据元素的id属性值精准的选中某个元素2语法#id值{属性名:属性值;}(3)注意点id的值的标准不包含空格区分大小写尽量由字母、数字、下划线、短杠组成最好以字母开头不要以数字开头一个元素不能写多个id属性一个元素可以同时拥有id和class属性5.交集选择器1作用选中同时符合多个条件的的元素2语法选择器1选择器2选择器3...选择器n{属性名:属性值;}(3)注意点有标签名标签名必须写在前面id选择器理论上可以作为交集的条件但是实际上几乎不用因为没有意义交集选择器中不可能出现两个元素选择器最常用的交集选择器元素选择器配合类名选择器6.并集选择器1作用选中多个选择器对应的元素又称分组选择器2语法选择器1, 选择器2, 选择器3, ..., 选择器n{属性名:属性值;}(3)注意点并集选择器一般竖着写任何形式的选择器都可以作为并集选择器的一部分并集选择器通常用于集体声明可以缩小样式体积7.后代选择器1作用选中指定元素中符合要求的后代元素2语法选择器1 选择器2 选择器3 ... 选择器n{属性名:属性值;}3注意点先写祖先再写后代选择器之间用空格隔开选择器可以选择任意学过的一种结构一定要符合HTML嵌套要求8.子代选择器1作用选中指定元素中符合要求的子元素子代选择器又称子元素选择器、子选择器2语法选择器1选择器2选择器3...选择器n{属性名:属性值;}3注意点选择器之间用隔开选择器可以是任一类型9.兄弟选择器1相邻兄弟选择器1作用选中指定的元素后符合条件的相邻兄弟元素2语法选择器1选择器2{属性名:属性值;}2通用兄弟选择器1作用选中指定元素后符合条件的所有兄弟元素2语法选择器1~选择器2{属性名:属性值;}3注意点两种兄弟选择器选择的都是下面的兄弟10.属性选择器1作用选中属性值符合一定要求的元素2语法1选中具有某个属性的元素[属性名]{属性名:属性值;}2选中包含某个属性且属性值等于指定值的元素[属性名指定值]{属性名:属性值;}3选中包含某个属性且属性值以指定值为开头的元素[属性名^指定值]{属性名:属性值;}4选中包含某个属性且属性值以指定值为结尾的元素[属性名$指定值]{属性名:属性值;}5选中包含某个属性且属性值包含指定值的元素[属性名*指定值]{属性名:属性值;}11.伪类选择器1作用选中特殊状态的元素2分类1动态伪类:link超链接未被访问的状态属性名:link{属性名:属性值;}:visited超链接被访问过的状态属性名:visited{属性名:属性值;}:hover鼠标悬停在元素上的状态属性名:hover{属性名:属性值;}:active元素激活的状态属性名:active{属性名:属性值;}以上四种动态伪类遵循LVHA的顺序即link、visited、honer、active的顺序focus获取焦点的元素适用于表单元素属性名:focus{属性名:属性值;}2结构伪类:first-child所有子元素的兄弟元素的第一个如果该子元素不是兄弟元素中的第一个则无法选中元素名子元素名:first-child{属性名:属性值;}:last-child所有子元素的兄弟元素的最后一个如果该子元素不是兄弟元素中的最后一个则无法选中元素名子元素名:last-child{属性名:属性值;}:nth-child(n)所有子元素的兄弟元素的第n个如果该子元素不是兄弟元素中的第n个则无法选中元素名子元素名:nth-child(n){属性名:属性值;}:nth-last-child(n)所有子元素的兄弟元素的倒数第n个如果该子元素不是兄弟元素中的倒数第n个则无法选中元素名子元素名:nth-last-child(n){属性名:属性值;}:first-of-type所有子元素同类型的兄弟元素的第一个元素名子元素名:first-of-type{属性名:属性值;}:last-of-type所有子元素同类型的兄弟元素的最后一个元素名子元素名:last-of-type{属性名:属性值;}:nth-of-type(n)所有子元素同类型的兄弟元素的第n个元素名子元素名:nth-of-type(n){属性名:属性值;}:nth-last-of-type(n)所有子元素同类型元素的倒数第n个元素名子元素名:nth-last-of-type(n){属性名:属性值;}以上带有nth的选择器括号中的数字有以下规则1.取值从0开始到∞结束2.0或不写为什么都不选中3.形式为num*nnum4.偶数为2n或even5.奇数为2n1或odd6.-n3选中的时前三个:only-child选中的是没有兄弟元素的元素元素名:only-child{属性名:属性值;}:only-of-type选中的是没有同类型兄弟元素的元素元素名:only-of-type{属性名:属性值;}:root选中的是根元素即html:root{属性名:属性值;}:empty选中的是没有内容的元素元素:empty{属性名:属性值;}3否定伪类:not(选择器)排除满足括号中条件的元素4UI伪类:checked被选中的复选框或单选按钮:enable可用的表单元素省略不写没有disabled属性:disabled不可用的表单元素有disabled属性5目标伪类:target选中锚点指向的元素6语言伪类lang()根据指定的语言选择元素本质是看lang属性的值12.伪元素选择器*1VC快捷生成一段可翻译的文字Lorem:后面跟什么数字该段文字就有几个单词若没有加数字则单词数随机生成2作用选中元素中的一些特殊的位置3常用为元素::first-letter选中元素中的第一个文字::first-line选中元素中的第一行文字::selection选中被鼠标选中的内容::placeholder选中输入框的提示文字::before在元素最开始的位置创建一个子元素添加内容必须用content属性指定内容::after在元素最后的位置创建一个子元素添加内容必须用content属性指定内容常用于清除浮动.clearfix::after{content:;display:block;clear:both;}::marker:选择列表项li前面的项目符号或序号li::marker{color:blue;/* 颜色 */font-size:24px;/* 大小 */content:★ ;/* 更换符号 */}八、选择器优先级1.简单描述!important行内样式ID选择器类选择器元素选择器通配选择器2.比较权重1计算方式每个选择器都可以计算出一组权重格式为(a,b,c)aID选择器的个数b类、伪类、属性选择器的个数c元素、伪元素选择器的个数并集选择器的每一个部分是分开计算的(2)比较规则按照从左到右的顺序依次比较大小当前位胜出后后面不再比较九、CSS三大特性1.层叠性1概念如果发生了样式冲突那就会根据一定的规则选择器优先级进行样式的层叠覆盖即权重一致看顺序后来者居上2.继承性1概念元素会自动拥有其父元素或其祖先元素上所设置的某些样式2规则优先继承离的近的就近原则能继承的属性都是和盒子模型无关的不影响布局的3常见可继承属性字体属性、文本属性除了vertical-align、文字颜色 等4常见不可继承属性边框、背景、内边距、外边距、宽高、溢出方式 等3.优先级1单个比较!important行内样式ID选择器类选择器元素选择器通配选择器继承的样式2计算权重十、颜色1.方法一颜色名称h2{color:gray;}2.方法二rgb或rgba(1)编写方式使用红、绿、蓝三种光的三原色进行组合取值范围为0~255r表示红色g表示绿色b表示蓝色a表示透明度取值范围为0~1前三种数据的取值要么都是数字要么都是百分比(2)示例h2{color:rgb(255,0,0,0.5);}3.方法三HEX与HEXA(1)格式用十六进制表示#rrggbbaa每种颜色最多两位每一位的取值范围为0~f若每种颜色两位重复则可以只写一次重复值此时透明度也必须写成一位的形式2示例h2{color:#ff0000;color:#ff0000ff;color:#f00;color:#f00f;}(3)特殊情况IE浏览器不支持HEXA, 但支持HEX4.方法四HSL或HELA1概念hsl是通过色相、饱和度、亮度表示一个颜色的格式为hsl色相饱和度亮度,hlsa其实就是在hsl的基础上添加了透明度色相取值范围是0~360度饱和度、亮度取值范围0%~100%