1.样式表的应用
a)行内样式表：<开始标签style=”属性:属性值;属性:属性值;”>
优点：优先级最高，省略了选择器的问题；
不足：没有实现结构和表现分离，不利于维护，所有使用较少，但是如果要对某个元素做元素的修饰，可以考虑这种方式；
b)内部样式表：所谓内部样式表，也可以成为内嵌样式表，就是将CSS代码写在HTML文档的头部，格式如下
<head>
<style type="text/css" >
选择器{样式声明}
</style>
</head>
不足：没有实现结构和表现分离，不利于维护，当对一个页面进行样式的修饰时，可以考虑内部样式表
c)外部样式表：就是将CSS代码封装到一个独立的CSS文件中，然后通过link标签将CSS文件和HTML文件关联起来，格式如下
<head>
<link rel="stylesheet" type="text/css" href="CSS样式路径" />
</head>
优点：真正实现了结构和表现分离，利于维护
d)导入样式表
格式
<style type="text/css">
@import "样式表路径";
</style>
缺点：由于JS无法操控导入样式表，可以不建议使用
2.样式表的优先级
a)行内样式表优先级最高
b)内部样式表和外部样式表的优先级取决于样式表的加载顺序
c)简单点说，样式表的优先级是采用“就近原则”
3.样式表特性
a)继承：父子关系，子元素会继承父元素的样式
b)覆盖：如果选择器权重相同，那么后写的样式会覆盖先写的样式
4.选择器详解
a)标签选择器（也称为元素选择器）
b)类选择器
c)id选择器
d)全局选择器（也称为通配符选择器），用*作为选择器，作用是选取文档中所有元素
e)群组选择器：就是用逗号将多个选择器连接在一起而形成的选择器叫做群组选择器，群组选择器至少要连接两个选择器
f)后代选择器（也称为派生选择器），用空格连接祖先元素和后代元素而形成的选择器，至少要有两个选择器被连接
g)子选择器：用>号将父元素和子元素连接在一起而形成的选择器，至少要有连个选择器
h)属性选择器：就是利用标签的属性和属性值作为选择器
通过属性名选取元素：格式[属性名1][属性名2]…
通过属性名和属性值选取元素（具有某个属性且具有某个属性值）：格式[属性名=”属性值”]
通过属性名和属性值选取元素（具有某个属性，且包含某个属性值）：格式[属性名~=”属性值”]，注意，如果属性后面只有一个值，那么也会被选取到
通过属性名和属性值的前缀选取元素（具有某个属性，且属性值以某些字符串作为前缀，注意前缀和后面的内容用”-”连接）：格式[属性名|=”属性值前缀”]
通过属性名和属性值选取元素（具有某个属性，且属性值以某些字符开头）：格式[属性名^=”字符”]
通过属性名和属性值选取元素（具有某个属性，且属性值以某些字符结尾），格式[属性名$=”字符”]
l通过属性名和属性值选取元素（具有某个属性，且属性值中包含某些字符），格式[属性名*=”字符”]
网友评论