共计 1623 个字符,预计需要花费 5 分钟才能阅读完成。
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 奇、even
2、与状态相干
:link 未被拜访的链接
:hover 光标悬浮
:active 激活时的链接
:visited 拜访过的链接
:focus 聚焦
5) 伪元素选择器
1、革除浮动
2、创立伪元素
3. 导航栏的侧边
在其余选择器的前面应用:: , 增加伪元素
::after{}
::before{}
eg. ul.nav::after{
display:block;
clear:both;
content:"---";
}
正文完