CSS学习笔记

什么是CSS？

CSS是指层叠样式 (Cascading Style Sheets)
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一个

CSS实例

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明，如：

h1 {color:blue;font-size:15px;}

h1是选择器
color和font-size是属性，分别表示颜色和字体大小
blue和15px是属性的值

CSS注释

CSS注释以 /* 开始, 以 */ 结束

p {text-align:center} /*这是一个注释*/

CSS 选择器

id 选择器

id 选择器可以为标定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义
如：以下样式规则应用于元素属性 id = "para1"：
```
#para{text-align:center;color:red;}
```

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。也可以指定特定的HTML元素使用class
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中
```
.center {text-align:center;}
```

注：类名的第一个字符不能使用数字！

标签选择器

标签选择器，即以 html 标签作为 css 修饰所用的选择器

<style>h3{color:red;}</style>
<h3>选择器</h3>

第四种选择器

第四种选择器即直接在标签内部写css代码

<h3 style="color:red;">选择器</h3>

CSS 创建

插入样式表的方法有三种：

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

当样式需要应用于很多页面时，外部样式表将是理想的选择

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签
样式表应该以 .css 扩展名进行保存
每个页面使用 <link> 标签链接到样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

内部样式表使用<style>标签在文档头部定义内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

当样式仅需要在一个元素上应用一次时使用
由于内容与样式混杂在一起，会导致源码可读性变差，慎用
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
```
<p style="color:blue;margin-left:20px">这是一个段落。</p>
```

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

如，外部样式拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。为什么会出现这种结果？原因可以在下面

多重样式优先级

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

CSS 背景

CSS 背景属性用于定义HTML元素的背景

CSS 属性定义背景效果：

background-color（背景颜色）
```
body {background-color:#b0c4de;}
```
background-image（背景图像）背景图像默认进行平铺重复显示，以覆盖整个元素实体
```
body {background-image:url('paper.gif');}
```
background-repeat（定义平铺的方式）
background-attachment（决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动）
background-position（定义图像在背景中的位置）
```
background-position:right top;
```

background-color 背景颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

CSS 文本格式

文本颜色

与上面提到的相同

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式
文本可居中或对齐到左或右,两端对齐
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
```
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
```

文本修饰

text-decoration 属性用来设置或删除文本的装饰
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
```
a {text-decoration:none;}
```

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母

p.uppercase {text-transform:uppercase;} /* 全部字母大写 */
p.lowercase {text-transform:lowercase;} /* 全部字母小写 */
p.capitalize {text-transform:capitalize;} /* 全部单词首字母大写 */

文本缩进

文本缩进属性是用来指定文本的第一行的缩进
```
p {text-indent:50px;}
```

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式

CSS字型

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）

特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

Serif （Serif字体中字符在行的末端拥有额外的装饰）
Sans-serif（"Sans"是指无 - 这些字体在末端没有额外的装饰）
Monospace（所有的等宽字符具有相同的宽度）

字体系列

font-family 属性设置文本的字体系列
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
```
p{font-family:"Times New Roman", Times, serif;}
```

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明

字体样式

主要是用于指定斜体文字的字体样式属性

这个属性有三个值：

正常 - 正常显示文本(normal)
斜体 - 以斜体字显示的文字(italic)
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）(oblique)
```
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
```

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}

用em来设置字体大小

为了避免 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素
1em和当前字体大小相等。在浏览器中默认的文字大小是16px ，px/16=em
```
h1 {font-size:2.5em;} /* 40px/16=2.5em */
```

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}

所有CSS字体属性

font（在一个声明中设置所有的字体属性）
font-family（指定文本的字体系列）
font-size（指定文本的字体大小）
font-style（指定文本的字体样式）
font-variant（以小型大写字体或者正常字体显示文本）
font-weight（指定字体的粗细）

CSS 链接

不同的链接可以有不同的样式

链接样式

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

注：这四个样式的设置顺序不可变

a:link {color:#000000;}      /* 未访问链接*/

文本修饰

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

a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}

CSS 列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol- 列表项的标记有数字或字母

不同的列表项标记

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;} /* 小写字母 */

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

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

列表 - 简写属性

顺序设置如下属性：

list-style-type
list-style-position

list-style-image

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

移除默认设置

list-style-type:none 属性可以用于移除小标记
默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
```
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
```

表格边框

指定CSS表格边框，使用border属性

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td {border: 1px solid black;}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table { border-collapse : collapse }

表格宽度和高度

Width和height属性定义表格的宽度和高度

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左，右，或中心：
```
text { text-align:right; }
```
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
```
td { height:50px; vertical-align:bottom; }
```

表格颜色

table, td, th { border:1px solid green; }
th { background-color:green; color:white; }

CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像

元素的宽度和高度

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+

边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距

+下边距

CSS 边框

边框样式

border-style属性用来定义边框的样式

none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框

...

边框宽度

border-width 属性定义边框宽度，值：

2px 或 0.1em(单位为 px, pt, cm, em 等)
thick 、medium（默认值）和 thin

边框颜色

border-color属性定义边框颜色

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

p.one
{
    border-style:solid;
    border-color:red;
}

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框

border-top-style:dotted
border-right-style:solid
border-bottom-style:dotted
border-left-style

简写：border-style:dotted solid double dashed;（上，右，底，左）

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度

所有CSS 轮廓（outline）属性：

outline
outline-color
outline-style
outline-width

注：outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

CSS margin(外边距)

CSS margin(外边距)属性定义元素周围的空间
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

可能的值

auto - 设置浏览器边距，这样做的结果会依赖于浏览器
length - 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距

注：Margin可以使用负值，重叠的内容。

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - 简写属性

margin:25px 50px 75px 100px; /* 上，右，下，左 */

margin:25px 50px 75px; /* 上，左和右，下 */

margin:25px 50px; /* 上和下，左和右 */

margin:25px; /* 所有的4个边距都是25px */

CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充
```
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
```

CSS 分组和嵌套选择器

分组选择器

在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器
```
h1,h2,p { color:green; }
```

嵌套选择器

.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
p .marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

所有CSS 尺寸 (Dimension)属性：

height - 设置元素的高度
line-height - 设置行高
max-height - 设置元素的最大高度
max-width - 设置元素的最大宽度
min-height - 设置元素的最小高度
min-width - 设置元素的最小宽度
width - 设置元素的宽度

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符，如：<h1> , <p> , <div> ...
内联元素只需要必要的宽度，不强制换行，如：<span> , <a> ...

如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准

下面的示例把列表项显示为内联元素：
```
li {display:inline;}
```
下面的示例把span元素作为块元素：
```
span {display:block;}
```

CSS Position(定位)

position 属性指定了元素的定位类型

position 属性的五个值：

static - HTML 元素的默认值，即没有定位
relative - 相对定位元素的定位是相对其正常位置
```
h2.pos_left { position:relative; left:-20px; }
```
fixed - 固定位置，即使窗口是滚动的它也不会移动
absolute - 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
```
h2
{
    position:absolute;
    left:100px;
    top:150px;
}
```
sticky - 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位

重叠的元素

它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面

注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面

CSS 布局 - Overflow

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条
默认情况下，overflow 的值为 visible，意思是内容溢出元素框
值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性

CSS 布局 - 水平 & 垂直对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;
设置到元素的宽度将防止它溢出到容器的边缘

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块 (display: block;)元素中

左右对齐 - 使用定位方式

可以使用 position: absolute; 属性来对齐元素

左右对齐 - 使用 float 方式

float 属性来对齐元素

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用 padding:

垂直居中 - 使用 line-height

垂直居中 - 使用 position 和 transform

CSS 组合选择符

在 CSS3 中包含了四种组合方式

后代选择器(以空格分隔)，以下实例选取所有 <p> 元素插入到 <div> 元素中:
```
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; }
```

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果

语法

伪类的语法：selector:pseudo-class {property:value;}
CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

anchor伪类：

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色

CSS :first-child 伪类

first-child 伪类可以用来选择父元素的第一个子元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child { color:blue; }

CSS - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

q:lang(no) {quotes: "~" "~";}

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果:first-line 伪元素

:first-line 伪元素用于向文本的首行设置特殊样式，只能用于块级元素
:first-letter 伪元素用于向文本的首字母设置特殊样式，只能用于块级元素
:before 伪元素可以在元素的内容前面插入新内容
:after 伪元素可以在元素的内容之后插入新内容

CSS 导航栏

CSS 下拉菜单

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单

HTML 部分：使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式
CSS 部分：
- .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置
- .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示
- :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

CSS 提示工具(Tooltip)

提示工具在鼠标移动到指定元素后触发
HTML) 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。
提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。
CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。注意: 接下来的实例会显示更多的定位效果。
tooltiptext 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示。设置了一些宽度、背景色、字体色等样式。
CSS3 border-radius 属性用于为提示框添加圆角。
:hover 选择器用于在鼠标移动到到指定元素 <div>上时显示的提示。

CSS 图片廊

CSS 图像透明/不透明

CSS3中属性的透明度是 opacity

Opacity属性值从0.0 - 1.0 ，值越小，使得元素更加透明。

CSS 图像拼合技术

图像拼合就是单个图像的集合
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求，使用图像拼合会降低服务器的请求数量，并节省带宽
有了CSS，我们可以只显示我们需要的图像的一部分

图像拼合s - 悬停效果

使用hover伪类

CSS 媒体类型

CSS 属性选择器

属性选择器
```
[title] { color:blue; }
```

属性和值选择器

[title=runoob] {  border:5px solid green; }

属性和值的选择器 - 多值
```
[title~=hello] { color:blue; }
```

表单样式

属性选择器样式无需使用class或id的形式：

input[type="button"] { width:120px; margin-left:35px; display:block; }

CSS 表单

上面学过的基础知识足够写表单了

CSS 计数器

CSS 计数器通过一个变量来设置，根据规则递增变量

使用计数器自动编号

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建：

以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2> 元素的计数值都会递增，并在每个 <h2> 元素前添加 "Section <计数值>:"

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

嵌套计数器

以下实例在页面创建一个计数器，在每一个 <h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 <h2> 元素的前面，内容为 "<主标题计数值>.<副标题计数值>":

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

计数器也可用于列表中，列表的子元素会自动创建。

CSS 网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域

posted @ 2020-11-26 19:38 沉石HCR 阅读(119) 评论(0) 收藏举报

刷新页面返回顶部

沉石HCR

CSS学习笔记

什么是CSS？

CSS实例

CSS注释

CSS 选择器

id 选择器

class 选择器

标签选择器

第四种选择器

CSS 创建

外部样式表

内部样式表

内联样式

多重样式

多重样式优先级

CSS 背景

background-color 背景颜色

CSS 文本格式

文本颜色

文本的对齐方式

文本修饰

文本转换

文本缩进

CSS 字体

CSS字型

字体系列

字体样式

字体大小

设置字体大小像素

用em来设置字体大小

使用百分比和EM组合

所有CSS字体属性

CSS 链接

链接样式

文本修饰

背景颜色

CSS 列表

列表

不同的列表项标记

作为列表项标记的图像

列表 - 简写属性

移除默认设置

表格边框

折叠边框

表格宽度和高度

表格文字对齐

表格颜色

CSS 盒子模型

元素的宽度和高度

CSS 边框

边框样式

边框宽度

边框颜色

边框-单独设置各边

CSS 轮廓（outline）

CSS margin(外边距)

可能的值

Margin - 单边外边距属性

Margin - 简写属性

CSS padding（填充）

CSS 分组 和 嵌套 选择器

分组选择器

嵌套选择器

CSS 尺寸 (Dimension)

CSS Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none或visibility:hidden

CSS Display - 块和内联元素

如何改变一个元素显示

CSS Position(定位)

重叠的元素

CSS 布局 - Overflow

CSS Float(浮动)

CSS 布局 - 水平 & 垂直对齐

元素居中对齐

文本居中对齐

图片居中对齐

左右对齐 - 使用定位方式

左右对齐 - 使用 float 方式

垂直居中对齐 - 使用 padding

CSS 分组和嵌套选择器

CSS 属性选择器