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>