CSS 学习总结

发表于 更新于 分类于 ， Valine：

CSS 通常用于配合 HTML 来实现网页的各种样式。本篇对 CSS 的基本概念进行介绍。

0. 概述

CSS 是什么：cascading style sheets 层叠样式表。用于记录文档的格式，起到了文档内容和文档格式分离的作用。

CSS 规则主要由两个部分构成：选择器 and 属性声明。

例如下方代码：

1
2
3
4
5
p {
  text-align: center;
  color: black;
  font-family: arial;
}

p 为选择器，可以直接使用标签名进行选择，可以选中 <p> 标签对应的元素，后接一个大括号，大括号中规定了选中的 HTML 元素的属性。

1. 选择器

CSS 通过选择器选中特定的 HTML 元素来规定它的属性。除了上面概述中介绍的使用 标签名选择元素外，CSS 还提供了很多中进行元素选择的方法。

1.1 ID选择器

在 HTML 中，元素如果有 id 属性，则一定在整个文档中是唯一的。可以使用 id 来选中对应的元素, 对应的 CSS 选择器使用 #id名 来实现。 e.g. 

1
2
3
4
<style type="text/css">
#red {color:red;}
</style>
<p id="red">这个段落是红色。</p>

1.2 类选择器

可以通过类选择器来选中一组拥有相同 class 属性的元素。使用方法为 .类名。 e.g.

1
2
3
4
5
6
7
8
9
<style type="text/css">
.center {text-align: center}
</style>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

1.3 属性选择器

CSS 可以为带有特定属性的 HTML 元素设置样式。使用 [属性名] 的形式，选中带有特定属性的元素。e.g. 下面代码, 为所有带有 title 属性的元素设置颜色样式。

1
2
3
[title] {
    color:red;
}

1.4 派生选择器

派生选择器 或称为 上下文选择器，是通过上下文来选中具有特定层级结构的元素的一种选择器。例如：

1
2
3
4
5
6
7
8
9
10
11
12
<style type="text/css">
li strong {
    font-style: italic;
    font-weight: normal;
}
</style>

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
</ol>

2. 属性设置

CSS 可以设置的样式属性非常的多。这里只对一些重要的、常用的进行举例。

2.1 边距属性

在 HTML 中，所有的元素实际上都是放置在一个元素框中。具体的边距的定义参考下图：

CSS 可以对上述边距进行设定，例如下面的 CSS 样式表，设置了所有元素的边距信息。

1
2
3
4
* {
  margin: 10px;
  padding: 10px;
}

2.2 文本

文本属性可以定义文本的颜色，间距，缩进等，例如:

  • text-align 文本对齐
  • text-decoration 为文本添加上划、下划线等
  • font-family 指定字体
  • font-style 字体风格，可以指定为斜体等
  • font-size 字体大小

2.3 背景

可以设置元素的背景，如下：

  • background-color 设置背景颜色
  • background-image 设置背景图片
  • background-position 设置背景图像位置

2.4 链接

HTML 中的链接通常有下面四种状态：

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

可以为上面四种状态分别设置样式, e.g. 

1
2
3
4
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Ref： w3Cschool文档