1. 选择器

.intro: 选择所有class="intro"的元素.#firstname: 选择所有id="firstname"的元素.p: 选择所有<p>元素.div,p: 选择所有<div>元素和<p>元素.div p: 选择<div>元素内的所有<p>元素.a[target]：选择带有 target 属性的 a 元素.a[target="_blank"]：选择 target 属性值为 _blank 的 a 元素.

如，

.intro {
  background-color:yellow;
} 

a[target] {
  background-color: yellow;
}

2. 颜色

rgb(red, green, blue)

每个参数的取值范围均为 [0, 255].

p {
    background-color: rgb(238, 130, 238);
}

rgba(red, green, blue, alpha)

与 rgb 相比，多个了透明度. alpha 取值范围 [0.0, 1.0]. 0.0 是完全透明，而 1.0 是完全不透明.

p {
    background-color: rgba(255, 99, 71, 0.4);
}

3. 背景

背景颜色

div.second {
  background-color: rgba(0, 128, 0, 0.3);
}

背景图片

body {
  background-image: url("paper.gif");
}

背景重复

仅在水平方向重复背景图像：background-repeat: repeat-x;仅在垂直方向重复背景图像：background-repeat: repeat-y;不要重复背景图像：background-repeat: no-repeat;.

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

背景位置

指定背景图像的位置.

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;    /* 右上方 */
}

背景附着

指定背景图像是否应该随着页面的其余部分一起滚动.

固定：background-attachment: fixed;滚动：background-attachment: scroll;

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

简写

body {
  background: rgb(255, 255, 255) url("tree.png") no-repeat right top;
}

属性顺序为：

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可.

4. 边框

边框类型

border-style 属性指定要显示的边框类型. 具体见 https://www.w3school.com.cn/c...

p.dashed {
  border-style: dashed;
}
p.solid {
  border-style: solid;
}
p.double {
  border-style: double;
}

也可以分别指定四条边的类型：

p.four {
  border-style: dotted solid double dashed;    /* 上、右、下、左 */
}

边框宽度

p.one {
  border-style: solid;
  border-width: 5px;
}

也可以分别指定四条边的宽度：

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

边框颜色

p.one {
  border-style: solid;
  border-color: rgb(90, 60, 10);
}

也可以分别指定四条边的颜色：

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

圆角边框

p.round3 {
  border-style: solid;
  border-radius: 12px;
}

简写

p {
  border: 5px solid red;
}

属性顺序：

border-widthborder-style（必需）border-color

5. 边距

外边距

div {
  margin-top: 100px;
  margin-bottom: auto;
  margin-right: 20%;
  margin-left: 20%;
  background-color: lightblue;
}

也可以通过 margin 属性来设置上述四个属性，顺序为：上、右、下、左.

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

如果只有3个值，则对应上、右、下，此时上下同距.如果只有2个值，则对应上、右，此时上下同距、左右同距.如果只有1个值，则上下左右同距.

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

内边距

div {
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 20%;
  padding-bottom: 50px;
  padding-left: 20%;
}

也可以通过 padding 属性来设置上述四个属性，顺序为：上、右、下、左. 使用方式与 margin 属性类似.

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

6. 宽高

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

width 和 height 设置的是内容区域的宽度和高度，不包括内边距.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

如果增加了内边距，则元素的实际宽度将随之改变：

div {
  width: 300px;
  padding-left: 25px;
  padding-right: 25px;
}

此处，<div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）.
若要将宽度保持为 width 指定的值，而无论填充量如何，那么可以使用 box-sizing 属性：

div.ex2 {
  width: 300px;
  padding-left: 25px;
  padding-right: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}

更大宽度

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

如果是 width: 500px;，则当页面宽度小于 500px 时，右边的内容将会看不到；而使用 max-width: 500px; 是则会挤压内容，从而使得右边的内容依然可见.

7. 轮廓

轮廓是在元素外围绘制的一条线，以凸显元素. 轮廓不是元素尺寸的一部分.

轮廓类型

p {
  outline-style: dotted;
}

轮廓宽度

p.ex4 {
  outline-style: solid;
  outline-width: 5px;
}

轮廓颜色

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0);
}

轮廓偏移

在轮廓与边框之间添加空间.

p {
  margin: 60px;
  border-style: solid;
  outline-style: dotted;
  outline-offset: 15px;
}

简写

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-widthoutline-style（必需）outline-color

p.ex3 {
  outline: 5px solid yellow;
}

8. 文本

文本颜色

body {
  color: rgb(0, 200, 0);
}

文本对齐

左对齐、右对齐、居中对齐：left、right、center.

h1 {
  text-align: center;
}

text-align 属性也可以设置为 "justify"，此时它将拉伸每一行，以使每一行具有相等的宽度.

div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: auto;
  text-align: justify;
}

垂直对齐

向上对齐、向下对齐、居中对齐：top、bottom、middle.
设置文本中图像的垂直对齐方式：

img.top {
  vertical-align: top;
}

文本装饰

无装饰、上划线、中划线、下划线：none、overline、line-through、underline.

h1 {
  text-decoration: overline;
}

文本缩进

指定文本首行的缩进.

p {
  text-indent: 50px;
}

字符间距

h1 {
  letter-spacing: 3px;
}

单词间距

h1 {
  word-spacing: 10px;
}

行高

p.big {
  background-color: lightblue;
  line-height: 6.0;
}

文字阴影

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

水平阴影：2px，垂直阴影：2px，模糊效果：5px，阴影颜色：red.

9. 字体

字体族

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

如果不支持前面的字体，则尝试使用后面的字体.

字体样式

正常：normal斜体：italic

p.italic {
  font-style: italic;
}

字体粗细

正常：normal粗体：bold细体：lighter

p.thick {
  font-weight: bold;
}

字体大小

1em 等于当前字体大小.

h1 {
  font-size: 2.5em;
}

可以使用 vw （"viewport width"）单位设置字体大小. 这样字体大小将随着浏览器窗口的大小而改变.
1vw = 视口宽度的 1％.

h1 {
  font-size: 10vw;
}

10. 链接

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

注意：

a:hover 必须 a:link 和 a:visited 之后a:active 必须在 a:hover 之后

11. 列表

标记类型

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;
}

图像标记

使用图像作为列表项标记.

ul {
  list-style-image: url('sqpurple.gif');
}

标记位置

inside：项目符号将在列表项内. 由于它是列表项的一部分，因此它将成为文本的一部分.outside：项目符号将在列表项之外.

ul.a {
  list-style-position: outside;
}

删除默认设置

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

简写

list-style 是以下属性的简写：

list-style-type（无法显示图像时使用此设置）list-style-positionlist-style-image

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