跳转至

CSS

什么是CSS

和 HTML 类似，CSS 不是编程语言。它也不是标记语言，而是一门样式表语言。CSS 用于选择性地为 HTML 元素添加样式。例如，下列的 CSS 代码选择了所有的段落文本，并将它们设置为红色。

p {
  color: red;
}

以上代码可以放进style.css，然后在html文件的<head></head>内部可以添加css样式文件的引用：

<link href="styles/style.css" rel="stylesheet" />

CSS 规则集解释

上述的整个结构称为规则集，每个部分的名称：

  • 选择器(selector)

HTML 元素名位于规则集的开头，定义了需要添加样式的元素（本例中就是<p>元素），要给不同的元素添加样式，只需要更改选择器

  • 声明(Declaration)

是单独的一条规则color: red;，用来指定为元素的哪个属性添加样式

  • 属性(Properties)

是为HTML元素添加样式的方式，

  • 属性值(Property value)

位于属性的右边，冒号后面即属性值，从指定属性的可选值中选择一个值

注意其他重要的语法

  • 除了选择器部分，每个规则集都应该包含在{}里
  • 在每个声明里要用冒号:将数学与属性值分隔开
  • 在每个规则集里要用分号;将每个声明分隔开

如果要在规则集中同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

选择多个元素

也可以选择多个元素并为它们添加单个规则集，多个选择器之间用逗号分隔。例如：

p,
li,
h1 {
  color: red;
}

不同类型的选择器

alt text

  • 类选择器

前面有个.，代表要实例化的类名

  • 伪类触发器

带有:，可以理解为事件触发器

字体和文本

CSS: 一切皆盒子

页面上大部分HTML元素都可以被看做若干堆叠的盒子

盒子模型：

  • padding(内边距)：指内容周围的空间，在下面的例子中，他是段落文本周围的空间
  • border(边框)：紧接着内边距的实线
  • margin(外边距)：围绕元素边框外侧的空间