CSS-属性

📚详见 W3scholl，本篇只做快速思维索引。

CSS 背景-background

用于定义元素的背景效果。

• background-color
• background-image
• background-position
• background-repeat
• background-attachment

background-color

background-color 属性指定元素的背景色。

h1 {
  background-color: lightblue;
}

background-image

background-image 属性指定元素背景的图像。

p,h1 {
  background-image: url("paper.gif");
}

background-position

background-position 属性用于指定背景图像的位置（top right bottom left）。

body {
  background-image: url("tree.png");
  background-position: right top;
}

把背景图片放在右上角

background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。但有些时候，看起来很怪，通过 background-repeat: repeat-x; 指定图像仅在水平方向重复。

• repeat-x: 仅在水平方向重复
• repeat-y: 仅在垂直重复图像
• no-repeat: 只显示一次背景图像

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）

• fixed: 固定
• scroll: 滚动

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

🌟简写

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

⚠️注： 在使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

CSS 边框-border

border 属性允许您指定元素边框的样式、宽度、颜色

• border-style
• border-width
• border-color
• border-radius

border-style

border-style 属性指定 四个边框 的 样式。

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框、左边框）。允许以下值：

• dotted - 定义点线边框
• dashed - 定义虚线边框
• solid - 定义实线边框
• double - 定义双边框
• none - 定义无边框
• hidden - 定义隐藏边框

p {
  border-style: solid; /* 四个边都是 solid */
}

p {
  border-style: dotted solid; /* 上、下边框为 dotted，右、左边框为 solid */
}

p {
  border-style: dotted dashed solid double; /上边框为 dotted，右边框为 dashed，下边框为 solid，左边框为 double
}

⚠️注： 除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！

border-width

border-width 属性指定 四个边框 的 宽度。

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上、下边框 5px，左、右边框 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px 10px; /* 上边框为 20px，左、右边框为 5px，下边框为 10px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

border-color

border-color 属性指定 四个边框 的 颜色。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

border-radius

border-radius 属性指定 四个圆角边框。

p.round1 {
  border-style: solid;
  border-radius: 5px;
}
p.round2 {
  border-style: solid;
  border-radius: 8px 16px;
}

单独的边

在 CSS 中，还有一些属性可用于指定 每个边框（顶部、右侧、底部和左侧）：

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

🌟简写

p {
  border: 5px solid red; /* border: red solid 5px; 效果一样，没有顺序要求 */
}

border 属性是以下各个边框属性的简写属性，属性没有顺序要求：

• border-width
• border-style（必需）
• border-color

也可以只为一个边指定所有单个边框属性：

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

上例指定左边框属性。

CSS 外边距-margin

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

单独的边

CSS 拥有用于为元素的每一侧指定外边距的属性：

• margin-top
• margin-right
• margin-bottom
• margin-left

所有外边距属性都可以设置以下值：

• auto：浏览器来计算外边距
• length：以 px、pt、cm 等单位指定外边距
• %：指定以包含元素宽度的百分比计的外边距
• inherit：指定应从父元素继承外边距

⚠️注： 允许负值。

示例：

p {
  margin-top: 100px;
  margin-right: 150px;
  margin-bottom: 100px;
  margin-left: 80px;
}

📅 auto
margin 属性设置为 auto，会使元素在其容器中 水平居中。该元素将占据指定的宽度，并且剩余空间将在左右边界之间平均分配。

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

📅 inherit

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

<p class=“ex1”>元素的左外边距将 继承 自父元素（<div>）

🌟简写

p {
  margin: 25px 50px 75px 100px;
}

margin 属性是以下各外边距属性的简写属性：

• margin-top
• margin-right
• margin-bottom
• margin-left

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的 较大者。

CSS 内边距-padding

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

单独的边

CSS 拥有用于为元素的每一侧指定内边距的属性：

• padding-top
• padding-right
• padding-bottom
• padding-left

所有内边距属性都可以设置以下值：

• length：以 px、pt、cm 等单位指定内边距
• %：指定以包含元素宽度的百分比计的内边距
• inherit：指定应从父元素继承内边距

⚠️注： 不允许负值。

示例：

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

🌟简写

div {
  padding: 25px 50px 75px 100px;
}

padding 属性是以下各内边距属性的简写属性：

• padding-top
• padding-right
• padding-bottom
• padding-left

内边距和元素宽度

CSS width 属性指定元素 内容区域的宽度。如果元素拥有指定的宽度，则添加到该元素的内边距会添加到元素的总宽度中。

div {
  width: 300px;
  padding: 25px;
}

<div> 元素的宽度为 300px。但是，<div> 元素的 实际宽度 将是 350px = 300px + 左内边距 25px + 右内边距 25px。

若要将宽度保持为 300px，那么您可以使用 box-sizing 属性。这将使元素保持其宽度。如果增加内边距，则可用的内容空间会减少。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

📅 示例：

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}

div.ex3 {
  width: 300px;
  padding: 25px;
  background-color: green;
  box-sizing: border-box;
}
</style>
</head>

<body>
<h1>内边距和元素宽度 - 设置  box-sizing</h1>

<div class="ex1">这个 div 是 300 像素宽。</div>
<div class="ex2">这个 div 是 350 像素宽，即使在 CSS 中它被定义为 300 像素。</div>
<div class="ex3">div 的宽度保持在 300 像素，尽管总的左右内边距为 50 像素，因为设置了 box-sizing: border-box 属性。</div>
</body>

</html>

💦 <div class=“ex2”> 内容占用宽度 为300px；元素宽度 为350px = 300px + 左内边距 25px + 右内边距 25px。

💦 <div class=“ex3”> 内容占用宽度 为250px = 300px - 左内边距 25px - 右内边距 25px。元素宽度 为300px。

CSS 高度-height、宽度-width

height 和 width 属性用于设置 元素内容 的高度和宽度，不包括内边距、边框、外边距！

height 和 width 属性可设置如下值：

• auto：默认。浏览器计算高度和宽度。会根据页面大小自适应。
• length：以 px、cm 等定义固定高度/宽度。
• %：以包含块的百分比定义高度/宽度。会 动态 根据页面的高度/宽度 计算 元素高度/宽度。
• initial：将高度/宽度设置为默认值。
• inherit：从其父值继承高度/宽度。

🌟max-width

max-width 属性用于设置元素的最大宽度。

可以用长度值（例如 px、cm 等）或包含块的百分比（％）来指定 max-width（最大宽度），也可以将其设置为 none（默认值。意味着没有最大宽度）。

📌 width和max-width的区别：

• 如果设置width: 500px;，当浏览器窗口小于 500px 时，浏览器会将水平滚动条添加到页面。
• 如果设置max-width: 500px;，当浏览器窗口小于 500px 时，宽度会随窗口宽度自适应变化，不会出现水平滚动条。

在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

⚠️注：max-width 属性的值将覆盖 width（宽度）。

CSS 盒子模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语盒模型或框模型。

CSS 盒子模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距、实际的内容。下图展示了框模型：

内边距、边框、外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是 内容区域 的宽度和高度。增加内边距、边框、外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

若需要元素框的总尺寸不变，使用 box-sizing: border-box; ，可以让元素保持其尺寸。如果增加内边距、边框，则内容区域会减少。

⚠️提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS 轮廓-outline

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

⚠️注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

outline-style

outline-style 属性指定轮廓的 样式，并可设置如下值：

• dotted：定义点状的轮廓。
• dashed：定义虚线的轮廓。
• solid：定义实线的轮廓。
• double：定义双线的轮廓。
• none：定义无轮廓。
• hidden：定义隐藏的轮廓。

p.solid {
	outline-style: solid;
}

枚举值和border-style一样。

outline-width

outline-width 属性指定轮廓的 宽度，并可设置如下值之一：

• thin（通常为 1px）
• medium（通常为 3px）
• thick （通常为 5px）
• 特定尺寸（以 px、pt、cm、em 计）

outline-color

outline-color 属性用于设置轮廓的 颜色。

p {
  outline-style: solid;
  outline-width: 4px;
  outline-color: red;
}

🌟简写

p {
   outline: 5px solid yellow;
}

outline 属性是用于设置以下各个轮廓属性的简写属性，值的顺序无关紧要：

• outline-width
• outline-style（必需）
• outline-color

outline-offset

outline-offset 属性在元素的 轮廓与边框之间 添加空间。元素及其轮廓之间的空间是透明的。

p {
  margin: 30px;
  background:yellow;
  border: 2px solid black;
  outline: 5px solid red;
  outline-offset: 15px;
}

outline显示在元素的周边，本例显示在margin的区域内。

CSS 文本

color

color 属性用于设置文本的 颜色。颜色由以下值指定：

• 颜色名：比如 “red”
• 十六进制值：比如 “#ff0000”
• RGB 值：比如 “rgb(255,0,0)”

h1 {
  background-color: black;
  color: white;
}

黑底白色

text-align

text-align 属性用于设置文本的 水平对齐 方式。

• center：居中对齐
• left：左对齐
• right：右对齐
• justify：等宽对齐。将拉伸每一行，以使 每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

h1 {
  text-align: center;
}
h2 {
  text-align: left;
}
h3 {
  text-align: right;
}
div {
  text-align: justify;
}

vertical-align

vertical-align 属性设置元素的 垂直对齐 方式。

• top：上对齐
• middle：居中对齐
• bottom：下对齐

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

文本方向

direction 和 unicode-bidi 属性可用于更改元素的 文本方向

direction属性有三个值：

• ltr：默认值，文本流从左到右
• rtl：文本流从右到左
• inherit：继承父元素的设置

unicode-bidi属性也有三个值：

• normal：原来是什么方向就使用什么方向
• embed：作用于inline元素，direction属性的值指定嵌入层,在对象内部进行隐式重排序
• bidi-override：严格按照direction属性的值重排序。忽略隐式双向运算规则

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

text-decoration

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.uppercase {
  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;
}

📅 line-height 属性用于指定 行高。

p.small {
  line-height: 0.8;
}

📅 word-spacing 属性用于指定文本中 单词间距。

h1 {
  word-spacing: 10px;
}

📅 white-space 属性指定元素内部空白的处理方式。

p {
  white-space: nowrap;
}

文本阴影

text-shadow 属性为文本添加 阴影。

h1 {
  text-shadow: 2px 2px red;
}

📅 向阴影添加模糊效果（5px）：

h1 {
  text-shadow: 2px 2px 5px red;
}

CSS 字体-font

选择正确的字体会对网站的用户体验产生巨大影响。

font-family

font-family 属性规定文本的 字体族。📖 详解 字体族

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。字体名称应以逗号 , 分隔。

.p1 {
  font-family: "Times New Roman", Times, serif;
}

font-style

font-style 属性指定 斜体字体。

此属性可设置三个值：

• normal：字体正常显示
• italic：字体以斜体显示
• oblique：字体为倾斜（倾斜与斜体非常相似，但支持较少）

font-weight

font-weight 属性指定字体的 粗细。

• normal：字体正常显示
• lighter：字体瘦显示
• bold：字体为加粗显示
• 数字：指定字体的磅值

p.normal {
  font-style: normal;
  font-weight: normal;
}

p.italic-light {
  font-style: italic;
  font-weight: lighter;
}

p.oblique-bold {
  font-style: oblique;
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}

font-variant

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

font-size

font-size 属性设置字体的 大小。

• 绝对大小值：xx-small、x-small、small、medium、large、x-large、xx-large。
• 相对大小值：larger、smaller，设置为比父元素更小、更大的尺寸。
• 长度值：px、em，浏览器中的默认文本大小为 16px。1em 为 16px。
• 百分比：设置为基于父元素的百分比值。

body {
  font-size: medium;
}
h1 {
  font-size: 40px;
}
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}
p {
  font-size: 90%;
}

📌 简写

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

font 属性是以下属性的简写属性：

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

⚠️注意： font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

CSS 图标

将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>

CSS 链接

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

链接状态

此外，可以根据链接处于什么状态来设置链接的不同样式。

• a:link：正常的，未访问的链接
• a:visited：用户访问过的链接
• a:hover：用户将鼠标悬停在链接上时
• a:active：链接被点击时

文本装饰

text-decoration 属性主要用于从链接中 删除下划线

a:link {
  color: red;
  text-decoration: none;
  background-color: yellow;
}

a:visited {
  color: green;
  text-decoration: none;
  background-color: cyan;
}

a:hover {
  color: hotpink;
  text-decoration: underline;
  background-color: lightgreen;
}

a:active {
  color: blue;
  text-decoration: underline;
  background-color: hotpink;
}

链接按钮

组合了多个 CSS 属性，将链接显示为框/按钮

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

CSS 列表

列表分为无序列表<ul>、有序列表<ol>，CSS 列表属性可以设置不同的列表项目标记。

list-style-type

list-style-type 属性指定列表项标记的类型。

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

list-style-image

list-style-image 属性将图像指定为列表项标记。

list-style-position

list-style-position 属性指定列表项标记（项目符号）的位置。

📌 简写

ul {
  list-style: square inside url("sqpurple.gif");
}

在使用简写属性时，属性值的顺序为：

• list-style-type：（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
• list-style-position：（指定列表项标记应显示在内容流的内部还是外部）
• list-style-image：（将图像指定为列表项标记）