CSS笔记—初级

本文根据 W3School 的 CSS 教程中的初级部分整理而成.

1. 选择器

标签选择器

作用于所有的

标签：

p {
  text-align: center;
  color: red;
}

id 选择器

作用于所有 id="para1" 的元素：

#para1 {
  text-align: center;
  color: red;
}

类选择器

作用于所有 class="center" 的元素：

.center {
  text-align: center;
  color: red;
}

作用于所有 class="center" 的

标签：

p.center {
  text-align: center;
  color: red;
}

分组选择器

同时作用于所有的

和

标签：

h1, p {
  text-align: center;
  color: red;
}

当然，也可以使用不同的选择器，如：

p, #para1, .center {
  text-align: center;
  color: red;
}

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-color
• background-image
• background-repeat
• background-attachment
• background-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-width
• border-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;
}

此处，

元素的实际宽度将是 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-width
• outline-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 之后