1.css如何作用于html元素？
1. 内部link导入【内部样式表】 将样式表通过 head标签外部的link标签引入2. 外部style标签【外部样式表】 在style标签外部书写款式 <style> </style>3. 内联style属性【内联样式表】 <div style='款式名:款式值;'></div>4. @import @import '样式表的门路'; <style> @import './1-style.css'; </style>link和@import的区别？
1) 所属范畴 link 是html中标签，不仅仅能够导入样式表，还能够设置rel属性 rel="stylesheet" 示意导入内部样式表 @import 是css的语法，只可能导入样式表 2) 加载程序 link 导入的款式文件是在浏览器加载html文件的同时被加载 @import 导入的款式文件，是在浏览器加载完html文件之后，再去加载 3) 兼容性问题 link是一个标签，不存在兼容性问题 @import存在兼容性问题，IE低版本无奈反对该语法css选择器
1) 根本选择器标签选择器
标签名 { 款式名:款式值;}留神： 1、标签选择器能够选中以后文件中所有具备该标签名的元素，而不是某一个 2. 元素不管嵌套多少层，都能够被选中 3. 只有是html的标签，都能够用于标签选择器类名选择器
.类名 { 款式名:款式值;}留神： 1、同一个文件中*类名容许反复* 3、类名选择器存在命名标准问题 数字、字母、下划线 不能以数字结尾 不能以其余标签名作为类名 4、同一个元素能够同时存在多个类名 <div class='one two ...'></div>id选择器
#id { 款式名:款式值; }留神： 1、在同一个文件中id不容许反复 2、id的命名标准与类名的统一通配选择器
用于选中以后文件中的所有元素 * { 款式名:款式值; }留神： 通配选择器个别用于网页款式的初始化逗号选择器
给多个选择器选中的元素设置款式
选择器一,选择器二,选择器三 {款式名:款式值; }组合选择器
div.one
2) 档次选择器
子代选择器
含意: 先选中具备标签名一的元素，再在该元素的**第一代子元素**中选中具备标签名二的元素语法： 标签名一 > 标签名二 { 款式名:款式值; }后辈选择器
含意: 先选中具备标签名一的元素，再在该元素的**所有子元素**中选中具备标签名二的元素语法： 标签名一 标签名二 { 款式名:款式值; }兄弟选择器
1、相邻兄弟选择器 含意：先找具备标签名一的元素，而后选中该元素**前面紧跟**的元素，设置属性 语法： 标签名一 + 标签名二 { 款式名:款式值; } 留神： 1、标签名的取值不仅仅能够实标签名，还能够是类名、id 2、标签名一和标签名二的元素之间不能有其余元素2、通用兄弟选择器 含意：先找具备标签名一的元素，而后选中该元素**前面所有**具备标签名二的元素，设置属性 语法： 标签名一 ~ 标签名二 { 款式名:款式值; }
3) 属性选择器
个别用于辨别input框 语法： [attr] 蕴含该属性的元素都能够被选中 [attr=value] 属性值等于value的元素 [atrr^=value] 以value属性值开始 eg. form > input[name^=p]{ border:3px solid brown; }4) 伪类选择器
在其余选择器的前面应用: ,增加非凡的成果1、与子元素相干 :first-child 第一个孩子 :last-child 最初一个孩子 :nth-child(n) 第n个孩子 n的取值 数字(整数) 1、2、3... 英文字符 odd奇、even2、与状态相干 :link 未被拜访的链接 :hover 光标悬浮 :active 激活时的链接 :visited 拜访过的链接 :focus 聚焦5) 伪元素选择器
1、革除浮动2、创立伪元素3. 导航栏的侧边在其余选择器的前面应用:: ,增加伪元素::after{}::before{} eg. ul.nav::after{ display:block; clear:both; content:"---"; }