CSS学习记录01

什么是CSS？

CSS指的是层叠样式表（Cascading Style Sheets), CSS描述了如何在屏幕、纸张或其他媒体上显示HTML元素， CSS可以同时控制多张网页的布局，因此节省了大量的工作。外部样式表存储在CSS文件中。

*：也称为级联样式表。

CSS语法

CSS规则集（rule-set)由选择器和声明块组成：

选择器指向您需要设置样式的HTML元素，声明块包含一条或多条用分号分隔的声明。每条声明都包含一个CSS属性名称和一个值，以冒号分隔。多条CSS声明用分号分隔，声明块用花括号括起来。

举例：

css">p {color: red;text-align: center;
}

p 是CSS中的选择器（指向要设置样式的HTML元素：<p>), color是属性，red是属性值， text-align是属性，center是属性值。

CSS选择器

css选择器用于”查找“（或选取）要设置样式的HTML元素。

大致可以将CSS选择器分为5类：

简单选择器：（根据名称、id、类来选取元素）
组合器选择器：（根据它们之间的特定关系来选取元素）
伪类选择器：（根据特定状态选取元素）
伪元素选择器：（选取元素的一部分并设置其样式)
属性选择器：（根据属性或属性值来选取元素）

目前这里只讲解最基本的CSS选择器。

CSS元素选择器

元素选择器根据元素名称来选择HTML元素。

如下列代码所示，页面上的所有<p>元素都将居中对齐，并带有红色文本颜色：

css">p {text-align: center;color: red;
}

CSS id选择器

id选择器使用 HTML元素的id属性来选择特定元素。元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素！要选择具有特定id的元素，需要写一个井号（#），后跟该元素的id。

如下列代码所示，这条CSS规则将应用于 id = "text"的HTML元素：

css">#text {text-align: center;color: red;
}

注意：id名称不能以数字开头。

CSS类选择器

类选择器选择有特定class属性的HTML元素。如需选择拥有特定class的元素，需要写一个句点(.)字符，后面跟类名。

如下列代码所示，所有带有class="center"的HTML元素将为红色且居中对齐：

css">.center {text-align: center;color: red;
}

还可以指定只有特定的HTML元素会受类的影响。

如下列代码所示，只有具有class="center"的<p>元素会居中对齐：

css">p.center {text-align: center;color: red;
}

HTML元素也可以引用多个类。

如下列代码所示，<p>元素将根据class = "center" 和 class = "large" 进行样式设置：

<p class="center large">这个段落引用两个类。</p>

注意：类名不能以数字开头！

CSS通用选择器

通用选择器（*）选择页面上的所有的HTML元素。

下面的CSS规则会影响页面上的每个HTML元素：

css">* {text-align: center;color: blue;
}

css分组选择器

分组选择器选取所有具有相同样式定义的HTML元素。

例如：下列的CSS代码（h1、h2和p元素具有相同的样式定义）：

css">h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}

这样我们可以对选择器进行分组，来最大程度地缩减代码。如需对选择器进行分组，请用逗号来分隔每个选择器。

在这个例子中，我们对上述代码中的选择器进行分组：

css">h1, h2, p {text-align: center;color: red;
}

CSS使用

当浏览器读到样式表时，它将根据样式表中的信息来格式化HTML文档。

三种使用CSS的方法

有三种插入样式表的方法：

外部CSS，内部CSS，行内CSS

外部CSS

通过使用外部样式表，您只需要修改一个文件即可改变整个网站的外观！每张HTML页面必须在head部分的<link>元素内包含对外部样式表文件的引用。

举例：

外部样式在HTML页面<head>部分内的<link>元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

外部样式表可以在任何文本编辑器中编写，并且必须以.css扩展名保存。外部.css文件不应包含任何HTML标签。

例如一个外部样式表 mystyle.css 是这样的：

css">body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}

注意：请勿在属性值和单位之间添加空格。

内部CSS

如果一张HTML页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在head部分的<style>元素中进行定义。

举例：

内部样式在HTML页面的<head>部分内的<style>元素中进行定义：

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
} 
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

行内CSS

行内样式（也称内联样式）可用于为单个元素应用的唯一的样式。如需使用行内样式，请将style属性添加到相关元素。style属性可包含任何CSS属性。

举例：

行内样式在相关元素的”style"属性中定义：

<!DOCTYPE html>
<html>
<body><h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p></body>
</html>

提示：行内样式失去了样式表的许多优点。请谨慎使用此方法。

多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

假设某个外部样式表为<h1>元素设定了如下样式：

css">h1 {color: navy;
}

然后，假设某个内部样式表也为<h1>元素设定了如下样式：

css">h1 {color: orange;    
}

如果内部样式是在链接到外部样式表之后定义的，则<h1>元素将是橙色：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {color: orange;
}
</style>
</head>

不过，如果在链接到外部样式表之前定义了内部样式，则<h1>元素将是深蓝色：

head>
<style>
h1 {color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

层叠顺序

如果为某个HTML元素指定了多个样式时，会使用哪个样式呢？

页面中的所有样式将会按照一定规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

1.行内样式（在HTML元素中）

2.外部和内部样式表（在head部分）

3.浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

CSS注释

注释用于解释代码，用来说明代码的作用。浏览器在解析时会忽视注释。

位于<style>元素内的CSS注释，以/*开始，以*/结束：

举例：

css">/* 这是一条单行注释 */
p {color: red;
}

您可以在代码中的任何位置添加注释，注释能够横跨多行：

css">/* 这是
一条多行的
注释 */ p {color: red;
}