CSS之基础入门

Posted 2020-06-23

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. 如果同个选择器中定义两条相冲的规则，则后面的样式会覆盖前面的样式。

　　继承：如果子元素定义的样式和父元素的没发生冲突，则子元素将继承父元素的样式，并且子元素可以添加自己的样式风格。如果发生冲突，冲突的父元素的样式将不会影响到子元素的样式。子元素中定义的样式始终不会影响到父元素。