第二章 CSS样式表
2.1 CSS基础
2.1.1CSS简介
- CSS（Cascading Style Sheets）,中文名为级联样式单，也有称为层叠样式单，层叠就是样式可以层层叠加，可以对一个元素多次设置样式，后面定义的样式会对前面定义的样式进行重写，在浏览器中看到的效果是使用最后一次设置的样式。CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
- 结构与表现相分离是指在网页设计中，HTML标签只用于搭建网页的基本结构，不使用标签属性设置显示样式，所有的样式交由CSS来设计。
2.1.2引入CSS方法
CSS样式规则：
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
1.链入式(一般用于项目开发中）
把样式表保存为一个样式表文件，然后在页面中用<link>标签连接到这个样式表文件。这个<link>标签必须放到页面的<head>区内。
<head>
...
<link href="CSS 文件路径"
type="text/css"
rel="stylesheet">
...
<head>
2.内嵌式（一般用于小案例中）
把样式表用<style>标记插入到<head>区内
<head>
<style type="text/css>
选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>3. 行内式
混合在HTML标记里使用，可以简单对某个元素单独定义样式。直接在HTML标记里加入style参数 。
<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3;">
内容
</标签名>2.2CSS选择器
2.2.1 CSS基本选择器
1.元素选择器（标签选择器）
元素选择器是指用HTML标签名称作为选择器按标签名称分类，为页面中某一类标签指定统的CSS样式。有多个元素用逗号隔开，也称为群组选择器、并集选择器。
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
<style>
p{
color:red;
font-size：10px
}
</style>
...
<body>
<p>This is the element selector</p>
</body> 2.类选择器
.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
<style>
.one{
color:red;
}
</style>
...
<body>
<p class="one"> 这是类选择器<p>
</body>3.id选择器
#id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
<style>
#one{
color:red;
}
</style>
...
<body>
<p id="one"> 这是id选择器<p>
</body>4.通配符选择器
是所有选择器里作用范围最广的，能匹配页面中所有的元素。但是在实际开发中不建议使用通配符选择器，因为它设置的样式对所有的HTML标记都生效，不管标记是否需要该样式，反而降低了代码的执行速度。
*{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
5.标签指定选择器
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标签选择器第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one.
2.2.2层次选择器
层次选择器可以更精确的控制元素样式。CSS3中的层次选择器主要包括后代选择器、子元素选择器、相邻兄弟选择器，通用兄弟选择器，其中子元素择器由符号“>”连接，兄弟选择器由符号“+”和
“~”连接。
1.后代选择器
用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
E F{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
2.子元素选择器
用来选择某个元素的第一级子元素。
E>F{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
3.兄弟选择器
用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。
- 相邻兄弟选择器（选择器中的两个元素有同一个父亲，第二个元素紧跟第一个元素）
E+F{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
- 通用兄弟选择器（选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素）
E~F{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
css的高级特性：
层叠性：有多种css样式的叠加
最低0.47元/天 解锁文章
扫一扫
1798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
