CSS学习笔记

CSS样式添加方式

css样式添加方法

使用html标签样式化

<style>
   p,
  li {
    color: green;
  }
</style>
<body>
   	<h1>I am a level one heading</h1>

   	<p>This is a paragraph of text. In the text is a <span>span element</span>
   	and also a <a href="http://example.com">link</a>.</p>

   	<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

	<ul>
  		<li>Item one</li>
  		<li>Item two</li>
  		<li>Item <em>three</em></li>
	</ul>
</body>

使用类名样式化

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>
<span class="special">22121</span>
<style>
.special {
  color: orange;
  font-weight: bold;
}
</style>

HTML 元素选择器跟类一起出现：

li.special {
  color: orange;
  font-weight: bold;
}

这个意思是说，“选中每个 special 类的 li 元素”。你真要这样，好了，它对 <span> 还有其他元素不起作用了。你可以把这个元素再添上去就是了：

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

根据元素在文档的位置样式化

标签用于定义强调文本，标签内的内容通常以斜体显示。

在我们的文档中有两个 <em>元素——一个在段落内，另一个在列表项内。仅选择嵌套在<li> 元素内的<em>我们可以使用一个称为包含选择符的选择器，它只是单纯地在两个选择器之间加上一个空格。

1
2
3
li em {
color: rebeccapurple;
}

该选择器将选择<li>内部的任何<em>元素（<li>的后代）。

在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式，为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

1
2
3
h1 + p {
font-size: 200%;
}

下面的示例包含了上面的两个规则。尝试添加规则使位于段落中的 span 变为红色。如果没问题，你将看到在第一段中的 span 会变为红色，但是第一个列表项中的 span 不会改变颜色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
li em {
color: rebeccapurple;
}

h1 + p {
font-size: 200%;
}
</style>
<body>
<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>

<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
<li>Item <span>one</span></li>
<li>Item two</li>
<li>Item <em>three</em></li>
</ul>
</body>

根据状态确定样式
根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位（针对） `` （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态。你可以使用 CSS 去定位或者说针对这些不同的状态进行修饰——下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色。

1
2
3
4
5
6
7
8
9
a:link {
color: pink;
}
a:visited {
color: green;
}
a:hover {
text-decoration: none;
}

改变元素的默认行为
1
2
3
li {
list-style-type: none;
}

CSS引入方式
外部样式表
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的 CSS 测试</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 CSS 示例</p>
</body>
</html>

CSS 样式表文件可能如下所示：

1
2
3
4
5
6
7
8
9
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}

p {
color: red;
}

内部样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的 CSS 测试</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个 CSS 示例</p>
</body>
</html>

内联样式
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>我的 CSS 测试</title>
</head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
Hello World!
</h1>
<p style="color:red;">这是我的第一个 CSS 示例</p>
</body>
</html>

CSS样式优先级
下面的样式表，有一个 p 选择器，将段落文本设置为蓝色。然而，也有一个类将所选元素的文本设置为红色。

1
2
3
4
5
6
7
.special {
color: red;
}

p {
color: blue;
}

假如在我们的 HTML 文档中，我们有一个带有 special 类的段落。这两条规则都适用，那么到底哪种选择器会占优势？我们的段落会变成蓝色还是红色？

1
<p class="special">我是什么颜色的？</p>

CSS 语言有一些规则来控制在发生冲突的情况下哪个选择器更强大。这些规则被称为层叠（cascade）和优先级（specificity）。在下面的代码块中，我们为 p 选择器定义了两条规则，但段落文本将是蓝色的。这是因为将段落文本设置为蓝色的声明在样式表的后面出现。后面的样式会替换样式表中较早出现的冲突样式。这就是层叠规则。

1
2
3
4
5
6
7
p {
color: red;
}

p {
color: blue;
}

然而，在我们前面的例子中，类选择器和元素选择器之间存在冲突，类选择器占了上风，使段落文本变成了红色。即使冲突的样式在样式表的后面出现，这怎么可能发生呢？一个类被认为是更具体的，因此它比元素选择器优先级更高，所以它取消了其他冲突的样式声明。

CSS组成
选择器
每个 CSS 规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。以下都是有效的选择器或组合选择器的示例。

1
2
3
4
5
6
7
8
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

属性和值
在最基本的层面上，CSS 由两个组成部分组成：

属性：人类可读的标识符，指示想要更改的样式特征。如 font-size、width、background-color。

值：每个指定的属性都有一个值，这个值表示如何对属性施加样式。

下面的图像突出显示单个属性和值。属性名为 color，值为 blue。

当一个属性与一个值配对时，这种配对被称为 CSS 声明。CSS 声明可以在 CSS 声明块中找到。在下面的例子中，高亮显示的是 CSS 声明块。

最后，CSS 声明块与选择器配对，以生成 CSS 规则集（或称 CSS 规则）。这个示例包含两个规则，一个用于 h1 选择器，另一个用于 p 选择器。h1 的规则被突出显示。

将 CSS 属性设置为特定值是定义文档布局和样式的主要方式。CSS 引擎会计算哪些声明适用于页面的每一个元素。

CSS 属性和值是不区分大小写的。一个属性——值对中的属性和值用冒号（:）分隔。

函数
虽然大多数值是相对简单的关键字或数值，但也有一些值是以函数的形式出现的。

calc() 函数
一个例子是 calc() 函数。这个函数允许在 CSS 中进行简单的计算：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.outer {
border: 5px solid black;
}

.box {
padding: 10px;
width: calc(90% - 30px);
background-color: rebeccapurple;
color: white;
}
</style>

<body>
<div class="outer"><div class="box">内部盒子的宽度为 90% - 30px。</div></div>
</body>

Transform 函数
另一个例子是 transform 的不同取值，如 rotate()。

1
2
3
4
5
6
7
8
9
10
<style>
.box {
margin: 30px; /*外边距*/
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: rotate(0.8turn);
}
</style>

@规则
CSS 的 @rules（读作“at-rules”）是一些特殊的规则，提供了关于 CSS 应该执行什么或如何表现的指令。有些@规则很简单，只有一个关键词和一个值。例如，@import 将一个样式表导入另一个 CSS 样式表：

1
@import "styles2.css";

你可能遇到的一个常见的@规则是 @media，它被用来创建媒体查询。媒体查询使用条件逻辑来应用 CSS 样式。

在下面的例子中，样式表为 <body> 元素定义了一个默认的粉红色背景。然而，如果浏览器的视口宽于 30em，接下来的媒体查询则定义了蓝色背景。

1
2
3
4
5
6
7
8
9
body {
background-color: pink;
}

@media (min-width: 30em) {
body {
background-color: blue;
}
}

简写属性
一些属性，如 font、background、padding、border 和 margin 等属性称为简写属性。它们允许在一行中设置多个属性值，从而节省时间并使代码更整洁。

1
2
3
4
5
/* 在像 padding 和 margin 这样的 4 值简写语法中，
数值的应用顺序是上、右、下、左（从顶部顺时针方向）。
也有其他的简写类型，例如 2 值简写，
它为顶部/底部设置 padding/margin，然后是左侧/右侧 */
padding: 10px 15px 15px 5px;

与这四行代码是等价的：

1
2
3
4
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

这一行代码：

1
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

与这五行代码是等价的：

1
2
3
4
5
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

注释
CSS 中的注释以 /* 开头，以 */ 结尾。在下面的代码块中，注释标记了不同代码节的开始。这有助于在代码库变大时进行导航。有了这种注释，在你的代码编辑器中搜索注释就成了一种有效找到代码部分的方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/* 处理基本元素样式 */
/* -------------------------------------------------------------------------------------------- */
body {
font:
1em/150% Helvetica,
Arial,
sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}

@media (min-width: 70em) {
/* 在更大的屏幕或窗口中提高全局的字体大小以提高可读性 */
body {
font-size: 130%;
}
}

h1 {
font-size: 1.5em;
}

/* 处理在 DOM 中嵌套的特殊元素 */
/* -------------------------------------------------------------------------------------------- */
div p,
#id:first-line {
background-color: red;
border-radius: 3px;
}

div p {
margin: 0;
padding: 1em;
}

div p + p {
padding-top: 0;
}

CSS运行步骤
当浏览器展示一个文件的时候，它必须兼顾文件的内容和文件的样式信息，下面我们会了解到它处理文件的标准的流程。需要知道的是，下面的步骤是浏览加载网页的简化版本，而且不同的浏览器在处理文件的时候会有不同的方式，但是下面的步骤基本都会出现。

浏览器载入 HTML 文件（比如从网络上获取）。

将 HTML 文件转化成一个 DOM（Document Object Model），DOM 是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM。

接下来，浏览器会拉取该 HTML 相关的大部分资源，比如嵌入到页面的图片、视频和 CSS 样式。JavaScript 则会稍后进行处理，简单起见，同时此节主讲 CSS，所以这里对如何加载 JavaScript 不会展开叙述。

浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型（比如 element、class、id 等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id 选择器等）应用在对应的 DOM 的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。

上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

网页展示在屏幕上（这一步被称为着色）。

结合下面的图示更形象：