CSS-层叠样式表

#CSS 是什么

CSS 指层叠样式表(Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中。

#插入样式表的方法

#内联样式

在相关的标签内使用样式（style）属性。

1

<p style="color: red; font-size: 20px">This is a paragraph</p>

当样式仅需要在一个元素上应用一次时。

#内部样式表

使用 <style> 标签在文档头部定义内部样式表

1
2
3
4
5
6
7


<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

当单个文档需要特殊的样式时，就应该使用内部样式表。

#外部样式表

1
2
3


<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

当样式需要应用于很多页面时。

📌 不要在属性值与单位之间留有空格。

使用 margin-left: 20px; 而不是 margin-left: 20 px;。

#多重样式的优先级

内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省配置

🌰 外部样式表拥有针对 h3 选择器的三个属性：

1
2
3
4
5


h3 {
  color: red;
  text-align: left;
  font-size: 8px;
  }

而内部样式表拥有针对 h3 选择器的两个属性：

1
2
3
4


h3 {
  text-align: right; 
  font-size: 20px;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

1
2
3


color: red; 
text-align: right; 
font-size: 20px;

#选择器的分类

#标签选择器

用于修饰同类 HTML 标签的共性风格。

1
2
3
4
5


// 所有的li标签通用
li {
  color: red;
  font-size: 20px;
}

#id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。

📌 HTML 页面，不能出现相同的 id，哪怕他们不是一个类型。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！

📌 id 区分大小写。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<head>
<style type="text/css">
  #para {
    color:red;
    font-size: 20px;
  }
</style>
</head>

<body>
<p id="para">this is a paragraph.</p>
</body>

#类选择器

在 CSS 中，类选择器以一个点号(.)表示。

多个标签可以公用一个类；同一个标签可以使用多个类选择器，用空格隔开。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<head>
<style type="text/css">
.center {text-align: center;}
.important {font-size: 20px; color:red;}
</style>
</head>

<body>
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

<p class="center important">this is an important part.</p>
<!-- 错误写法 -->
<p class="center" class="important">this is an important part.</p>
</body>

类选择器结合标签选择器来使用，例如，p.important 解释为：“其 class 属性值为 important 的所有段落。”

#后代选择器

后代选择器可以选择作为某元素后代的元素。

1
2
3


h1 em {color:red;}
h1 .classone {color: blue;}
div #image1 {width: 200px;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em ）则不会被这个规则选中：

1
2


<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

📌 空格表示的只是一种后代关系，并不一定指紧跟其后的元素(儿子)。比如上例中，h1 中的所有 em 标签都会应用该样式，不论嵌套深度是多少。

1
2
3


<h1>
  <b>This is a <em>important</em> heading<b>
</h1>

#子元素选择器

如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，使用子元素选择器。

1
2
3


h1 > strong {color:red;}
// 可以结合使用后代选择器和子元素选择器
h1 b > em {color:red;}

#交集选择器

1
2
3
4
5
6
7
8
9


// h2.important 和 h2 .important 不是一回事
h2.important {
  color:red;
  font-size:20px;
}

p#normaltext {
  color:black;
}

选择的元素要求同时满足两个条件：必须是 h2 标签，然后必须是 important 类。

1
2


<!-- h2.important作用 -->
<h2 class="important"> Important content! </h2>

#并集选择器

逗号隔开选择器，三种基本选择器都可以放进来。

1
2
3
4


/*定义了一个并集选择器，带有p,h1,id="mytitle",class="one"的标签都内容会显示红色*/
p,h1,#mytitle,.one{
  color:red;
}

#选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

#超链接的样式

链接的四种状态：

a:link 普通的、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻

当为链接的不同状态设置样式时，按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


<!DOCTYPE html>
<html>
<head>
  <style>
    a.one:link {color:#ff0000;}
    a.one:visited {color:#0000ff;}
    a.one:hover {color:#ffcc00;}
  </style>
</head>

<body>
  <p>
    <b>
      <a class="one" href="/index.html" target="_blank">这个链接改变颜色</a>
    </b>
  </p>
</body>

</html>

#参考

CSS的四种基本选择器和四种高级选择器

W3CSchool

CSS选择器优先级总结

CSS-层叠样式表

相关文章：