CSS之基础入门
1. CSS的3加载方式
a. 内嵌式
即在标签后面直接添加CSS样式。如:
<p style="color:red;font-size:20px">hello world</p>
b. 内联式
在head标签内插入CSS样式,如
<style>
p{}
</style>
c. 外联式
在head标签内加入link链接到外部CSS文件,如
<link type="text/css" rel="stylesheet" href="*.css"/>
2. 选择器
a. 选择器优先级(权重)如下图所示:
从上图可以看出选择器优先级顺序为:"!important" > 行内式 > 内嵌式 > id > class、属性、伪类 > 元素、伪元素 > 通配符"*"。
b. 后代选择器 如:span p{}, div .cds{}, div #pls{}。
c. 伪类包括:a:link{}, a:visited{}, a:hover{}, a:active{}, :root{}, table:empty{}(注:定义表格内为空的单元格), body:not(p){}(注:设置body标签里除了p标签的其他元素的属性), :focus{}, :checked{}。
注释:在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!
注释:在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!
d. 伪元素:::selection{}, :first-line{}, :first-letter{}(设置第一个字), :before{}, :after{}...
e. 特殊选择器::nth-child(n){} (注:设置第几个元素), :nth-last-child(n){}(注:设置倒数第几个元素), :nth-last-child(odd){}(注:设置序号为基数的元素), :nth-last-child(even){}(注:设置序号为偶数的元素), :nth-last-child(4n+1){}(注:设置每间隔几个元素的样式)。
3. 层叠和继承
层叠:表示一个元素可以被多个选择器共同作用。 CSS的处理原则如下:
i. 如果多个选择器定义的规则不冲突,则元素将应用所有选择器定义的样式。
ii. 如果多个选择器定义的规则发送冲突,则按选择器的优先级决定。
iii. 如果同个选择器中定义两条相冲的规则,则后面的样式会覆盖前面的样式。
继承:如果子元素定义的样式和父元素的没发生冲突,则子元素将继承父元素的样式,并且子元素可以添加自己的样式风格。如果发生冲突,冲突的父元素的样式将不会影响到子元素的样式。子元素中定义的样式始终不会影响到父元素。