1、什么是 CSS?
- CSS 指的是层叠样式表（Cascading Style Sheets）
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 CSS 文件
2、CSS 语法
CSS 规则集（rule-set）由选择器和声明块组成：
- 选择器指向需要设置样式的 HTML 元素
- 声明块包含一条或多条用分号分隔的声明
- 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔
- 多条 CSS 声明用分号分隔，声明块用花括号括起来
实例
# p 是 CSS 中的选择器，它指向要设置样式的 HTML 元素
# color 是属性，red 是属性值
# text-align 是属性，center 是属性值
p {
color: red;
text-align: center;
}
3、CSS 选择器
CSS 选择器用于查找或选取要设置样式的 HTML 元素。
可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
3.1、简单选择器
| 选择器 | 值 | 描述 |
|---|---|---|
.class | .test | 选取所有 class=“test” 的元素 |
#id | #test | 选取id="test"的那个元素 |
* | * | 选取所有元素 |
| element | div | 选取所有 div 元素 |
| element,element | div,p | 选取所有 div 元素和所有 p 元素 |
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
实例
# 所有 p 元素都居中对齐，并带有红色文本颜色
p {
text-align: center;
color: red;
}
CSS id选择器
- id 选择器使用 HTML 元素的 id 属性来选择特定元素。
- 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素。
- 要选择具有特定 id 的元素，需要一个井号（#），后跟该元素的 id。
# 选中 id="test" 的HTML 元素
#test {
text-align: center;
color: red;
}
CSS 类选择器
- 类选择器选择有特定 class 属性的 HTML 元素。
- 如需选择拥有特定 class 的元素，需要写一个句点（.）字符，后面跟类名。
# 选择带有 class="test" 的 HTML 元素
.test {
text-align: center;
color: red;
}
CSS 通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
# 选择所有 HTML 元素
* {
text-align: center;
color: blue;
}
CSS 分组选择器
- 分组选择器选取所有具有相同样式定义的 HTML 元素。
- 如需对选择器进行分组，需要用逗号分隔每个选择器
# 选择所有 h1 元素和 p 元素
h1, p {
text-align: center;
color: red;
}
3.2、组合选择器
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
- 后代选择器（空格）
- 子选择器（
>） - 相邻兄弟选择器（
+） - 通用兄弟选择器（
~）
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| element element | div p | 选择 div 元素内的所有 p 元素，后代元素 |
| element > element | div > p | 选择其父元素是 div 元素的所有 p 元素 |
| element+element | div + p | 选择所有紧随 div 元素之后的 p 元素 |
| element~element | p ~ ul | 选择前面有 p 元素的每个 ul 元素 |
后代选择器
后代选择器匹配术语指定元素后代的所有元素。
# 选择 div 元素内的所有 p 元素
div p {
background-color: yellow;
}
子选择器
子选择器匹配属于指定元素子元素的所有元素。
# 选择属于 div 元素子元素的所有 p 元素
div > p {
background-color: yellow;
}
相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
# 选择紧随 div 元素之后的所有 p 元素
div + p {
background-color: yellow;
}
通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
# 选择属于 div 元素的同级元素的所有 p 元素
div ~ p {
background-color: yellow;
}
3.3、伪类选择器
伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| :active | a:active | 选择活动的链接 |
| :checked | input:checked | 选择每个被选中的 input 元素 |
| :disabled | input:disabled | 选择每个被禁用的 input 元素 |
| :empty | p:empty | 选择没有子元素的每个 p 元素 |
| :enabled | input:enabled | 选择每个已启用的 input 元素 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 p 元素 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 p 元素的每个 p 元素 |
| :focus | input:focus | 选择获得焦点的 input 元素 |
| :hover | a:hover | 选择鼠标悬停其上的链接 |
| :in-range | input:in-range | 选择具有指定范围内的值的 input 元素 |
| :invalid | input:invalid | 选择具有无效值得 input 元素 |
| :lang(language) | p:lang(en) | 选择每个 lang 属性值以 “en” 开头得 p 元素 |
| :lang-child | p:last-child | 选择作为其父得最后一个子元素的每个 p 元素 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 p 元素的每个 p 元素 |
| :link | a:link | 选择所有未被访问的链接 |
| :not(selector) | not§ | 选择每个非 p 元素的元素 |
| :not-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 p 元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个 p 元素，从最后一个子元素计数 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个 p 元素的每个 p 元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 p 元素的每个 p 元素 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 p 元素的每个 p 元素 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 p 元素 |
| :optional | input:optional | 选择不带 required 属性的 input 元素 |
| :out-of-range | input:out-of-range | 选择值在指定范围外的 input元素 |
| :read-only | input:read-only | 选择指定了 readonly 属性的 input 元素 |
| :read-write | input:read-write | 选择不带 readonly 属性的 input 元素 |
| :required | input:required | 选择指定了 required 属性的 input 元素 |
| :root | root | 选择元素的根元素 |
| :target | #news:target | 选择当前活动的 #news 元素 |
| :valid | input:valid | 选择所有具有有效值的 input 元素 |
| :visited | a:visited | 选择所有已访问的链接 |
3.4、伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| ::after | p::after | 在每个 p 元素之后插入内容 |
| ::before | p::before | 在每个 p 元素之前插入内容 |
| ::first-letter | p::first-letter | 选择每个 p 元素的首字母 |
| ::first-line | p::first-line | 选择每个 p 元素的首行 |
| ::selection | p::selection | 选择用户选择的元素部分 |
3.5、属性选择器
属性选择器用于设置带有特定属性或属性值的 HTML 元素的样式。
| 选择器 | 示例 | 示例描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素 |
| [attribute=value] | [target=_blank] | 选择带有 target=“_blank” 属性的所有元素 |
| [attribute~=value] | [title~=flower] | 选择带有包含 flower 一词的 title 属性的所有元素 |
| `[attribute | =value]` | `[lang |
| [attribute^=value] | a[href^=“https”] | 选择其 href 属性值以 https 开头的每个 a 元素 |
| [attribute$=value] | a[href$=“.pdf”] | 选择其 href 属性值以 “.pdf” 结尾的每个 a 元素 |
| [arrtibute*=value] | a[href*=“www”] | 选择其 href 属性值包含字串 “www” 的每个 a 元素 |
3.6、选择器优先级
| 选择器 | 示例 | 权重值 |
|---|---|---|
| !important | background-color: #fff !important; | 正无穷 |
| 内联选择器 | <span style='color: #333;'>样式作用元素</span> | 1000 |
| ID选择器 | #id | 100 |
| 类选择器、属性选择器、伪类选择器 | .class | 10 |
| 标签选择器、伪元素选择器 | div、p | 1 |
| 通配符选择器 | * | 0 |
| 继承属性 | <div style='color:#333;'><span>样式作用元素</span></div> | -1 |
4、使用 CSS 方式
4.1、外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接样式表。link 标签在文档的头部。
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
4.2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 style 标签在文档头部定义内部样式表。
<head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
4.3、内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上使用一次时。
要使用内联样式，需要在相关的标签内使用样式 style 属性。style 属性可以包含任何 CSS 属性。
<h1 style="color:red">Hello World</h1>
5、CSS 注释
注释用于解释代码，以后在编辑代码时可能会有所帮助，浏览器会忽略注释。
位于 style 元素内的 CSS 注释，以 /*开始，以 */结束。
/* 单行注释 */
/*
多行注释
*/
6、CSS 颜色
颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。
6.1、颜色名
在 CSS 中，可以使用颜色名称来指定颜色。
- red：红色
- green：绿色
- blue：蓝色
6.2、RGB 颜色
在 CSS 中，可以使用下面的公共将颜色指定为 RGB 值：rbg(red, green, blue)
每个参数 (red, green, blue) 定义了 0 到 255 之间的颜色强度。
- 黑色：rgb(0, 0, 0)
- 白色：rgb(255, 255, 255)
- 红色：rgb(255, 0, 0)
- 绿色：rgb(0, 255, 0)
- 蓝色：rgb(0, 0, 255)
6.3、RGBA 颜色
RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了的不透明度。
RGBA 颜色值指定为：rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
示例：rgba(255, 0, 0, 0.5)
6.4、HEX 颜色
在 CSS 中，可以使用十六进制指定颜色。
- 黑色：#000000
- 白色：#ffffff
- 红色：#ff0000
- 绿色：#00ff00
- 蓝色：#0000ff
6.5、HSL 颜色
在 CSS 中，可以使用色相、饱和度和明度（HSL）来指定颜色，格式如下：hsl(hue, saturation, lightness)
色相（hue）是色伦上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。
饱和度（saturation）是一个百分比值，0% 表示灰色阴影，而 100% 是全色。
亮度（lightness）也是百分比，0% 是黑色，50% 是既不明也不暗，100%是白色
- 黑色：hsl(0, 100%, 0%)
- 白色：hsl(0, 100%, 100%)
- 红色：hsl(0, 100%, 50%)
- 绿色：hsl(120, 100%, 50%)
- 蓝色：hsl(240, 100%, 50%)
6.6、HSLA 颜色
HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。
HSLA 颜色值指定为：hsla(hue, saturation, lightness, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
示例：hsla(0, 100%, 50%, 0.5)
7、CSS 背景
CSS 背景属性用于定义元素的背景效果。CSS 背景属性包括：
- background-color：背景颜色
- background-image：背景图片
- background-repeat：设置是否以及如何重复背景图像。
- background-attachment：设置背景图像是与页面的其余部分一起滚动还是固定的。
- background-origin：规定背景图像的初始位置
- background-position：规定背景图像的初始位置
- background-size：规定背景图像的尺寸
- background-clip：规定背景的绘制区域
7.1、background-color
定义和用法
background-color 属性设置元素得背景颜色
元素背景的范围
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边距有透明部分，会透过这些透明部分显示出背景色。
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red） |
| hex_number | 规定颜色值为十六进制值得背景颜色（比如 #ff0000） |
| rgb_number | 规定颜色值为 rgb 代码得背景颜色（比如 rgb(255, 0, 0)） |
| transparent | 默认。背景颜色为透明 |
| inherit | 规定应该从父元素继承 background-color 属性得设置 |
<style type="text/css">
body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
h2 {
background-color: rgb(255, 0, 0);
}
p {
background-color: transparent;
}
</style>
7.2、background-position
background-position 属性设置背景图像起始位置。
这个属性设置背景原图像的位置，背景图像如果要重复，将从这一点开始。
需要把 background-attachment 属性设置为 fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。
| 值 | 描述 |
|---|---|
| top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right | 如果仅规定了一个关键词，那么第二个值将是 “center”。默认值：0% 0% |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。只设置一个值，另一个值是 50% |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素（0px 0px）或任何其他的 CSS 单位。只设置一个值，另一个值是 50% |
<style type="text/css">
body {
background-position: center;
}
</style>
7.3、background-size
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto" |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto” |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中 |
| contain | 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域 |
7.4、background-repeat
background-repeat 属性设置是否重复背景图像。
默认值，背景图像在水平和垂直方向上重复。
background-repeat 属性定义了图像的平铺模式
从原图像开始重复，原图像由 background-image 定义，并根据 backgound-position 的值放置。
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复 |
| repeat-x | 背景图像将在水平方向重复 |
| repeat-y | 背景图像将在垂直方向重复 |
| no-repeat | 背景图像仅显示一次 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置 |
7.5、background-origin
background-origin 属性规定background-position 属性相对于什么位置来定位。
如果背景图像的 background-attachment 属性为 fixed，则该属性没有效果。
| 值 | 描述 |
|---|---|
| padding-box | 背景图像相对于内边距框来定位 |
| border-box | 背景图像相对于边框盒来定位 |
| content-box | 背景图像相对于内容框来定位 |
7.6、background-clip
| 值 | 描述 |
|---|---|
| border-box | 背景被裁剪到边框盒 |
| padding-box | 背景被裁剪到内边距框 |
| content-box | 背景被裁剪到内容框 |
7.7、background-attachment
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置 |
7.8、background-image
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边距，但不包括外边距。
默认的，背景图像位于元素的左上角，并在水平和垂直方向上重复。
| 值 | 描述 |
|---|---|
| url | 指向图像的路径 |
| none | 默认值。不显示背景图像 |
| inherit | 规定应该从父元素继承 background-image 属性的设置 |
8、CSS 边框
8.1、CSS 边框样式
border-style 属性指定要显示的边框类型
- dotted：定义点线边框
- dashed：定义虚线边框
- solid：定义实现边框
- double：定义双边框
- groove：定义 3D 坡口边框
- ridge：定义 3D 脊线边框
- inset：定义 3D inset 边框
- outset：定义 3D outset 边框
- none：定义无边框
- hidden：定义隐藏边框
8.2、CSS 边框宽度
border-width 属性指定四个边框宽度。
可以将宽度设置为特定大小（以 px、pt、cm、em），也可以使用预定义值：thin、medium和thick
border-width 属性可以设置一到四个值（上、右、下、左）
p {
border-style: solid;
border-width: 5px; /* 上下左右边框为 5px */
}
p {
border-style: solid;
border-width: 5px 20px; /* 上下边框为 5px 左右边框为 20px */
}
p {
border-style: solid;
border-width: 5px 20px 10px; /* 上边框为 5px 左右边框为 20px 下边框为 10px */
}
p {
border-style: solid;
border-width: 5px 20px 10px 8px; /* 上边框为 5px 右边框为 20px 下边框为 10px 左边框为 8px */
}
8.3、CSS 边框颜色
border-color 属性用于设置四个边框的颜色
可以通过以下方式设置颜色：
- name：指定颜色名，比如 “red”
- HEX：指定十六进制值，比如 “#ff0000”
- RGB：指定 RGB 值，比如：“rgb(255, 0, 0)”
- HSL：指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- transparent
8.4、CSS 边框简写属性
为了缩减代码，也可以在一个属性中指定所有单独的边框属性。
border 属性是以下各个边框属性的简写属性。
- border-width
- border-style（必须）
- border-color
示例：
p {
border: 5px solid red;
}
8.5、CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，在一条声明中设置所有边框属性。border: 1px solid red; |
| border-color | 简写属性，设置四条边框的颜色。border-color: red; |
| border-radius | 简写属性，可设置圆角的所有四个 border-*-radius 属性。border-radius: 4px; |
| border-style | 简写属性，设置四条边框的样式。border-style: solid; |
| border-width | 简写属性，设置四条边框的宽度。border-width: 2px; |
| border-bottom | 简写属性，在一条声明中设置所有下边属性。border-bottom: 1px solid red; |
| border-bottom-color | 设置下边框的颜色。border-bottom-color: #ff0000; |
| border-bottom-style | 设置下边框样式。border-bottom-style: solid; |
| border-bottom-width | 设置下边框的宽度。border-bottom-width: 2px; |
| border-left | 简写属性，在一条声明中设置所有左边属性。border-left: 1px solid red; |
| border-left-color | 设置左边框的颜色。border-left-color: #ff0000; |
| border-left-style | 设置左边框样式。border-left-style: solid; |
| border-left-width | 设置左边框的宽度。border-left-width: 2px; |
| border-right | 简写属性，在一条声明中设置所有右边属性。border-right: 1px solid red; |
| border-right-color | 设置右边框的颜色。border-right-color: #ff0000; |
| border-right-style | 设置右边框样式。border-right-style: solid; |
| border-right-width | 设置右边框的宽度。border-right-width: 2px; |
| border-top | 简写属性，在一条声明中设置所有上边属性。border-top: 1px solid red; |
| border-top-color | 设置上边框的颜色。border-top-color: #ff0000; |
| border-top-style | 设置上边框样式。border-top-style: solid; |
| border-top-width | 设置上边框的宽度。border-top-width: 2px; |
9、CSS 边距
9.1、CSS 外边距
CSS margin属性用于在任何定义的边框之外，为元素周围创建空间。
CSS 拥有用于为元素的每一次侧指定外边距的属性：
- margin-top：上
- margin-right：右
- margin-bottom：下
- margin-left：左
所有外边距属性都可以设置以下值：
- auto - 浏览器来计算外边距
- length - 以 px、pt、cm 等单位指定外边距
- % - 指定以包含元素宽度的百分比计的外边距
- inherit - 指定应从父元素继承外边距
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
为了缩减代码，可以在一个属性中指定所有外边距属性。
margin 属性是以下各外边距属性的简写属性。
p {
margin: 5px; /* 上下左右外边距为 5px */
}
p {
margin: 5px 20px; /* 上下外边距为 5px 左右外边距为 20px */
}
p {
margin: 5px 20px 10px; /* 上外边距为 5px 左右外边距为 20px 下外边距为 10px */
}
p {
margin: 5px 20px 10px 8px; /* 上外边距为 5px 右外边距为 20px 下外边距为 10px 左外边距为 8px */
}
9.2、CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
合并场景：
- 当一个元素出现在另一个元素上面时，第一个元素的下外边距于第二个元素的上外边距会发生合并。
- 当一个元素包含在另一个元素中时（假设没有内边距或边距把外边距分隔开），它们的上和/或下边距也会发生合并。
9.3、CSS 内边距
CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。
CSS 拥有用于为元素的每一侧指定内边距的属性。
- padding-top：上
- padding-right：右
- padding-bottom：下
- padding-left：左
所有内边距属性都可以设置以下值：
- length - 以 px、pt、cm 等单位指定内边距
- % - 指定以包含元素宽度的百分比计的内边距
- inherit - 指定应从父元素继承内边距
div {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}
为了缩减代码，可以在一个属性中指定所有内边距属性。
padding 属性是以下各内边距属性的简写属性。
div {
padding: 5px; /* 上下左右内边距为 5px */
}
div {
padding: 5px 20px; /* 上下内边距为 5px 左右内边距为 20px */
}
div {
padding: 5px 20px 10px; /* 上内边距为 5px 左右内边距为 20px 下内边距为 10px */
}
div {
padding: 5px 20px 10px 8px; /* 上内边距为 5px 右内边距为 20px 下内边距为 10px 左内边距为 8px */
}
10、CSS 高度/宽度
height 和 width 属性用于设置元素的高度和宽度。
height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。
height 和 width 属性可以设置如下值：
- auto - 默认。浏览器计算高度和宽度。
- length - 以 px、cm 等定义高度/宽度。
- % - 以包含块的百分比定义高度/宽度。
- initial - 将高度/宽度设置为默认值。
- inherit - 从其父值继承高度/宽度。
| 属性 | 描述 |
|---|---|
| width | 设置元素的宽度 |
| height | 设置元素的高度 |
| max-width | 设置元素的最大宽度 |
| max-height | 设置元素的最大高度 |
| min-width | 设置元素的最小宽度 |
| min-height | 设置元素的最小高度 |
11、CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中，谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质是一个包围每个 HTML 元素的框。它包括：外边距、边距、内边距以及实际的内容。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现乐元素的背景。内边距的边距是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
- 内容：框的内容，其中显示文本和图像
- 内边距：清除内容周围的区域。内边距是透明的
- 边框：围绕内边距和内容的边框
- 外边距：清除边界外的区域。外边距是透明的
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现乐元素的背景。内边距的边缘时边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。
* {
margin: 0;
padding: 0;
}
使用 CSS 设置元素的 width 和 heigt 属性时，只需要设置内容区域的宽度和高度。要计算元素的完整大小，还必须把内边距、边框和外边距加起来。
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 2px;
}
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边距 + 右边距 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边距 + 下边距 + 上外边距 + 下外边距
12、CSS 轮廓
轮廓是在元素周围绘制的一条线，再边框之外，以凸显元素。
CSS 拥有如下轮廓属性：
- outline-style：轮廓样式
- outline-color：轮廓颜色
- outline-width：轮廓宽度
- outline-offset：轮廓偏移
- outline：简写属性
轮廓与边框不同！不同之处在于；轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。
outline-style 属性指定轮廓的样式，并可设置如下值：
- dotted：定义点状的轮廓
- dashed：定义虚线的轮廓
- solid：定义实线的轮廓
- double：定义双线的轮廓
- groove：定义 3D 凹槽轮廓
- ridge：定义 3D 凸槽轮廓
- inset：定义 3D 凹边轮廓
- outset：定义 3D 凸边轮廓
- none：定义无轮廓
- hidden：定义隐藏的轮廓
13、CSS 文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：
- 颜色名 - 比如 “red”
- 十六进制值 - 比如 “#ff0000”
- RGB 值 - 比如 “rgb(255, 0, 0)”
body {
color: blue;
}
文本对齐
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。
<!-- 居中对齐 -->
h1 {
text-align: center;
}
<!-- 左对齐 -->
h2 {
text-align: left;
}
<!-- 右对齐 -->
h3 {
text-align: right;
}
<!-- 等宽 -->
h4 {
text-align: text-align;
}
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向。
p {
direction: rtl;
unicode-bidi: bidi-override;
}
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线
<!-- 无装饰 -->
a {
text-decoration: none;
}
<!-- 上划线 -->
h1 {
text-decoration: overline;
}
<!-- 删除线 -->
h2 {
text-decoration: line-through;
}
<!-- 下划线 -->
h3 {
text-decoration: underline;
}
文本转换
text-transform 属性用于指定文本中的大写和小写字母。
它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。
<!-- 所有内容转为大写 -->
p.unppercase {
text-transform: uppercase;
}
<!-- 所有内容转为小写 -->
p.lowercase {
text-transform: lowercase;
}
<!-- 首字母大写 -->
p.capitalize {
text-transform: capitalize;
}
文字缩进
text-indent 属性用于指定文本第一行的缩进。
p {
text-indent: 50px;
}
字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
h1 {
letter-spacing: 3px;
}
行高
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
字间距
word-spacing 属性用于指定文本中单词之间的间距。
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
空白
white-space 属性指定元素内部空白的处理方式。
p {
white-space: nowrap;
}
文本阴影
text-shadow 属性为文本添加阴影。
最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）
<!-- 水平 2px -->
<!-- 垂直 2px -->
<!-- 模糊 5px -->
<!-- 颜色 红色 -->
h1 {
text-shadow: 2px 2px 5px red;
}
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 指定文本的方向/书写方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 指定文本的水平对齐方式 |
| text-decoration | 指定添加道文本的装饰效果 |
| text-indent | 指定文本块中首行的缩进 |
| text-shadow | 指定添加到文本的阴影效果 |
| text-transform | 控制文本的大小写 |
| text-overflow | 指定应如何向用户示意未显示的溢出内容 |
| unicode-bidi | 与 direction 属性一起使用，设置或返回是否应重写文本支持同一文档中的多种语言 |
| vertical-align | 指定文本的垂直对齐方式 |
| white-space | 指定如何处理元素内的空白 |
| word-spacing | 设置单词间距 |
14、CSS 字体
通用字体族
- 衬线字体（Serif）：在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体（Sans-serif）：字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）：这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）：模仿了人类的笔记。
- 幻想字体（Fantasy）：是装饰性/俏皮的字体。
font-family
font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。从需要的字体开始，以通用系列结束。如果没有其他可用字体，则让浏览器选择通用系列中的相似字体，字体名称用逗号分隔。
如果字体名称不止一个单词，则必须用引号引起来，例如：“Times New Roman”。
p {
font-family: "Times New Roman", Times, serif;
}
字体样式
font-style 属性主要用于指定斜体文本。
此属性可设置三个值：
- normal：文字正常显示
- italic：文本以斜体显示
- oblique：文本为“倾斜”
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
字体粗细
font-weight 属性指定字体的粗细。
p.normal {
font-weight: normal;
}
p.bold {
font-weight: bold;
}
字体变体
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。
在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
所有 CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。在一条声明中设置所有字体属性 |
| font-family | 规定文本的字体系列 |
| font-size | 规定文本的字体大小 |
| font-style | 规定文本的字体样式 |
| font-variant | 规定是否以小型大写字母的字体显示文本 |
| font-weight | 规定字体的粗细 |
扫一扫
3185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
