CSS语言详解

CSS用于设置网页样式

CSS语言特性：
1.层叠性:
多种不同的CSS样式可以叠加使用（只要不是相同的属性冲突就可以叠加使用），如：一个选择器定义了字体大小为12像素，另一个选择器定义了字体颜色为红色，这两个选择器都作用于同一个标记，这时这个标记的字体大小为12像素，颜色为红色
2.继承性：
子标记可以继承父标记的某些样式（只要适用于子标记的样式，都可以继承使用）

CSS的注释：/* */

引入CSS样式表（不同的引入决定了不同的用法）：
1.行内式：

<标记名 style="属性1:属性值1; 属性2:属性值2;"></标记名>

2.内嵌式（使用选择器）

<style type="text/css">
     选择器{属性1:属性值1; 属性2:属性值2; }  /*是一个结构*/
</style>

3.链入式（使用选择器）：
连接外部css文件

<link href="URL" rel="stylesheet" type="text/css" />

4.导入式（使用选择器）：
作用与链入式相同，不过可以添加 内嵌样式

<style type="text/css">
@import url(css的路径); 或者 @import "css的路径";

</style>

权重：行内式 > 内嵌式 > 链入式 = 导入式

CSS的优先级：
因为作用于同一标记的样式属性相同造成冲突，才产生优先级（CSS层叠性）
1.权重越大，优先使用
2.权重相同，就近原则
3.继承的样式权重为0，不管父元素样式权重多大，子元素继承时，父元素样式权重为0，也就是说子元素定义的样式会覆盖掉继承而来的样式
4.id选择器权重100，类选择器权重10，标记选择器权重1

!important命令，具有最高权重，必须位于 属性值 与 分号 之间

选择器{属性:属性值!important;}

CSS选择器：
一、基础选择器：
1.标记选择器：
作用于所有同名标记

标记名{}

p{font-size:12px;}

<p>hello world</p>

2.类选择器：

.类名{}

.red{color:red;}

<p class="red">hello world</p>

3.id选择器：

#id名{}

#bold{font-size:12px;}
<p id="bold">hello world</p>

4.通配符选择器：
作用于所有的元素

*{}

二、复合选择器：
1.交集选择器
第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格

p.special{font-size:12px;}

<p class="special">hello world</p>

2.后代选择器
用于嵌套关系，外标记写在前面，内标记写在后面，中间用空格隔开

p strong{font-size:12px;}

<p>hello<strong>world</strong></p>

3.并集选择器
把各个选择器通过逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
通过与并集选择器中的使用逗号相隔的选择器 匹配 作用于标记

h2,h3,.special{font-size:12px;}

<h2>hello</h2>
<h3>world</h3>
<p class="special">hello world</P>