CSS学习笔记之基础教程（二）

6、边距

6.1 外边距：`margin`

6.1.1 外边距

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px;
    border: 1px solid #333333;
  }
</style>
<body>
  <h1>CSS外边距</h1>
  <div>本元素有外边距</div>

</body>
</html>

6.1.2 外边距 `Margin` - 简写属性

（1）

html 复制代码

margin: 25px 50px 75px 100px;

上外边距是 25px

右外边距是 50px

下外边距是 75px

左外边距是 100px

（2）

html 复制代码

margin: 25px 50px 75px;

上外边距是 25px

右和左外边距是 50px

下外边距是 75px

（3）

html 复制代码

margin: 25px 50px;

上和下外边距是 25px

右和左外边距是 50px

（4）

html 复制代码

margin: 25px;

所有四个外边距都是 25px

6.1.3 auto 值：以使元素在其容器中水平居中。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    /* margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px; */
    margin: auto;
    width: 100px;
    border: 1px solid #333333;
  }
</style>
<body>
  <h1>CSS外边距</h1>
  <div >本元素有外边距</div>

</body>
</html>

运行效果：

6.1.4 inherit 值：继承自父元素

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>

  div{
    /* margin: 70px; */
    /* margin-top: 100px;
    margin-left: 70px;
    margin-bottom: 100px;
    margin-right: 70px; */
    margin-left: 100px;
    border: 1px solid #333333;
  }

  p.ex1{
    margin-left: inherit;
  }

</style>
<body>
  <h1>CSS外边距</h1>
  <div >
    <p class="ex1">本元素集成父元素div的左边距</p>
  </div>

</body>
</html>

运行效果：

6.1.5 CSS 外边距合并

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

6.1.5.1 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>


#d1{
  width: 100px;
  height: 100px;
  background-color: brown;
  margin-bottom: 20px;
}

#d2{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-top: 10px;
}

</style>
<body>
<div id="d1"></div>
<div id="d2"></div>
  <div >

    <p >d1和d2间距为20px,而不是30px</p>
  </div>

</body>
</html>

运行效果：

6.1.5.2 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>

* {
  margin:0;
  padding:0;
  border:0;
}
#d1{
  width: 150px;
  height: 150px;
  background-color: brown;
  margin-top: 20px;
}

#d2{
  width: 100px;
  height: 100px;
  background-color: yellow;
  margin-top: 10px;
}

</style>
<body>
<div id="d1">
  <div id="d2"></div>
</div>

  <div >

    <p >d1和d2间距为20px,而不是30px</p>
  </div>

</body>
</html>

运行效果：

6.2 内边距：`padding`

不允许负值。

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>边距</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  #d1 {
    border: 1px solid #666666;
    /* 统一设置 */
    /* padding: 10px; */
    /* 单独设置 */
    /* padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  padding-bottom: 25px; */
    /* 简写  上 有 下 左*/
    /* padding: 25px 10px 25px 10px; */
    /* 简写  上、右左、下 */
    /* padding: 25px 10px 25px; */
    /* 简写  上下 、左右 */
    padding: 25px 10px;
  }
</style>

<body>
  <div id="d1">
    <p>本元素有内边距</p>
  </div>



</body>

</html>

7、宽度和高度

注意：height 和 width 属性不包括内边距、边框或外边距！它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度！

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

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。
inherit - 从其父值继承高度/宽度。

7.2 `max-width`

max-width 属性用于设置元素的最大宽度。
max-width 属性的值将覆盖 width（宽度）。

8、`CSS` 轮廓

CSS 轮廓

9、文本

9.1 文本对齐： `text-align`

text-align: center;
text-align: left;
text-align: right;
text-align: justify;

text-align: justify;效果：

9.2 文本方向：`direction` 和 `unicode-bidi`

文本方向

9.3 垂直对齐:`vertical-align`

vertical-align: top;
vertical-align: middle;
vertical-align: bottom;

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</style>
</head>
<body>

<p>一幅 <img src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 默认对齐方式的图像。</p><br>

<p>一幅 <img class="top" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 上对齐的图像。</p><br>

<p>一幅 <img class="middle" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 居中对齐的图像。</p><br>

<p>一幅 <img class="bottom" src="/i/logo/w3logo-3.png" alt="W3School" width="180" height="167"> 下对齐的图像。</p>

</body>
</html>

运行效果：

9.4 文本装饰：`text-decoration`

text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

</body>
</html>

运行效果：

9.5 文本转换：`text-transform`（大小写、驼峰）

text-transform: capitalize;
text-transform: lowercase;
text-transform: capitalize;

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 p.upper{
  text-transform:uppercase;
  text-indent: 100px;
 }
 p.lower{
  text-transform: lowercase;
}
p.capital{
  text-transform: capitalize;
}

</style>
<body>
  <p class="upper">元素大写：hello</p>
  <p class="lower">元素大写：hello\HELLO</p>
  <p class="capital">元素驼峰：hello world</p>
</body>
</html>

运行效果：

9.6 CSS 文字间距：`text-indent`（用于指定文本第一行的缩进）

text-indent: 100px;

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 p.upper{
  text-transform:uppercase;
  text-indent: 100px;
 }
 p.lower{
  text-transform: lowercase;
}
p.capital{
  text-transform: capitalize;
}

</style>
<body>
  <p class="upper">元素大写：hello</p>
  <p class="lower">元素大写：hello\HELLO</p>
  <p class="capital">元素驼峰：hello world</p>
</body>
</html>

运行效果：

9.7 字母间距：`letter-spacing`

letter-spacing: 10px;
letter-spacing: -10px;

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
 p.upper{
  text-transform:uppercase;

  letter-spacing: 10px;
 }

</style>
<body>
  <p >HELLO</p>
  <p class="upper">HELLO</p>

</body>
</html>

运行效果：

9.8 行高：`line-height`（指定行之间的间距）

line-height: 0.8;

9.9 字间距：`word-spacing`（指定文本中单词之间的间距）

word-spacing: 10px;
word-spacing: -5px;

9.10 空白:`white-space`(指定元素内部空白的处理方式，可用于禁用换行处理)

white-space: nowrap;

正常展示：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h2>空白</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

禁用换行：

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h2>空白</h2>

<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>

<p>请尝试删除 white-space 属性来看一下区别。</p>

</body>
</html>

9.11 文本阴影：`text-shadow`

text-shadow: 2px 2px;（水平、垂直）
text-shadow: 2px 2px red;（水平、垂直+颜色）
text-shadow: 2px 2px 5px red;（水平、垂直+模糊效果+颜色）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  p.shadow1 {
    /* 水平、垂直 */
    text-shadow: 2px 2px;
    font-size: 30px;
  }
  p.shadow2 {
    /* 水平、垂直+颜色 */
    text-shadow: 2px 2px red;
    font-size: 30px;
  }
  p.shadow3 {
    /* 水平、垂直+模糊效果+颜色 */
    text-shadow: 2px 2px 5px red;
    font-size: 30px;
  }
</style>

<body>
  <p style="font-size:30px">你好</p>
  <p class="shadow1">你好</p>
  <p class="shadow2">你好</p>
  <p class="shadow3">你好</p>
</body>

</html>

运行效果：

9.12 所有 CSS 文本属性

9.13、`CSS` 字体：`font-family`

通用字体族

在 CSS 中，有五个通用字体族：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>

<p>这是一个段落，以 Times New Roman 字体显示：</p>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p>这是一个段落，以 Arial 字体显示：</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p>这是一个段落，以 Lucida Console 字体显示：</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>

运行效果：

9.14 字体样式：`font-style`

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

9.15 字体粗细：`font-weight`

font-weight: normal;（正常）
font-weight: bold;（加粗）

9.16 字体变体：`font-variant`

font-variant: normal;
font-variant: small-caps;

9.17 CSS 字体属性：`font-`

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

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

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

10、`CSS` 图标

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 引用Font Awesome 图标库 -->
  <script src="https://kit.fontawesome.com/yourcode.js"></script>
  <!-- 引用 Bootstrap 图标-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!--引用 Google 图标  -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

11、`CSS` 链接

11.1 链接颜色：`color`

11.2 链接状态

四种链接状态分别是：

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

注意：

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>

p.ex1{
  font-size: 30px;
}
/* 未被访问过的 */
a:link{
   color: green;
   text-decoration: none;
   background-color: yellow;
}
/* 已被访问过的 */
a:visited{
  color: gray;
  text-decoration: none;
  background-color: cyan;
}
/* 鼠标悬停在链接上 */
a:hover{
  color: pink;
  text-decoration: underline;
  background-color: lightgreen;
}
/* 被选择的链接 */
a:active{
  color: red;
  text-decoration: underline;
  background-color: hotpink;
}

</style>
<body>
 <p class="ex1"> <a  href="html_jump_page.html" target="_blank">这是一个链接</a></p>
</body>
</html>

12、列表（ul:无序列表，ol:有序列表）

CSS 列表属性使您可以：

为有序列表设置不同的列表项标记
为无序列表设置不同的列表项标记
将图像设置为列表项标记
为列表和列表项添加背景色

12.1 不同的列表项目标记:`list-style-type`

该性质使用html设置方式参考HTML学习笔记之列表（四）

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   ul,ol,li{
    font-size: 30px;
   }
    ul.a {
      list-style-type: circle;
    }
    ul.b {
      list-style-type: square;
    }
    ol.a{
      list-style-type: upper-roman;
    }
    ol.b{
      list-style-type:armenian
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
<ul class="a">
  <li>肖战</li>
  <li>王一博</li>
</ul>
<ul class="b">
  <li>杨紫</li>
  <li>杨紫</li>
</ul>

<h1>有序列表：</h1>
<ol class="a">
  <li>第一个</li>
  <li>第二个</li>
</ol>
<ol class="b">
  <li>第一个</li>
  <li>第二个</li>
</ol>
</body>

</html>

运行效果：

12.2 图像作为列表项标记:`list-style-image`

list-style-image: url('imgs/icon_mess_sellorder.png');

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul,
    ol,
    li {
      font-size: 30px;
    }

    ul.a {
      list-style-image: url('imgs/icon_mess_sellorder.png');
    }

    ol.a {
      list-style-image: url('imgs/icon_mess_sellorder.png');
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>


  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

运行效果：

存在问题：

1、图片没有显示完整（可能跟图片大小有关系）

2、图片和文字没有对齐

12.3 定位列表项标记：`list-style-position`（指定列表项标记（项目符号）的位置）

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的。
"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul,
    ol,
    li {
      font-size: 30px;
    }

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

    ol.a {
      list-style-position: inside;
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>


  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

运行效果：

12.4 删除默认设置

html 复制代码

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

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul,
    ol,
    li {
      font-size: 30px;
    }

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

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

    ol.a {
      list-style-position: inside;
    }
  </style>
</head>

<body>
  <h1>无序列表：</h1>
  <ul class="a">
    <li>肖战</li>
    <li>王一博</li>
  </ul>
  <h1>无序列表(无样式)：</h1>
  <ul class="none">
    <li>肖战</li>
    <li>王一博</li>
  </ul>

  <h1>有序列表：</h1>
  <ol class="a">
    <li>第一个</li>
    <li>第二个</li>
  </ol>

</body>

</html>

运行效果：

12.5 列表 - 简写属性

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

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）
如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

html 复制代码

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

13、表格

13.1 表格边框：`border`

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
</style>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>肖战</td>
      <td>男</td>
    </tr>
  </table>

</body>

</html>

运行效果：

13.2 全宽表格:`width:100%`

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table,
  th,
  td {
    border: 1px solid black;
  }
  table{
    width: 100%;
  }
</style>

<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
    </tr>
    <tr>
      <td>肖战</td>
      <td>男</td>
    </tr>
  </table>

</body>

</html>

运行效果：

CSS学习笔记之基础教程（二）

6、边距

6.1 外边距：margin

6.1.1 外边距

6.1.2 外边距 Margin - 简写属性

6.1.3 auto 值：以使元素在其容器中水平居中。

6.1.4 inherit 值：继承自父元素

6.1.5 CSS 外边距合并

6.1.5.1 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

6.1.5.2 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并

6.2 内边距：padding

7、宽度和高度

7.2 max-width

8、CSS 轮廓

9、文本

9.1 文本对齐： text-align

9.2 文本方向：direction 和 unicode-bidi

9.3 垂直对齐:vertical-align

9.4 文本装饰：text-decoration

9.5 文本转换：text-transform（大小写、驼峰）

9.6 CSS 文字间距：text-indent（用于指定文本第一行的缩进）

9.7 字母间距：letter-spacing

9.8 行高：line-height（指定行之间的间距）

9.9 字间距：word-spacing（指定文本中单词之间的间距）

9.10 空白:white-space(指定元素内部空白的处理方式，可用于禁用换行处理)

9.11 文本阴影：text-shadow

9.12 所有 CSS 文本属性

9.13、CSS 字体：font-family

9.14 字体样式：font-style

9.15 字体粗细：font-weight

9.16 字体变体：font-variant

9.17 CSS 字体属性：font-

10、CSS 图标

11、CSS 链接

11.1 链接颜色：color

11.2 链接状态

12、列表（ul:无序列表，ol:有序列表）

12.1 不同的列表项目标记:list-style-type

12.2 图像作为列表项标记:list-style-image

12.3 定位列表项标记：list-style-position（指定列表项标记（项目符号）的位置）

12.4 删除默认设置

12.5 列表 - 简写属性

13、表格

13.1 表格边框：border

13.2 全宽表格:width:100%

13.3 合并表格边框（单边框）

6.1 外边距：`margin`

6.1.2 外边距 `Margin` - 简写属性

6.2 内边距：`padding`

7.2 `max-width`

8、`CSS` 轮廓

9.1 文本对齐： `text-align`

9.2 文本方向：`direction` 和 `unicode-bidi`

9.3 垂直对齐:`vertical-align`

9.4 文本装饰：`text-decoration`

9.5 文本转换：`text-transform`（大小写、驼峰）

9.6 CSS 文字间距：`text-indent`（用于指定文本第一行的缩进）

9.7 字母间距：`letter-spacing`

9.8 行高：`line-height`（指定行之间的间距）

9.9 字间距：`word-spacing`（指定文本中单词之间的间距）

9.10 空白:`white-space`(指定元素内部空白的处理方式，可用于禁用换行处理)

9.11 文本阴影：`text-shadow`

9.13、`CSS` 字体：`font-family`

9.14 字体样式：`font-style`

9.15 字体粗细：`font-weight`

9.16 字体变体：`font-variant`

9.17 CSS 字体属性：`font-`

10、`CSS` 图标

11、`CSS` 链接

11.1 链接颜色：`color`

12.1 不同的列表项目标记:`list-style-type`

12.2 图像作为列表项标记:`list-style-image`

12.3 定位列表项标记：`list-style-position`（指定列表项标记（项目符号）的位置）

13.1 表格边框：`border`

13.2 全宽表格:`width:100%`