1、CSS 定义
CSS(Cascading Style Sheet) 层叠样式表。
CSS 不是编程语言,亦不是标记语言,而是一门样式表语言。
CSS 是为网页添加样式的代码,借助它可以选择性地为 HTML 元素添加样式。
2、CSS 规则集详解
整个结构称为 规则集(ruleset),通常简称为“规则”。
选择器(Selector):HTML 元素的名称位于规则集的开始。它选择一个或多个需要添加样式的元素(在本例中为 p 元素)。为不同的元素添加样式需要使用相对应的选择器。
声明(Declaration):一个单独的规则,用来指定添加样式元素的属性(在本例中为 color: red)。
属性(Properties):改变 HTML 元素样式的途径(在本例中 color 就是
元素的属性)。
属性值(Property value):属性与冒号后添加属性值,从指定属性的众多预定选项中选择一个值(在本例中选择 red,除此之外还有多种颜色预选项)。
3、CSS 规则集语法
(1)每个规则集(除去选择器部分)都应该包含在成对的花括号“{ }”中。
(2)在每个规则集中要用分号“;”将各个声明分隔开。
(3)在每个声明中要用冒号“ :” 将属性与属性值分隔开。
4、CSS 多元素选择
选择多种类型的HTML 元素,并为它们添加一组相同的样式,不同的选择器之间使用逗号“,”进行分隔。
示例,使 p、li、h1 元素的颜色为红色:
p, li, h1 {
color: red;
}
5、CSS 不同类型的选择器
上述只是介绍了元素选择器,用来选择 HTML 文档中给定的元素。初次之外,CSS 还拥有以下多种神奇的选择器。
选择器名称 | 所选内容 | 示例 |
---|---|---|
元素 选择器(也称作 标签 或 类型 选择器) | 所有该类型的 HTML 元素 | p 选择 <p> 元素 |
ID 选择器 | 具有特定 ID 的元素(在一个 HTML 页面中, 每个 ID 只能对应一个元素,一个元素只能对应一个ID) | #my-id 选择 <p id=“my-id”> 元素或 <a id=“my-id”> 元素 |
类 选择器 | 具有特定类的元素(在一个 HTML 页面中,一个类可以对应多个元素) | .my-class 选择 <p class=“my-class”> 和 <a class=“my-class”> |
属性 选择器 | 拥有特定属性的元素 | img[src 选择 <img src=“myImage.png”> 元素而不是 <img> 元素 |
伪(Pseudo)类选择器 | 特定状态下的特定元素(比如鼠标指针悬停) | a:hover 仅在鼠标指针悬停在链接上时选择 <a> 元素 |
6、CSS 盒子模型
CSS 布局主要基于盒子模型。
(1)padding:即内边距,围绕着内容(在本例中为段落)的空间。
(2)border:即边框,紧挨着内边距的线(当然你一可以将它设置为护城河一样宽)。
(3)margin:即外边距,围绕着边框外部的空间。
注:MDN原文对margin的定义:the space around the outside of the border.
又因 The box model – What is the CSS box model?
以下为笔者个人结论:
margin 应该属于盒子(或者元素)之间的空间,不属于任何一个元素。
盒子(或者元素)所占页面空间计算:content + padding + margin。