CSS基础

CSS全称为Cascading Style Sheet，中文译为层叠式样式表、级联样式表。

CSS样式的基本结构

css

选择器 { 
	属性1: 属性值1;/* 声明1 */
	属性2: 属性值2;/* 声明2 */
}

CSS样式由选择器和**声明（规则）**两部分组成。

选择器（Selector）：告诉浏览器该样式作用于页面中的哪些独享，这些对象可以是某个标签、所有网页对象、指定class、或id值等。
声明（Declaration）：声明可以由一个或无数个，用于告诉浏览器如何去渲染选择器指定的对象。
- 声明包含属性和属性值。
- 声明间使用分号;号分割开，最后一个声明的分号可以省略。所有声明放置在一对大括号内，紧邻在选择器的后面
- 属性名是由一个单词或多个单子组成的，单词之间使用连字符相连。

CSS的注释使用/* 注释语句 */来进行注释，单行和多行注释都是一样的。

html

<style>
    body {/* 页面基本属性 */
        font-size: 12px;
        color: #CCCCCC;
        font-family: "微软雅黑";
    }
    /* 
    多
    行
    注
    释
    */
</style>

CSS的应用

CSS样式必须保存在.css类型文件中或存放在html的<style>标签中。

CSS样式应用的方法主要包括4种：

行内样式：行内样式是指直接将样式放在标签的style属性中。

html

<p style="font-size:12px;">这是一段文字</p>

内嵌式：内嵌式通过将CSS写在网页源文件的头部，即<head><head/>之间，使用<style>标签内。其特点是，该样式只能在此页使用，解决行内样式多次书写的弊端。

html

<head>
	<style type="text/css">
	...样式...
	</style>
</head>

style标签中有一个title的属性，可以给不同的样式设置一个标题，浏览器就可以根据标题选择不同的样式达到浏览器中切换的效果。

html

<head>
	<style title="样式1"></style>
	<style title="样式2"></style>
</head>

链接式：链接式通过HTML的<link>标签将外部样式表文件链接到HTML文档中，这是网站应用使用最多的方式，也是最实用的方式，实现了HTML文档和CSS样式文件的完全分离。

html

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

导入式：通过@import命令导入外部样式表，@import命令必须放在<body>标签前或其他样式前，否则导入的样式不生效。有以下6种导入方式：
1. @import daoru.css;
2. @import 'daoru.css';
3. @import "daoru.css";
4. @import url(daoru.css);
5. @import url('daoru.css');
6. @import url("daoru.css");

CSS样式表

一个或多个CSS样式可以组成一个样式表，样式表包括内部样式表和外部样式表，它们没有本质区别。

内部样式表：内部样式表示包含在<style>标签内，一个<style>标签就表示一个内部样式表。
外部样式表：如果CSS样式被放置在网页文档外部的文件中，则称为外部样式表。

导入外部样式表有两种方式：

通过<link>标签
是通过@import导入
@import在ie5以上才能识别，而link是HTML标签，无兼容问题。
link方式的样式权重高于@import的权重。
推荐使用link导入样式表，@import作为补充方法使用。

可以在CSS源代码的顶部设置文件的字符编码。
css
@charset "gb2312"

CSS特性

层叠和继承是CSS样式的两个最基本的特性。

CSS的层叠性

css的层叠性是指css样式的应用优先级。

css样式表的优先级 在css中，样式表的应用优先级如下：

作者（网页创建者）的样式
用户自定义的样式
浏览器的默认样式
HTML的默认样式

css样式的优先级 在css中，样式的应用优先级如下：

附加!important关键字的声明会拥有最高的优先级
行内样式大于内嵌样式表、外部样式表
内嵌样式表、外部样式表需要计算选择器权重来得出优先级。
若特殊性相同（权重相同），则遵循就近原则，越靠近元素得样式具有越大得优先级。

css

/* 以下样式拥有最高优先级。!important写在分号前面 */
span{font-size:30px !important;}

如果多个不同类型的选择器同时为一个对象设置样式时，需要计算选择器的累计的权重，权重越高优先级越高。常用的选择器权重信息如下：

通配（*）选择器：0
标签选择器：1
伪元素或伪对象选择器：1
类（.）选择器：10
属性选择器：10
id（#）选择器：100

css

/* 加权值=100+1+1+10+1+1=114 */
#head div h2 .f12 span em{color:#000;}

在相同特殊性下，CSS将遵循就近原则，越靠近元素的样式具有越大优先权。这就意味着，排在下面的样式表会比上面的样式表拥有更大的优先权。

CSS的继承性

CSS继承性是指被包含的元素将拥有外层元素的样式效果。

需要注意的是：在继承时，不管父级样式的优先权多大，被子级元素继承时，它的特殊性为0。也就是说，一个元素显式声明的样式都可以覆盖继承来的样式。

CSS3选择器

CSS3选择器的分类

CSS3选择器可以分为5大类：

基本选择器
- 标签选择器
- 类选择器
- ID选择器
- 通配选择器
组合选择器
伪类选择器
- 动态伪类选择器
- 目标伪类选择器
- 语言伪类选择器
- UI元素状态伪类选择器
- 结构伪类选择器
- 否定伪类选择器
伪元素选择器
属性选择器

基本选择器

基本选择器包含标签选择器、类选择器、ID选择器、通配选择器。

标签选择器

标签选择器直接引用HTML标签名称，也称为类型选择器，它规定了网页元素在页面中默认的显示样式。标签选择器是CSS中使用率最高的一类选择器。

html

<style type="text/css">
    p {
        font-size: 12px;
        /*设置字体大小为12像素*/
        color: red;
        /*设置字体颜色为红色*/
    }
</style>
<p>这是一段文字</p>

类选择器

类选择器以一个点.前缀开头，然后跟随一个自定义的类名，这个类名与元素的class属性进行匹配，实现了相同元素拥有不同的样式。

html

<style type="text/css">
    .font-size18 {
        font-size: 18px;
    }

    p.font-size38 {
        font-size: 38px;
    }

    .font-size38 {
        font-size: 48px;
    }

    .red-font{
        color: red;
    }
</style>

<p class="font-size18 red-font">这是一段18px的文字</p>
<p class="font-size38">这是一段38px的文字</p>
<div class="font-size38">这是一段48px的文字</div>

元素的class属性也可以包含多个类。

ID选择器

ID选择器以井号#作为前缀，然后是一个自定义的ID号，这个ID号与元素的id属性匹配。实现通过id定义元素的样式。

html

<style type="text/css">
    #p1 {
        color: red;
    }

    p#p1 {
        color: blue;
    }

    #div1 {
        color: green;
    }
</style>

<p id="p1">这是一段文字</p>
<div id="div1">这是一个区块</div>

一般通过ID选择器来定义HTML框架结构的布局效果，因为HTML框架元素的ID值都是唯一的。

HTML元素中，id与class属性的区别？
id属性具有唯一性，通常用于标识文档中的特定元素。
class属性用于标识一组具有相似样式或行为的元素，
在整个html文档中，不能有两个或更多具有相同id值得元素。
在文档中可以多次使用相同的class属性，一个元素也可以有多个class值，它们之间用空格分隔。

通配选择器

如果HTML所有元素都需要定义相同的样式，这是可以使用通配选择器。通配选择器是固定的，用星号*来表示。

html

<style type="text/css">
    * {
        color: red;
    }
</style>
<p>这是一段文字</p>

组合选择器

组合选择器是指把两个或多个基本选择器组合在一起，形成的复杂的选择器，组合选择器可以精确匹配页面元素。组合选择器的权重通常会比单个基本选择器高，样式应用的优先级也更高。

包含选择器

包含选择器通过空格标识符来表示，前面一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器。

html

<style type="text/css">
    div p {
        color: red;
    }
</style>
<div>
    <p>这是一段文字</p>
</div>

子选择器

子选择器是指定父元素所包含的子元素，子选择器使用尖角号>表示。

html

<style type="text/css">
    span {
        color: red;
    }

    div>span {
        color: blue;
    }
</style>
<h1><span>这是一段文本</span></h1>
<div><span>这是一段文本</span></div>

通过这种方式，也可以准确定义HTML文档某个或一组子元素的样式，而不需要为它们定义ID属性或者Class属性。

相邻选择器

相邻选择器用于选择紧接在另一个元素后面的元素。它使用加号符号（+）连接两个元素选择器，表示选取紧接在前一个元素后面的同级元素。

html

<style type="text/css">
    p + p {
        color: red;
    }
</style>
<p>这是一段黑色文字</p>
<p>这是一段红色文字</p>

这样的选择器在某些情况下很有用，特别是当你只想选择某个元素的直接相邻同级元素时。

兄弟选择器

兄弟选择器通过波浪符号（~）分隔符进行定义，其基本结构是第一个选择器指定同级前置元素，后一个选择器指定其后同级所有匹配元素。

兄弟选择器与相邻选择器的区别在于：
兄弟选择器选择前置元素后同级的所有匹配元素
相邻选择器选择前置元素后相邻的一个匹配元素

html

<style type="text/css">
    p~p {
        color: red;
    }
</style>
<div>
    <p>这是一段黑色文字</p>
    <p>这是一段红色文字</p>
    <span>这是一段黑色文字</span>
    <p>这是一段红色文字</p>
</div>

分组选择器

分组选择器通过逗号（,）分隔符进行定义，通过分组选择器可以实现对多个元素的集体声明，减少代码的书写量。

html

<style type="text/css">
    h1,h2,h3,h4{
        color: red;
    }
</style>
<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

属性选择器

CSS提供了7个属性选择器，其中CSS3新增了3个，分别如下：

E[attr]：只使用了属性名，但没有确定任何属性值。
E[attr="value"]：指定了属性名，并制定了该属性的属性值。

如果元素的属性值是词列表时，选择器的value值需要完全匹配，才生效。

E[attr~="value"]：指定了属性名和属性值，这里的属性值是一个词列表，并且以空格隔开，需等号前添加~。

如果元素的属性值是词列表时，选择器的value值只需要有一个匹配就生效。

E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的，需等号前添加^。
E[attr$="value"]：指定了属性名，并且有属性值，属性值是以value结束的，需等号前添加$。
E[attr*="value"]：指定了属性名，并且有属性值，属性值中包含了value，需等号前添加*。
E[attr|="value"]：制定了属性名，并且属性值是value或者以"value-"开头的值。如（zh-cn）。

属性选择器中的E表示匹配元素的选择器，可以省略。
中括号[]为属性选择器的标识符，不能省略。
attr表示HTML属性名
value表示HTML属性值

在7种属性选择器种，E[attr="value"]和E[attr*="value"]是最实用得。

E[attr="value"]可以用于定位不同类型的元素，特别是form元素的操作，如input[type="text"]、input[type="checkbox"]等。
E[attr*="value"]可以帮助匹配不同类型的文件，如不同文件类型的链接需要使用不同的图标，可以通过这个属性给.doc、.pdf、.png、.ppt等配置不同的图标。

html

<style type="text/css">
    input[type="text"] {
        color: red;
    }

    input[type="email"] {
        color: blue;
    }
</style>
<input type="text">
<input type="email">

伪类选择器

伪类选择器以冒号(:)作为标识符，冒号前可以添加选择符限定伪类应用范围，冒号后为伪类或伪类对象名，冒号前后必须没有空格，否则当成是分组选择器。CSS伪类选择器有两种用法：

单纯式E:pseudo-class{property:value}：其中E为元素，pseudo-class为伪类名称
混用式E.class:pseudo-class{property:value}：其中.class表示类选择符。

CSS的伪类选择器主要包括4种：

动态伪类
结构伪类
否定伪类
状态伪类
目标伪类

动态伪类

动态伪类是一类行为类样式，这些伪类不存在于HTML中，只有当用户与页面进行交互时才能体现出来。动态伪类选择器主要包括两种形式：

锚点伪类：这是一种在链接中常见的样式。
- link：链接没有被访问时
- visited：链接被访问过后
行为伪类：也称为用户操作伪类。
- hover：用于用户把鼠标移动到元素上面时的样式效果。
- active：用于用户点击元素时的样式效果，即按下鼠标左键时发生的样式，当松开鼠标左键时该动作完成。
- focus：用于元素成为焦点时的样式效果，这个通常用在表单元素上。
- before：用于链接元素，表示点击前样式效果。
- after：用于链接元素，表示点击后样式效果。

html

<style type="text/css">
    #mya:link {
        color: red;
    }
    #mya:visited {
        color: green;
    }
    #mya:hover {
        color: yellow;
    }
    #mya:active {
        color: blue;
    }
    /* focus会覆盖active的样式 */
    #mya:focus {
        color: pink;
    }
    
    #mya::before{
        content: "before:";
        color: chocolate;
    }

    #mya::after{
        content: "after:";
        color: chocolate;
    }
</style>
<a href="http://www.baidu.com" id="mya">www.baidu.com</a>

结构伪类

结构伪类是CSS3新设计的选择器，它利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class属性和ID属性的定义。

结构伪类主要有以下这些：

E:first-child：选择某个元素的第一个为E的子元素。
E:last-child：选择某个元素的最后一个为E的子元素。
E:nth-child()：选择某个元素的一个或多个特定的为E的子元素。
E:nth-last-child()：选择某个元素的一个或多个特定的为E子元素，从这个元素的最后一个字元素开始向前计算。

E:nth-child()和E:nth-last-child()，接受一个表示位置的参数，可以是一个具体数字、关键词或表达式。
E:nth-child(2)：选择父元素内的第二个子元素。
E:nth-child(odd)：选择父元素内的奇数位置的子元素。
E:nth-child(even)：选择父元素内的偶数位置的子元素。
E:nth-child(3n+1)：选择父元素内每隔三个元素中的第一个元素。（这里参数只能使用字母n，n表示从0开始的所有自然数。当参数为0时，表示没有选择元素）

html

<style type="text/css">
    li:first-child {
        color: red;
    }

    li:last-child {
        color: green;
    }

    li:nth-child(2) {
        color: blue;
    }

    li:nth-last-child(2) {
        color: yellow;
    }
</style>
<ul>
    <p>列表项</p>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
</ul>

<ul>
    <li>第一行</li>
    <li>第二行</li>
    <li>第三行</li>
    <li>第四行</li>
    <li>第五行</li>
</ul>

E:nth-of-type()：与E:nth-child()功能类似，但只会计算指定类型的元素
E:nth-last-of-type()：与E:nth-last-child()功能类似，但只会计算指定类型的元素，从元素的最后一个开始向前计算。
E:first-of-type：与E:first-child功能类似，但只会计算指定类型的元素，选择一个上级元素下的第一个指定类型子元素。
E:last-of-type：与E:last-child功能类似，但只会计算指定类型的元素，选择一个上级元素的最后一个指定类型子元素。
E:only-child：选择的元素是它的父元素的唯一一个子元素

html

<style type="text/css">
    p:only-child {
        color: red;
    }
</style>
<div>
    <p>单独一行</p>
</div>

<div>
    <p>有两行</p>
    <p>有两行</p>
</div>

E:only-of-type：与E:only-child功能类似，但只会计算指定类型的元素，选择一个元素是它的上级元素的唯一一个相同类型的子元素。
E:empty：选择的元素里面没有任何内容的元素。

html

<style type="text/css">
    input:empty{
        display: none;
    }

</style>
<div>
    <input type="button">
</div>

否定伪类

:not()表示否定选择器，即排除或过滤掉特定元素，可以用于排除特定的元素、类、id等。其参数可以为任意合法的CSS选择器。

html

<style type="text/css">
    li:not(#two) {
        color: blue;
    }
</style>
<ul>
    <li>这是第一行</li>
    <li id="two">这是第二行</li>
</ul>

状态伪类

状态伪类是 CSS 中用于选择元素在特定状态下的一组伪类。这些状态可以包括用户与页面交互的各种情况，主要用于表单设计上。这些状态伪类主要有：

:hover：鼠标悬停在元素上时应用的样式。
:active：元素被激活时应用的样式，通常是鼠标点击并按住时。
:focus：元素获得焦点时应用的样式，通常用于处理表单元素。
:visited：访问过的链接的样式，用于区分已访问和未访问的链接。
:checked：用于选择表单元素中被选中的复选框或单选按钮。
:disabled：选择禁用状态的表单元素。
:enabled：匹配指定范围内可用的表单元素。

html

<style type="text/css">
    input:disabled {
        background-color: red;
    }
</style>

<input type="text" disabled placeholder="不可用">

目标伪类

目标伪类选择器形式如E:targe，它表示选择匹配E的所有元素，且匹配元素被相关URL指向。

该选择器是动态选择器，只有当存在URL指向该匹配元素时，样式效果才能够有效。

html

<style type="text/css">
    div:target {
        background-color: red;
    }
</style>
<a href="#one">one</a>
<a href="#two">two</a>

<div id="one">one div</div>
<div id="two">two div</div>

当点击链接定位到元素时，元素样式改变。

CSS美化网页文本

font属性

font是一个复合属性，该属性能够设置多种字体属性，比如：
- font-family：定义字体累心
- font-size：定义字体大小
- color：定义字体颜色
- font-weight：定义字体粗细
- font-style：定义字体倾斜效果
- text-decoration：定义字体装饰线效果，如上划线、下划线、贯穿线。
- font-variant：定义字体大小写效果。
- text-transform：定义单词的大小写效果。
- line-height
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
属性之间以空格分隔
font属性至少应设置字体大小和字体类型，并且必须放在最后，否则无效。

定义字体样式

字体样式主要涉及字符本身的显示效果。在css中，font前缀得主要为字体属性。

定义字体类型

font-family属性

CSS中使用font-family属性来定义字体类型。
font-family的name属性表示字体名称，可指定多种字体，多个字体将按优先顺序排序，以逗号隔开。
如字体名称包含空格，需使用引号括起。

CSS中提供了5类通用字体，所谓通用字体就是一种备用机制，即指定的所有字体都不可用时，能够在用户系统中找到一个类似字体进行替代显示。这五类通用字体分别是：

serif：衬线字体，变宽，字体较明细地显示粗与细的笔划。
sans-serif：无衬线字体，变宽，没有突变、交叉笔划或其他修饰符。
cursive：草体，表现为斜字型、联笔或其他草体的特征，看起来像手写字。
fantasy：奇异字体，主要是装饰性的，也即艺术字。
monospace：等宽字体，所有字型的宽度都一样。

html

<p style="font-family: serif;">seril字体</p>
<p style="font-family: sans-serif;">sans-serif字体</p>
<p style="font-family: cursive;">cursive字体</p>
<p style="font-family: fantasy;">fantasy字体</p>
<p style="font-family: monospace;">monospace字体</p>

自定义字体类型

CSS3允许用户自定义字体类型，通过@font-face能够加载服务器端的字体文件，让客户端浏览器显示客户端没有安装的字体。

@font-face使用方式如下：

html

<style type="text/css">
@font-face {
    font-family: myFirstFont;
    src: url(./hanyiyongzisonghei.ttf) format("truetype");
    
}
p {
    font-family: myFirstFont;
    font-size: 30px;
}
</style>
<p>这是一段文字</p>

定义字体大小

css中使用font-size属性来定义字体大小，该属性有如下取值：

xx-small：最小
x-small：较小
small：小
medium：正常
large：大
x-large：较大
xx-large：最大
larger：增大，基于父对象中字体尺寸进行增大。
smaller：减少，基于父对象中字体尺寸进行减小。
length：该值可以是百分数或浮点数和单位标识符组成的长度值。百分数取值时是基于父对象中字体的尺寸来计算的，与em单位计算相同。

css中的字体单位

在css中，字体单位可以分为两大类：绝对单位和相对单位。

绝对单位

in（inch，英寸）
cm（centimerte，厘米）
mm（millimeter，毫米）
pt（point，印刷的点数）
pc（pica，1pc=12pt）
xx-small
x-small
small
medium
large
x-large
xx-large

相对单位

px（pixel，像素）：根据屏幕像素点的尺寸变化而变化。
em：相对于父辈字体的大小来定义字体大小。如父元素字体大小为12px，子元素为2em，则实际大小为24px。
ex：相对于父辈字体的x高度来定义字体大小。
%：以百分比形式定义字体大小，与em效果相同，是相对于父辈字体大小来定义字体大小的。
larger：相对于父辈字体尺寸进行增大。
smaller：相对于父辈字体尺寸进行减小

html

<p style="font-size: xx-small;">xx-small</p>
<p style="font-size: x-small;">x-small</p>
<p style="font-size: small;">small</p>
<p style="font-size: medium;">medium</p>
<p style="font-size: large;">large</p>
<p style="font-size: x-large;">x-large</p>
<p style="font-size: xx-large;">xx-large</p>
<p style="font-size: 30px">30px</p>

单位选择推荐

对于网页宽度固定或栏目宽度固定的布局，使用像素是正确的。
对于页面宽度不固定或者栏目宽度也不固定的页面，使用百分比或em是一个正确选择。

定义字体颜色

css中使用color属性来定义字体颜色。

颜色表示法

颜色名

css

p {color:gray;}

十六进制

css

p {color:#666666;}

使用RGB

css

p {color:rgb(120,120,120);}

RGBA颜色表示法：在RGB颜色基础上增加Alpha通道，以定义透明颜色。

css

p {color:rgba(120,120,120,100);}

HSL颜色表示法：使用色相H，饱和度S，亮度L表示颜色。

css

p {color:hsl(0,100%,100%);}

HSLA颜色表示法：在HSL基础上增加Alpha通道，以定义透明度。

css

p {color:hsla(0,100%,100%,5);}

定义字体粗细

CSS使用font-weight属性来定义字体粗细，它有以下属性值：

normal：默认值
bold：粗体
bolder：相对于normal字体较粗
lighter：相对于normal字体较细
100：最细
200
300
400：等于normal
500：接近bolder
600
700：相对于bold
800
900：最粗对于网页设计来说，一般仅用到bold（加粗）、normal（普通）两个属性。

定义斜体字体

CSS中使用font-style属性来定义字体倾斜效果，它可以有以下这些取值：

normal：默认值，表示正常字体
italic：表示斜体，会首先尝试使用倾斜字体，如果没有则倾斜普通字体来模拟斜体效果。
oblique：表示倾斜字体，对普通字体进行倾斜来模拟斜体效果。

定义字体下划线

CSS中使用text-decoration属性来定义字体下划线效果，该属性有如下取值，可以同时取多个值：

none：默认值，无下划线。
underline：下划线效果。
blink：闪烁效果。
overline：上划线效果。
line-throuth：贯穿效果。

定义字体大小写效果

CSS中使用font-variant属性来定义字体大小效果，该属性只指对西方字体有效，其有如下属性值：

normal：默认值，即正常字体。
small-caps：表示小型的大写字母字体。

css中还有一个text-transform属性，该属性也能够定义字体大小写效果，不过该属性主要定义单词大小写样式，其有如下属性值：

none：默认值
capitalize：表示将每个单子的第一个字母转换成大写，其余无转换。
uppercase：表示把所有字母转换成大写。
lowercase：表示把所有字母转换成小写。

定义文本样式

文本样式主要涉及多个字符得排版效果。在css中，text前缀主要为文本样式属性。

text-align：定义文本水平对齐方式。
vertical-align：定义文本垂直对齐方式。
letter-spacing：定义字距
word-spacing：定义词距
line-height：定义行高
text-indent：定义首行缩进
text-shadow：定义文本阴影
text-overflow：定义文本溢出时的显示效果
line-break：控制文本中的换行行为
word-break：可以用于控制是否允许长单词或URL换行到下一行。
word-wrap：可以用于控制是否允许长单词或URL换行到下一行。
white-space：该属性具有格式化文本作用，用于控制文本空白的处理方式。
content：为指定元素添加内容。

定义文本水平对齐

css使用text-align属性来定义文本得水平对齐方式，其有如下取值：

left：默认值，左对齐。
right：右对齐。
center：剧中对齐。
justify：两端对齐。
start：
end：
match-parent：
justify-all：

html

<p style="text-align: left;">left</p>
<p style="text-align: center;">center</p>
<p style="text-align: right;">right</p>
<p style="text-align: justify;">justify</p>

定义文本垂直对齐

CSS使用vertical-align属性来定义文本垂直对齐的问题，其有如下取值：

auto：根据layout-flow属性的值对齐对象内容。
baseline：默认值，表示将支持valign特性的对象内容与基线对齐。
sub：表示垂直对齐文本的下标。
super：表示垂直对齐文本的上标。
top：表示将支持valign特性的对象的内容对象顶端对齐。
text-top：表示将支持valign特性的对象的文本与对象顶端对齐。
middle：表示将支持valign特性的对象的内容与对象中部对齐。
bottom：表示将支持valign特性的对象的内容与对象底部对齐。
text-bottom：表示将支持valign特性的对象的文本与对象底部对齐。
length：通过浮点数字和单位标识符组成的长度值或百分数，可以是负数。定义由基线算起的偏移量，基础数值为0或0%。一般的网页开发中，主要用到垂直居中，偶尔用到上标或下标效果。

定义字距或词距

属性

letter-spacing：定义字距
word-spacing：定义词距。

属性值

这两个属性的取值都是长度值，由浮点数和单位标识符组成。
默认值为normal，它标识默认间隔。
使用word-spacing定义词距时，以空格为基准进行调节。
使用word-spacing时，用空格分隔开的汉字视为不同的单词。

html

<p style="letter-spacing: 10px;">字距字距字距</p>
<p style="word-spacing: 20px;">词距 词距 词距</p>

在实际的开发中，字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受。

定义行高

行高也即使行距，是段落文本行与文本行之间的距离。在css中，使用line-height属性定义行高，该属性又如下取值：

normal：默认值，一般为1.2em。
length：表示百分比数字，或由浮点数和单位表示符组成的长度值，允许为负值。

行高单位一般使用em或百分比，不建议使用像素。一般行高的最佳设置范围为1.2em~1.8em。遵循字体越大，行高越小的原则进行设置。

line-height具有继承性。在继承时，如果父元素的line-height附加了单位em，则子元素继承时会先把它转换为精确值px后再继承。因此建议使用百分比去设置父元素，这样子元素可以完整继承百分比值，并用百分比值乘上字体大小计算出具体行高。

定义首行缩进

CSS中使用text-indent属性定义首行缩进。

该属性接受一个length属性值，该属性值可以是百分比数字，或者是由浮点数和单位标识符组成的长度值，允许为负值。

在设置缩进单位时，以em为设置单位，它表示一个字距。

html

<style>
    p {
        text-indent: 2em;
    }
</style>
<p>这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。这是一段很长的文字。</p>

定义文本阴影

在css中使用text-shadow属性给页面上的文字添加阴影效果。

text-shadow属性的初始值为none，适用于所有元素，表示没有阴影。

它也可以接受4个参数作为属性值：

length1：第一个长度值用来设置对象的阴影水平偏移值。正值偏右，负值偏左，单位em。
length2：第二个长度值用来设置对象的阴影垂直偏移值。正值偏下，负值偏上，单位em。
length3：第三个长度值用来设置对象的阴影的模糊半径，不允许为负值，单位em，该值可选。
color：设置对象的阴影的颜色。如果没有设置则使用元素color属性的值。

html

<style type="text/css">
    p {
        text-shadow: 0.1em 0.1em 0.2em #000;
    }
</style>
<p>这是一段有阴影的文本</p>

text-shadow属性可以接受一个以逗号分割的阴影效果列表，阴影效果按照给定的顺序应用，因此有可能出现互相覆盖。

阴影文字效果

要定义立体文字，可以在左上、右下添加一个1像素错位的补色阴影。
要定义描边文字，可以在上下左右添加1像素的实体阴影。
定义外发光字体，可以定义阴影模糊显示，而不设置阴影偏移。

定义溢出文本

css3中新增了text-overflow属性，该属性可以设置超长文本省略显示，其有如下取值：

clip：默认值，属性值表示不显示省略标记（...），而是简单的裁切。
ellipsis：属性值表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个字符。
ellipsis-word：属性值表示当对象内文本溢出时显示省略标记(...)，省略标记插入的位置是最后一个词。

html

<style type="text/css">
    p {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<p>这是一段溢出文本。这是一段溢出文本。这是一段溢出文本。这是一段溢出文本。这是一段溢出文本。这是一段溢出文本。这是一段溢出文本。</p>

文本换行

CSS3中使用多个属性定义文本自动换行，有line-break、word-break、word-wrap、white-space。这几个属性的比较如下：

line-break：控制文本中的换行行为。
- auto: 默认值。使用浏览器默认的换行行为。
- loose: 允许在字符之间的任意位置换行。
- normal: 只在允许换行的点处换行，通常在空格或连字符处。
- strict: 只在允许换行的点处换行，不允许在字符之间换行。
word-wrap：可以用于控制是否允许长单词或URL换行到下一行。
- normal：默认值。长单词和URL不会被强制换行，
- break-word：长单词和URL换行到下一行。
word-break：控制是否允许单词内换行。
- normal: 默认值。使用浏览器默认的断词规则。
- break-all: 允许在单词内换行。
- keep-all: 只在允许的点处换行，不允许在单词内换行。
white-space：该属性具有格式化文本作用，用于控制文本空白的处理方式。
- normal：默认值。空白符会被合并，换行符会被当作空白处理。
- nowrap：表示强制在同一行内显示所有文本。
- pre：表示显示预定义文本格式，空白符、换行符会被保留。
- pre-wrap：保留空白符，但是允许文本换行。
- pre-line：合并多个空白符，但允许文本换行。

添加动态内容

content属性能够为指定元素添加内容，适用于所有可用元素，主要用于伪类元素上。其有如下取值：

normal：默认值，不插入任务内容。
string：插入文本内容。
attr()：插入元素的属性值。
uri()：插入一个外部资源，如图像、音频、视频或浏览器支持的其他任何资源。
counter()：计数器，用于插入排序标识。
none：无任何内容。

恢复默认样式

CSS3中新增了一个initial属性值，使用这个属性值可以直接将某个属性恢复为默认样式。

CSS美化图像

网页中图像存在两种形式：

使用<img>标签直接插入的图像。直接插入的图像多用来传递多媒体信息，图像会作为文档的内在对象显示。
以背景background的形式显示的图像。背景图多用来装饰网页、设计网页效果。

网页图像格式

网页图像常用格式只有3种：GIF、JPEG、PNG。其中GIF和JPEG图像格式在网上使用最广，且能够支持所有浏览器。三种图像格式的特点如下：

GIF图像
- 跨平台，兼容性好
- 最多显示颜色256色，拥有极度压缩文件的能力，无损压缩。
- 支持背景透明
- 可用存储多张图像，并能动态显示它们。
JPEG图像
- 采用有损压缩，压缩过程中会忽略某些细节，但一般看不出来。
- 跨平台，兼容性好
- 支持1670万种颜色
- 不支持背景透明和交错显示功能
PNG图像
- 采用无损压缩
- 支持1670万种颜色
- 支持索引色、灰度、真彩色图像以及Alpha透明通道

设置图像样式

css提供了大量的属性来定义css样式，常用的如下：

width：定义图像宽度
height：定义图像高度
border：定义图像边框整体样式
border-style：定义图像边框样式
border-width：定义图像边框宽度
border-color：定义图像边框颜色
opacity：定义图像透明度
border-radius：定义图像圆角
box-shadow：定义图像阴影
float：定义图像浮动效果

定义图像大小

<img>标签中包含width和height属性，使用它们可以控制图像的大小。不过更推荐使用css中的width和height属性，这样可以实现结构和表现相分离。

html

<style type="text/css">
    img {
        width: 50%;
        height: 50%;
    }
</style>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu">

定义图像边距

css中使用border属性统一定义图像的边框样式，属性值顺序为边框样式、边框宽度、边框颜色。

html

<style type="text/css">
    img {
        width: 50%;
        border: dotted 2px red;
    }
</style>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu" />

也可以使用border开头的属性定义具体样式，包括以下这些属性：

border-style：定义边框样式，包括虚线框和实线框。
border-color：定义边框颜色
border-width：定义边框的粗细

清除边框

默认状态下元素的边框为none，边框默认宽度为2-3px。设置为none时可以清除边框，同时会使边框颜色和边框宽度等样式失效。

html

<style type="text/css">
    img {
        /* 清除图像边框 */
        border: none;
    }
</style>

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

边框样式

CSS中使用border-style属性来定义边框样式，其有以下取值：

虚线框
- dotted：点线
- dashed：虚线
实线框
- solid：实线
- double：双线
- groove：立体凹槽
- ridge：立体凸槽
- inset：立体凹边
- outset：立体凸边

如果要定义某边边框样式，可使用如下属性：

border-top-style（顶部边框样式）
border-right-style（右侧边框样式）
border-bottom-style（底部边框样式）
border-left-style（左侧边框样式）

html

<style type="text/css">
    img {
        border-top-style: dotted;
        border-left-style: dashed;
        border-right-style: double;
        border-bottom-style: groove;
    }
</style>

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

也可以使用border-stype一次性定义各边的样式，以顶边为开始，顺时针旋转，顺序是：顶边、右边、底边、左边。

html

<style type="text/css">
    img {
        width: 50%;
        border-style: groove double dashed dotted;
    }
</style>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

边框颜色

在CSS中使用border-color属性来定义边框的颜色，颜色取值可以是任何有效的颜色表示法。

如果要定义某边边框颜色，可使用如下属性：

border-top-color（顶部边框颜色）
border-right-color（右侧边框颜色）
border-bottom-color（底部边框颜色）
border-left-color（左侧边框颜色）

html

<style type="text/css">
    img.baidu1 {
        width: 50%;
        border-style: solid;
        border-top-color: red;
        border-left-color: blue;
        border-right-color: green;
        border-bottom-color: purple;
    }

    img.baidu2 {
        width: 50%;
        border-style: solid;
        border-style: red blue green purple;
    }
</style>

<img class="baidu1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>
<p></p>
<img class="baidu2" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

边框宽度

在CSS中使用border-width定义边框的粗细，取值可以是任务长度单位，但不能使用百分比单位。

如果要定义某边边框粗细，可使用如下属性：

border-top-width（顶部边框宽度）
border-right-width（右侧边框宽度）
border-bottom-width（底部边框宽度）
border-left-width（左侧边框宽度）

html

<style type="text/css">
    img.baidu1 {
        width: 50%;
        border-style: solid;
        border-top-width: 1px;
        border-left-width: 2px;
        border-right-width: 3px;
        border-bottom-width: 4px;
    }

    img.baidu2 {
        width: 50%;
        border-style: solid;
        border-width: 1px 2px 3px 4px;
    }
</style>

<img class="baidu1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>
<p></p>
<img class="baidu2" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

定义图像不透明度

在CSS中，使用opacity属性可以设计图像的不透明度。其取值范围为0~1之间，数值越低透明度越高，0为完全透明，1为完成不透明。

opacity属性目前在主流浏览器上都支持，如果要在早期IE浏览器上透明，则需要使用CSS滤镜来定义透明度，用法如下：
css
filter:alpha(opacity=0~100)

html

<style type="text/css">
    img.baidu1 {
        width: 50%;
        opacity: 1;
    }
    img.baidu2 {
        width: 50%;
        opacity: 0.5;
    }
</style>
<img class="baidu1" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>
<img class="baidu2" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu"/>

定义圆角图像

CSS中使用border-radius属性设计圆角样式，其有以下取值：

none：默认值，表示元素没有圆角。
length：由两个数值参数组成。数值参数是浮点数字和单位标识符组成的长度值或百分比，不可为负值。
- 第一个参数表示圆角的水平半径
- 第二个参数表示圆角的垂直半径
- 两个参数使用斜线/分隔。
- 如果仅含一个参数，则第二个参数的值与第一个值相同。
- 值为0时，表示矩形，不显示为圆角。

如果要定义某个顶角的圆角，可使用如下属性：

border-top-right-radius：定义右上角的圆角
border-bottom-right-radius：定义右下角的圆角
border-bottom--left-radius：定义左下角的圆角
border-top-left-radius：定义左上角的圆角

html

<style type="text/css">
    img {
        width: 50%;
        border-radius: 50%;
    }
</style>

<img src="http://pic1.win4000.com/wallpaper/0/57c94aa288c49.jpg" alt="baidu"/>

定义阴影图像

css中使用box-shadow属性定义图像阴影效果，该属性也适用于所有元素。其有如下取值：

none：默认值，表示元素没有阴影。
shadow：该属性包含多个参数以表示阴影的效果。
- 第一个参数：可选。不填时默认表示外阴影，inset表示内阴影。
- 第二个参数：第二个参数由多个值组成，可以是由浮点数和单位标识符组成的长度值，可取正负值，分别表示：
  - 阴影水平偏移，必须
  - 阴影垂直偏移，必须
  - 阴影大小（即阴阳模糊度），可选
  - 阴影拓展，可选
- 第三个参数：color表示阴影颜色，默认为黑色实影。

html

<style type="text/css">
    img {
        width: 50%;
        box-shadow: 1px 1px 10px #888;
    }
</style>

<img src="http://pic1.win4000.com/wallpaper/0/57c94aa288c49.jpg" alt="baidu" />

图文混插

使用float属性，使图片产生浮动效果。

html

<style type="text/css">
    img {
        width: 50%;
        box-shadow: 1px 1px 10px #888;
        float: left;
        margin-right: 20px;
    }
</style>

<img src="http://pic1.win4000.com/wallpaper/0/57c94aa288c49.jpg" alt="baidu" />
<p>这是一段文字</p>

设置背景图像

CSS中使用background属性设置背景图像，允许在同一个元素内叠加多个背景图像。

background是一个复合属性，可以一次声明背景图像的多个属性值，每个属性值不分先后顺序。

另外，background在指定背景图像的同时可以指定颜色值，这样当背景图像没有完全覆盖所有区域或背景图像失效时，则会自动显示指定颜色。

CSS也提供了多个background开头的子属性，用于更精准控制背景图像样式，包括：

background-image：定义背景图像
background-color：定义背景颜色
background-repeat：设置背景图像是否及如何重复铺排
background-position：设置背景图像的位置
background-attachment：定义背景图像的显示方式
background-origin：指定背景的显示区域，设置背景的坐标原点位置。
background-clip：指定背景的裁剪区域
background-size：定义背景图片的大小

定义背景图像

在CSS中使用background-image属性来定义背景图像，其属性值如下：

none：默认值，表示无背景图。
url：表示使用绝对或相对地址指定背景图像。图像可以是任意类型，一般为GIF、JPG、PNG。

html

<style type="text/css">
    p {
        background-image: url(http://pic1.win4000.com/wallpaper/0/57c94aa288c49.jpg);
        height: 50%;
    }
</style>
<p>这是一段有背景图像的文字。</p>

background-image也支持设置渐变背景，取值如下：

linear-gradient：使用线性渐变创建背景图像
- 第一个参数设置渐变方向，取以下值:
  - to top
  - to bottom
  - to left
  - to right
- 第二个参数设置角度，可选
- 第三个参数设置开始颜色
- 第四个参数设置终止颜色
radial-gradient：使用径向（放射性）渐变创建背景图像
repeating-linear-gradient：使用重复的线性渐变创建背景图像
repeating-radial-gradient：使用重复的径向（放射性）渐变创建背景图像。

定义背景图像显示方式

CSS中使用background-repeat属性控制背景图像的显示方式，其有如下取值：

repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向上平铺，默认值
no-repeat：背景图像不平铺
round：背景图像自动缩放知道适应且填充满整个容器，仅CSS3支持。
space：背景图像以相同的间距平铺且填充满整个容器或某个方向，仅CSS3支持。

html

<style type="text/css">
    p {
        background-image: url(http://pic1.win4000.com/wallpaper/0/57c94aa288c49.jpg);
        height: 50%;
        width: 50%;
        background-repeat: no-repeat;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义背景图像显示位置

在默认情况下，背景图像显示在元素的左上角。为了更好地控制背景图像的显示位置，CSS提供了background-position属性来确定背景图像的位置。

background-position属性取值包括两个值，分别用于定位背景图像的x轴、y轴坐标。可以是top、bottom、left、right、center、百分比、长度。默认值为0% 0%，等效于left top。

x轴坐标=(包含框宽度-图片宽度)*百分比值
y轴坐标=(包含框高度-图片高度)*百分比值

html

<style type="text/css">
    p {
        background-image: url(./rfdynq.ico);
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: bottom right;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义固定背景

一般情况下，背景图像会跟随网页内容整体上下滚动。如需要定义固定的图像，如水印或者窗口背景等图，则需要使用background-attachment属性。

background-attachment属性能够固定背景图像始终显示在浏览器窗口的某个固定位置。

backgroud-attachment有如下属性值：

scroll：默认值。背景图像会随着元素内容的滚动而滚动。
fixed：背景图像固定在浏览器视口的某个位置，不随页面滚动而滚动。
local：背景图像会随着元素内容的滚动而滚动，但不会超过元素的边界。当元素有滚动条时，背景图像会在滚动条之后停止滚动。

html

<style type="text/css">
    p {
        background-image: url(./rfdynq.ico);
        height: 100%;
        width: 200%;
        background-repeat: no-repeat;
        background-position: right top;
        background-attachment: fixed;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义背景图像坐标

CSS3中新增background-origin属性，用于定义背景图像的坐标原点的位置，其有如下取值：

padding-box：默认值，从补白区域开始显示背景。
border-box：从边框区域开始显示背景。
content-box：仅在内容区域显示背景。

html

<style type="text/css">
    p {
        background-image: url(./rfdynq.ico);
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: left top;
        background-origin: padding-box;
        border-width: 20px;
        border-style: solid;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义背景图像的裁剪区域

background-clip属性定义背景图像的裁剪区域，其有以下取值：

border-box：默认值，从边框区域向外裁剪背景
padding-box：从补白区域向外裁剪背景
content-box：从内容区域向外裁剪背景
text：从前景内容（如文字）区域向外裁剪背景

html

<style type="text/css">
    /* 设置背景图的定位点在边框上，设置背景图的显示区域在内容盒子内，这样会使背景图左上角部分被裁剪 */
    p {
        background-image: url(./rfdynq.ico);
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: left top;
        background-origin: border-box;
        background-clip: content-box;
        border-width: 20px;
        border-style: solid;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义背景图像的大小

CSS3中新增了background-size属性用于控制背景图像的大小，其有以下取值：

auto：初始值，适用于所有元素，图像保持原始尺寸，不压缩不拉伸。
length：由浮点数和单位标识符组成的长度值，不可为负值。
百分比数：取值为0%~100%之间的值，不可为负值。
cover：保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域。
contain：图像本身保持宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域，容器包含图像，容器内可能会有留白。

该属性可以设置1个或2个值。第一个值为必填，用于指定背景图像的width。第二个值为可选，用于指定背景图像的height。如果只设置第一个值，而第二个值默认为auto。

HTML

<style type="text/css">
    p {
        background-image: url(./rfdynq.ico);
        height: 100%;
        width: 200%;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: contain;
    }
</style>
<p>这是一段有背景图像的文字。</p>

定义背景图像循环方式

在CSS3中，可以使用background-break属性定义平铺内联元素背景图像时的循环方式，该属性有如下取值：

bounding-box：默认值，背景图像在整个内联元素中进行平铺
each-box：背景图像在每一行中进行平铺
continuou：下一行中的图像紧接着上一行中的图像继续平铺。

该属性目前尽在firefox得到支持。

定义多背景图

在CSS3中，background-image属性支持一次定义多个背景图，只需要使用逗号,分隔开即可。浏览器渲染图像文件时，按从上往下得原则叠放图像。即第一个图像文件放在最上面，最后指定的图像文件方在最下面。

定义渐变背景

定义渐变的方式有多种，不用引擎的设计方式不一样：

Webkit引擎：使用webkit-gradient设计渐变效果
Gecko引擎：使用-moz-linear-gradient设计渐变效果
W3C标准：使用linear-gradient设计渐变效果

CSS美化超链接

在网页设计中，超链接得默认样式为，未点击前为蓝色字体加下划线，访问之后字体为紫色。

在网页设计中，对超链接的样式设计，一般使用伪类进行设计，如下是一些对超链接进行样式设计比较常用的伪类：

link：设置超链接未杯访问前的样式。
visited：设置超链接a在其链接地址已被访问过后的样式。
hover：设置鼠标在元素上悬停时的样式。
active：设置元素在被用户激活时的样式，即鼠标点击与释放之间的样式。
focus：设置元素在成为输入焦点时的样式，即触发onfocus事件时的样式。

需要注意的是，定义超链接的4种状态的样式时，需要按照顺序定义，不能调换顺序，顺序为：link、visited、hover、active。

html

<style type="text/css">
    a:link {
        /* 未访问时黑色 */
        color: #000000;
    }

    a:visited {
        /* 访问后绿色 */
        color: #00FF00;
    }

    a:hover {
        /* 鼠标悬停时红色 */
        color: #FF0000;
    }

    a:active {
        /* 点击时蓝色 */
        color: #0000FF;
    }
</style>
<a href="https://www.baidu.com">百度</a>

定义超链接下划线样式

CSS中使用text-decoration属性，定义超链接的下划线效果，其有以下取值：

none：清除超链接的下划线效果
underline：显示下划线效果，默认值。

html

<style type="text/css">
    a{
        /* 普通状态下没有下划线 */
        text-decoration: none;
    }
    a:hover {
        /* 鼠标悬停在上方时添加下划线 */
        text-decoration: underline;
    }
</style>
<a href="https://www.baidu.com">百度</a>

定义超链接立体样式

立体样式的设计技巧是借助边框样式的变化（主要是颜色的深浅变化）来模拟一种凹凸变化的立体效果。使用以下这些属性去定义：

border-left：左边框
border-right：右边框
border-bottom：下边框
border-top：上边框要设计立体效果，一般遵循以下几点方法：

利用边框线的颜色变化来制造视觉错觉。把右边框和底部边框结合，把顶部边框和左边框结合，利用明暗色彩的搭配来设计立体变化效果。
利用超链接背景色的变化来营造凹凸变化的效果。超链接背景色设置为相对深色效果，以营造凸起的效果。当数变悬停时，定义浅色背景来营造凹下效果。
利用环境色、字体颜色来烘托立体变化过程。

html

<style type="text/css">
    a{
        text-decoration: none;
    }
    a:hover {
        background-color: bisque;
    }
</style>
<a href="https://www.baidu.com">百度</a>

定义鼠标样式

在默认状态下鼠标经过超链接时显示为手型，CSS提供了cursor属性可以定义鼠标在指定对象上时的样式，其有以下取值：

auto：基于上下文决定应该显示什么光标，默认值。
crosshair：十字线光标（+）
default：基于平台的默认光标。通过渲染为一个箭头。
pointer：指针光标，表示一个超链接。
move：十字箭头光标，用于标示对象可被移动
e-resize、ne-resize、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize：表示正在移动某个边时的光标。
text：表示可以选择文本，通过渲染为I行光标。
wait：表示程序正忙，需要用户等待，通常渲染为手表或沙漏。
help：光标下的对象包含有帮助内容，通常渲染为一个问号或一个气球。
URL：自定义光标类型的图标路径。IE和Opera仅支持.cur格式的图片。firefox、chrome、safari支持.cur、.jpg、.git、.png等图片格式。

可以定义多个光标类型，使用逗号,分隔开，客户端会按顺序选择光标直到找到可以处理的光标。

html

<style type="text/css">
    a.auto {
        cursor: auto;
    }

    a.crosshair {
        cursor: crosshair;
    }

    a.default {
        cursor: default;
    }

    a.pointer {
        cursor: pointer;
    }

    a.move {
        cursor: move;
    }

    a.e-resize {
        cursor: e-resize;
    }

    a.text {
        cursor: text;
    }

    a.wait {
        cursor: wait;
    }


    a.help {
        cursor: help;
    }

    a.url {
        cursor: url(https://www.baidu.com/img/flexible/logo/pc/result.png);
    }
</style>
<a class="auto" href="https://www.baidu.com">auto</a>
<a class="crosshair" href="https://www.baidu.com">crosshair</a>
<a class="default" href="https://www.baidu.com">default</a>
<a class="pointer" href="https://www.baidu.com">pointer</a>
<a class="move" href="https://www.baidu.com">move</a>
<a class="e-resize" href="https://www.baidu.com">e-resize</a>
<a class="text" href="https://www.baidu.com">text</a>
<a class="wait" href="https://www.baidu.com">wait</a>
<a class="help" href="https://www.baidu.com">help</a>
<a class="url" href="https://www.baidu.com">url</a>

定义超链接背景图像

CSS中使用background-image属性定义超链接的背景图，
使用background-repeat属性防止背景图重复平铺。
使用width、height定义超链接的宽高与背景图像保持一致。也可使用padding属性撑开<a>标签。
使用text-indent属性隐藏超链接中的文本。
使用background-posistion属性定位背景图像在超链接中的显示位置。

CSS美化列表

列表在默认状态下的效果为：左侧附加项目符号，列表项目缩进显示。

CSS为列表结构定义了几个专门属性：

line-style：复核属性，设置列表项目的样式。
list-style-image：设置列表项目的符号图像。
list-style-position：设置列表项目符号的显示位置，根据文本在内或在外排列。取值包括outside|inside。
list-style-type：设置列表项目符号的类型。

设计项目符号类型

CSS中使用list-style-type属性定义列表项目符号的类型，其有如下取值：

disc：实心圆、默认值
circle：空心圆
square：实心方块
decimal：阿拉伯数字
lower-roman：小写罗马数字
upper-roman：大小罗马数字
cjk-ideographic：浅白的表意数字
lower-greek：基本的希腊小写字母
hiragana：日文平假名字符
hiragana-iroha：日文平假名序号
katakana：日文片假名字符
katakana-iroha：日文片假名序号
lower-latin：小写拉丁字母
upper-latin：大写拉丁字母
lower-alpha：小写英文字母
upper-alpha：大写英文字符
armenian：传统的亚美尼亚数字
georgian：传统的乔治数字
hebrew：传统的希伯莱数字
none：不使用项目符号

html

<style type="text/css">
    ul {
        list-style-type: lower-greek;
    }
</style>
<ul>
    <li>第一列</li>
    <li>第二列
        <ul>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ul>
    </li>
    <li>第三列</li>
</ul>

自定义项目符号

CSS中使用list-style-image属性可用自定义列表项目符号，该属性允许指定一个外部图标文件，其取值如下：

none：默认值，不使用项目符号
<url>：指定图标文件的路径。

html

<style type="text/css">
    ul {
        list-style-image: url(./rfdynq.ico);
        list-style-position: inside;
    }
</style>
<ul>
    <li>第一列</li>
    <li>第二列
        <ul>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ul>
    </li>
    <li>第三列</li>
</ul>

设置列表项目符号的显示位置

CSS中使用list-style-position属性来定义项目符号的显示位置，该属性取值包括：

outside：默认值，表示把项目符号显示在列表项目项的文本行依赖
inside：表示把项目符号显示在项目相文本行以内。

html

<style type="text/css">
    ul {
        list-style-position: inside;
    }
</style>
<ul>
    <li>第一列</li>
    <li>第二列
        <ul>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ul>
    </li>
    <li>第三列</li>
</ul>

使用背景图设计项目符号

将列表项目符号类型设置为none，为每一个项目添加背景图，可以达到使用背景图设计项目符号的目的。涉及以下属性：

list-style-type：设置项目符号类型
background-image：设置项目背景图
background-position：设置项目背景图位置
background-repeat：设置项目背景图重复形式

html

<style type="text/css">
    ul {
        list-style-type: none;
    }

    li {
        background-image: url(./rfdynq.ico);
        background-position: left center;
        background-repeat: no-repeat;
        padding-left: 20px;
    }
</style>
<ul>
    <li>第一列</li>
    <li>第二列
        <ul>
            <li>嵌套的第一列</li>
            <li>嵌套的第二列</li>
            <li>嵌套的第三列</li>
        </ul>
    </li>
    <li>第三列</li>
</ul>

CSS美化表格

CSS为表格定义了5格专用属性，分别如下：

border-collapse：定义表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。其有以下取值：
- separate：边分开，默认值。
- collapse：边合并
border-spacing：定义当表格边框独立时（即border-collapse值为separate），行和单元格的边在横向和纵向上的间距，该值不可以取负值。取值为一个值时，表示行间距和列间距都为该值。取值为两个值时，分别表示行间距和列间距。
caption-side：定义表格的caption标题对象位于表格的顶部top还是底部bottom。
empty-cells：定义当单元格无内容时，是否显示该单元格的边框。show时显示，hide时隐藏。（仅适用于border-collapse值为separate时）
table-layout：定义表格的布局算法，可以通过该属性改善表格的呈递性能。
- fixed：会使IE以一次一行的方式呈递表格内容
- auto：默认值。表格在每一个单元格的内容读取计算之后才会显示出来。

定义表格的边框

在CSS中使用属性border和border-collapse定义表格的边框样式。

html

<style type="text/css">
    table {
        border-collapse: collapse;
    }

    th,
    td {
        border-width: 1px;
        border-style: solid;
    }
</style>
<table>
    <tr>
        <td align="center" colspan="4">上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
</table>

定义单元格间距和空隙

CSS中使用border-spacing属性，定义分离单元格之间的间距。

html

<style type="text/css">
    table {
        border-spacing: 2px 4px;
    }

    th,
    td {
        border-width: 1px;
        border-style: solid;
    }
</style>
<table>
    <tr>
        <td align="center" colspan="4">上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
</table>

隐藏单元格

当属性border-collapse值为separate时，使用empty-cells属性可以隐藏没有可视内容的单元格。

html

<style type="text/css">
    table {
        empty-cells: hide;
    }

    th,
    td {
        border-width: 1px;
        border-style: solid;
        width: 25%;
    }
</style>
<table>
    <tr>
        <td align="center" colspan="4">上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td></td>
    </tr>
</table>

定义表格标题样式

CSS中使用：

caption-side：定义标题的显示位置。
text-align：定义标题的水平方向的对齐。
vertical-align：定义标题的垂直方向的对齐。

html

<style type="text/css">
    table {
        caption-side: bottom;
    }
</style>
<table>
    <caption>课程表</caption>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
</table>

表格对象得样式层叠顺序

优先级如下，td拥有最大优先级，table拥有最小优先级

td
tr
thead、tbody、tfoot
col
colgroup
table

设计动态交互特效

配合伪类选择符:hover可以实现鼠标经过时数据行显示不同样式，让用户更容易分辨。

html

<style type="text/css">
    tr:hover {
        background-color: antiquewhite;
    }
</style>
<table>
    <tr>
        <td align="center" colspan="4">上午</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
    </tr>
    <tr>
        <td>政治</td>
        <td>历史</td>
        <td>物理</td>
        <td>化学</td>
    </tr>
</table>

CSS3布局基础

CSS盒模型基础

1996年W3C推出了CSS，规定了页面中所有元素显示形态为方形的盒子（Box），并由此形成了一套严谨的盒子模型（Box Model）。根据这个盒模型的规则，网页中所有元素对象都放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性。

CSS盒模型基本结构示意图

根据CSS盒模型原理，对于任何一个元素来说，它都会包含四区域、四边沿，具体如下:

四区域

边界（外边距）区域（margin）
边框区域（border）
填充（内边距、补白）区域（padding）
内容区域（content）

四边沿

边界边缘（margin）
边框边缘（border）
补白边缘（padding）
内容边缘（content）

定义大小

CSS盒子模型中使用width(宽)和height(高)定义内容区域的大小。

内容区域包括宽度（width）、高度（height）和背景（background），实际上背景能够延伸到补白区域，有些浏览器中背景图像甚至延伸到边框内。所以其内容区域的实际长宽需要加上补白、边框、边界区域。

用户也可以通过下面4个属性灵活控制CSS盒模型的大小，这在弹性布局中非常有用：

min-width：设置对象的最小宽度。
max-width：设置对象的最大宽度。
min-height：设置对象的最小高度。
max-height：设置对象的最大高度。

定义边框

边框样式由CSS的border属性负责定义，border包括3个子属性：

border-style：边框样式
border-color：边框颜色
border-width：边框宽度

定义边框宽度

定义边框宽度的方法有很多种：

直接在属性后面指定宽度值。

css

div {
	border-width:12px;
}

使用关键字，如thin、medium(默认)、thick。不同浏览器解析的宽度值不同，有的解析为5px、3px、2px，有的为3px、2px、1px。

css

div {
	border:thin;
}

单独为某条边设置宽度，可以使用：
- border-top-width：顶边框宽度
- border-right-width：右边框宽度
- border-bottom-width：底边框宽度
- border-left-width：左边框宽度

当定义边框宽度时，必须定义边框的显示样式。因为当边框样式为默认的none时，边框不显示，边框宽度也会自动被清除为0。

定义边框颜色

定义边框颜色可以使用颜色名、RGB颜色值或十六进制颜色值。

也可以单独为某条边设置边框颜色，使用：

border-top-color：顶边框颜色
border-right-color：右边框颜色
border-bottom-color：底边框颜色
border-left-color：左边框颜色

边框默认颜色为前景色，即元素中包含文本的颜色，如果没有文字，则将继承上级元素所包含的文本颜色。

定义边框样式

边框样式时显示边框的基础，CSS提供了以下几种边框样式：

none：默认值，无边框。border-width不生效。
hidden：隐藏边框，IE不支持。
dotted：定义边框为点线。
dashed：定义边框为虚线。
solid：定义边框为实线。
double：定义边框为双线边框，两条线及其间隔宽度之和等于指定的border-width值。
groove：根据border-color值定义3D凹槽。
ridge：根据border-color值定义3D凸槽。
inset：根据border-color值定义3D凹边。
outset：根据border-color值定义3D凸边。

html

<style type="text/css">
    .none {
        border-style: none;
    }

    .hidden {
        border-style: hidden;
    }

    .dotted {
        border-style: dotted;
    }

    .dashed {
        border-style: dashed;
    }

    .solid {
        border-style: solid;
    }

    .double {
        border-style: double;
    }

    .groove {
        border-style: groove;
        border-color: aqua;
    }

    .ridge {
        border-style: ridge;
        border-color: red;
    }

    .inset {
        border-style: inset;
        border-color: blue;
    }

    .outset {
        border-style: outset;
        border-color: green;
    }
</style>
<p class="none">none</p>
<p class="hidden">hidden</p>
<p class="dotted">dotted</p>
<p class="dashed">dashed</p>
<p class="solid">solid</p>
<p class="double">double</p>
<p class="groove">groove</p>
<p class="ridge">ridge</p>
<p class="inset">inset</p>
<p class="outset">outset</p>

定义边框边界

元素的边距由CSS的margin属性控制，margin定义了元素与其他相邻元素的距离。

margin有4个子属性，用于定义各边界距离：

margin-top：顶部边界
margin-right：右侧边界
margin-bottom：底部边界
margin-left：左侧边界

为了提高代码编写效率，CSS提供了边界定义的简写方式

如果4个边界相同，则直接使用margin属性定义，设置一个值即可。
如果4个边界不同，则需要定义4个值，4个值用空格进行分隔。代表边的顺序是顶部、右侧、底部和左侧，即顺时针方向。

如果某边没有定义大小，则可以使用auto（自动）关键字进行替代。

margin也可以取负值，这样能够强迫元素偏移原来位置，实现相对定位功能。

html

<style type="text/css">
    p {
        margin-bottom: 5px;
        border-width: 1px;
        border-style: solid;
    }
</style>
<p>这是一行文字</p>
<p>这是一行文字</p>
<p>这是一行文字</p>

定义边框补白

补白是用来调整元素包含的内容与元素边框的距离，由padding属性定义。

padding属性与margin属性一样，也有4个子属性用于定义各边补白：

padding-top：上补白
padding-right：右补白
padding-bottom：下补白
padding-left：左补白

padding与margin不同的是，补白取值部能为负。

补白和边界一样都是透明的，只有设置了背景色或边框后，才能感觉到补白的存在。

html

<style type="text/css">
    p {
        padding: 5px;
        border-width: 1px;
        border-style: solid;
        background-color: red;
    }
</style>
<p>这是一行文字</p>
<p>这是一行文字</p>
<p>这是一行文字</p>

边框、边界、补白的常规开发

补白、边界、边框都是可选的，并不是每个元素都必须全部设置。在CSS中它们的默认值均为0。但在部分浏览器中，某些元素会被预定义一些样式。这些预定义样式包含了补白、边界、边框等。因此为了快速开发，可以在页面设计之初，使用通配选择符清除所有元素的补白和边界样式。

css

* {/*清除所有元素的预定义样式*/
	margin:0;
	padding:0;
}

CSS3的盒模型

CSS3改善了传统盒模型结果，增强盒子构成要素的功能，拓展了盒模型显示方式。

改善结构：CSS3为盒子模型新增了轮廓区。
增强功能：增强内容溢出、换行处理。允许定义多重背景图、控制背景图显示方式。增加背景图边框、多重边框、圆角边框等功能。
扩展显示：完善块显示特性，增加弹性、伸缩盒显示功能，丰富网页布局手段。

定义盒子显示方式

CSS3对盒模型进行了改善，定义了box-sizing属性，该属性能够事先定义盒模型的尺寸解析方式。

box-sizing属性其有如下取值：

content-box：该属性值将维持CSS2.1盒模型的组成模式，即元素width/height=border+padding+content。
border-box：该属性值重新定义CSS2.1盒模型组成模式，即元素width/height=content。
inherit：继承父元素的属性。

定义元素尺寸大小

在CSS3中增加了一个重要的属性resize，它允许用户通过拖动的方式改变元素的尺寸，主要用于使用overflow属性的任何容器元素中。

resize属性有如下取值：

none：默认值。不提供尺寸调整机制，用户不能操作机制调节元素的尺寸。
both：提供双向尺寸调整机制。允许用户调节元素的宽度和高度。
horizontal：提供水平尺寸调整机制。允许用户调节元素的宽度。
vertical：提供垂直尺寸调整机制。允许用户调节元素的高度。
inherit：继承父元素的属性。

html

<style type="text/css">
    .resize {
        background-image: url("./rfdynq.ico");
        resize: both;
        height: 50%;
        width: 50%;
        background-repeat: no-repeat;
        overflow: auto;
        border-style: solid;
    }
</style>
<div class="resize"></div>

溢出处理

overflow属性定义当一个块级元素的内容溢出了元素的框时，是否剪切显示。

CSS3中新增了overflow-x属性定义水平方向的剪切；overflow-y属性定义垂直方向的剪切。

该属性有如下取值：

visible：默认值。不剪切内容，也不添加滚动条。元素将被设置为包含对象的窗口大小，且clip属性设置将失效。
auto：在需要时剪切内容并添加滚动条。其为body和textarea元素的默认属性值。
hidden：不显示超出元素尺寸的内容。
scroll：当内容超出元素尺寸，则显示滚动条。
no-display：当内容查出元素尺寸，则不显示元素。
no-content：当内容超出元素尺寸，则不显示内容。

html

<style type="text/css">
    .overflow-visible {
        border-style: solid;
        overflow: visible;
    }

    .overflow-auto {
        border-style: solid;
        overflow: auto;
        height: 20px;
    }

    .overflow-hidden {
        border-style: solid;
        overflow: hidden;
        height: 20px;
    }

    .overflow-scroll {
        border-style: solid;
        overflow: scroll;
        height: 30px;
        width: 100px;
    }

    .overflow-no-display {
        border-style: solid;
        overflow: no-display;
        width: 200px;
        height: 100px;
    }

    .overflow-no-content {
        border-style: solid;
        overflow: no-content;
        width: 300px;
        height: 10px;
    }
</style>
<div class="overflow-visible">
    overflow-visible!overflow-visible!overflow-visible!overflow-visible!overflow-visible!</div>
<div class="overflow-auto">
    overflow-auto!overflow-auto!overflow-auto!overflow-auto!overflow-auto!</div>
<div class="overflow-hidden">
    overflow-hidden!overflow-hidden!overflow-hidden!overflow-hidden!overflow-hidden!</div>
<div class="overflow-scroll">
    overflow-scroll!overflow-scroll!overflow-scroll!overflow-scroll!overflow-scroll!</div>
<div class="overflow-no-display">
    overflow-no-display!overflow-no-display!overflow-no-display!overflow-no-display!overflow-no-display!</div>
<div class="overflow-no-content">
    overflow-no-content!overflow-no-content!overflow-no-content!overflow-no-content!overflow-no-content!</div>

定义轮廓

outline属性可以定义块元素的轮廓线，在元素周围绘制的轮廓线，可以起到突出元素的作用。

outline属性的基本语法如下：

css

outline:[outline-color]||[outline-style]||[outline-width]||[outlineoffset]|inherit

其中：

outline-color：用于定义轮廓线的颜色
- invert：默认值，执行颜色反转。可以确保轮廓线在不同的背景颜色中都是可见的。
- <color>：定义颜色值
- inherit：继承父元素的值
outline-style：用于定义轮廓线的样式。
- none：初始值为none，不显示。
- auto：根据浏览器自动设置
- <border-style>：沿用边框样式。如：none、dotted、dashed、solid、double、groove、ridge、inset、outset。
- inherit：继承父元素的值
outline-width：用于定义轮廓线的宽度。只有当轮廓样式不为none时才生效。
- thin：定义细轮廓
- medium：定义中等轮廓
- thick：定义粗轮廓
- <length>：定义轮廓粗细的值
- inherit：继承父元素的值
outline-offset：用于定义轮廓线的偏移位置的数值
- 通过设置偏移数值可以放大轮廓框
inherit：定义为继承父元素的值。

html

<head>
    <meta charset="UTF-8" />
    <title>test title</title>
</head>
<style type="text/css">
    .text:hover {
        outline-color: aqua;
        outline-width: 1px;
        outline-style: solid;
    }

    .text:focus {
        outline-color: red;
        outline-width: 1px;
        outline-style: solid;
    }
</style>
<input class="text" type="text" name="text" id="text" placeholder="提示文本" />

定义多色边框

CSS3中对border-color属性进行了增强，可以定义多色边框。

多色边框的规则

当边框宽度为n像素时，border-color也设置了n个颜色值，那么就可以在边框上使用n种颜色，每种颜色显示1像素的宽度。
当边框宽度是10像素时，border-color设置了5个颜色值，则最后一个颜色将被添加到剩下的宽度。

需要注意的时，多色边框还没有得到各大主流浏览器的支持。

定义边框背景

CSS3增加了border-image属性，来模拟background-image属性的功能，功能更加强大。

border-image的用法如下：

css

border-image:none|<image>|[<number>|<percentage>]{1,4}[/<border-width>{1,4}]

取值说明如下：

none：默认值，表示边框无背景图。
<image>：使用绝对或相对路径指定边框的背景图像。
<number>：使用固定像素值表示边框宽度或背景图像大小。
<percentage>：使用百分比表示边框背景图像大小。

border-image还派生出多个子属性，用来定义特定方位上边框的背景图像：

border-top-image：定义上边框背景图像
borde-right-image：定义右边框背景图像
border-bottom-image：定义下边框背景图像
border-left-image：定义左边框背景图像
border-top-left-image：定义左上角背景图像
border-top-right-image：定义右上角背景图像
border-bottom-left-image：定义左下角背景图像
border-bottom-right-image：定义右下角背景图像
border-image-source：定义边框背景图像源，即URL
border-image-slice：定义如何裁切背景图像
border-image-repeat：定义背景图像重复性
border-image-width：与border-width功能相同。
border-image-outset：定义边框背景图像的偏移位置。

border-image-slice属性值包含3个参数

第一个参数表示顶部裁切值
第二个参数表示左右两侧裁切值
第三个参数表示底部裁切值

CSS盒模型的其他规则

行内元素边框

根据盒模型基本规则，任何元素都可以定义边框，但行内元素的边框显示效果有点特殊。

行内元素的上下边框高度不会影像行高，而且不受段落和行高的约束。也即是上下边框若太宽则会覆盖上下方的元素。
行内元素的左右边框宽度会挤占左右相邻文本的位置，而不是压住左右两侧文本。左右边框会跟随文本流字有移动，移动时会紧跟行内元素前后，且不会出现断行现象，也就是说单个边框不会被分开显示在2行内。

html

<style type="text/css">
    span.top-bottom {
        border-style: solid;
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 0px;
        border-right-width: 0px;
    }

    span.left-right {
        border-style: solid;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 10px;
        border-right-width: 10px;
    }

    p {
        width: 50%;
    }
</style>
<p>这是一段很长的文字！这是一段很长的文字！<span class="top-bottom">其中有一段行内文字！</span>这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！</p>
<p>这是一段很长的文字！这是一段很长的文字！<span class="left-right">其中有一段行内文字！</span>这是一段很长的文字！这是一段很长的文字！这是一段很长的文字！</p>

网页元素居中

auto是一个自动计算的值，这个值一般为0，也可以为其他值，主要由浏览器确定。

auto有一个重要作用就是实现元素居中显示，当给margin-left和margin-right属性同时设置为auto值时，可以实现块状元素居中显示。

html

<style type="text/css">
    div {
        border: solid 1px black;
        margin: 50 auto;
        height: 50%;
        width: 50%;
    }
</style>
<div><span>这是一个要居中显示的块</span></div>

弹性页面

margin边界可以设置为百分比，百分比取值时根据父元素宽度来计算的。使用百分比的好处时能够使页面自适应窗口大小，并能够及时调整边界宽度。

边界重叠现象

在网页排版中，通过margin可以调整元素之间的间距，但是元素之间可能会发生重叠，进而影响布局效果，使用时应该小心。

常见的情况如下：

边界重叠只发生在块状元素，且只是垂直相邻边界才会发生重叠。
边界重叠时，两个边界中最小的那边将被覆盖。
重叠只应用于边界，而补白和边框不会出现重叠。

CSS实现浮动布局

浮动布局不同于流动模式，它能够让对象脱离左右相邻元素，在包含框内向左或右侧浮动显示，但是浮动元素不能脱离文档流，依然受文档流的影响。

定义浮动布局

在默认情况下任何元素都不具有浮动特性，可以使用CSS的float属性定义元素的向左或向右浮动，基本用法如下：

html

float: none|left|right

none：表示消除浮动。
left：表示元素向左浮动。
right：表示元素向右浮动。

html

<style type="text/css">
    div#float {
        float: left;
    }
</style>
<div>
    <div id="float">
        <img src="./rfdynq.ico" alt="图片1">
    </div>
    <div>
        <img src="./rfdynq.ico" alt="图片2">
    </div>
</div>

浮动布局具有如下几个特征：

浮动元素以块状显示，可以定义width和height属性。
- 浮动元素应明确定义大小，如果浮动元素没有定义宽度和高度，它会自动收缩到仅能包住内容为止。
- 当块状元素没有定义宽度时，则会自动显示为100%。
浮动元素与流动元素可以混合使用，浮动元素不会被重叠，都遵循先上后下显示规则，都受到文档流显示。但浮动元素能够改变相邻元素的显示位置，可以向左或向右并列显示。
浮动元素仅能改变水平显示方式，不能改变垂直显示方式，依然受文档流影响。流动元素总会以流动的形式环绕浮动元素左右显示。
浮动元素可以并列显示，如果包含框不够，则会错行显示。

清除浮动

在CSS中使用clear属性清除浮动，以定义与浮动元素相邻的元素在必要的情况下换行显示。

清除浮动元素不是清除元素自身，而是将当前元素设置为不允许与某个方向的浮动元素并列显示，并把当前元素清除到下一行显示。

clear属性其有如下取值：

left：清除左边的浮动元素，如果左边存在浮动元素，则当前元素会换行显示。
right：清除右边的浮动元素，如果右边存在浮动元素，则当前元素会换行显示。
both：清除左右两边浮动元素，不管那边存在浮动对象，则当前元素都会换行显示。
none：默认值，允许两边都可以存在浮动元素，当前元素不会主动换行显示。

html

<style type="text/css">
    div#float {
        float: left;
    }
    div#clear {
        clear: left;
    }
</style>
<div>
    <div id="float">
        <img src="./rfdynq.ico" alt="图片1">
    </div>
    <div id="clear">
        <img src="./rfdynq.ico" alt="图片2">
    </div>
</div>

如上面示列，第二个div的左边存在浮动元素，因此第二div换行显示。

浮动嵌套

浮动元素可以互相嵌套，嵌套规律与流动元素嵌套相同。浮动的父元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。

需要注意的是，如果把浮动元素嵌入流动元素之内，则父元素不能够自适应子浮动元素的高度，可能会导致父元素不能正确显示。比如父元素设置了背景颜色但没有显示。需要额外增加一个清除元素。

html

<style type="text/css">
    #contain{
        background-color: #FF99FF;
    }
    #span1{
        float: left;
        border: solid 1px black;
    }
    #span2{
        float:left;
        border: solid 1px black;
    }
    #div1{
        clear: left;
    }
</style>
<div id="contain">
    <span id="span1">span元素浮动</span>
    <span id="span2">span元素浮动</span>
    <div id="div1"></span>
</div>

混合浮动和流动布局

使用浮动布局和流动布局实现左右栏目。

html

<style type="text/css">
    #contain {
        border: solid 1px #000000;
    }
    img {
        float: left;
        clear: left;
        margin-right: 10px;
    }
</style>
<div id="contain">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <h1>文章标题</h1>
    <p>文章段落</p>
    <div style="clear: both;"></div>
</div>

2. 使用浮动布局和流动布局实现导航栏。

html

<style type="text/css">
    #contain {
        border: solid 1px #000000;
    }
    img {
        float: left;
        clear: left;
        margin-right: 10px;
    }
    #nav {
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }
    #nav li{
        float: left;
        background-color: aqua;
        border: 1px solid #000000;
        height: 30px;
        width: 100px;
        text-align: center;
    }
    #nav li a {
        text-decoration: none;
    }
</style>
<ul id="nav">
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
    <li><a href="#">导航4</a></li>
    <li><a href="#">导航5</a></li>
    <div style="clear: both;"></div>
</ul>
<div id="contain">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <img src="./rfdynq.ico" alt="图片">
    <h1>文章标题</h1>
    <p>文章段落</p>
    <div style="clear: both;"></div>
</div>

CSS实现定位显示布局

定位显示布局允许用户精确定义网页元素的显示位置，可以是绝对位置，也可以是相对位置。

定义定位显示

在css中通过position属性定义元素定位显示，其语法如下：

css

postion:static|relative|absolute|fixed

static：默认值。表示不定位，元素遵循HTML默认的流动模型，如果未显式声明元素的定位类型，则默认为该值。
absolute：表示绝对定位，将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父定位包含框进行绝对定位。如果不存在这样的定位包含框，则相对于浏览器窗口，其层叠顺序则通过z-index属性来定义。（绝对于别人）
fixed：表示固定定位，与absolute定位类型类似，但它的定位包含框是视图本身即浏览器窗口的屏幕位置。因此固定定位的元素会始终位于浏览器窗口内试图的某个位置，不会受到文档流动影响。这与background-attachment:fixed;属性功能相同。
relative：表示相对定位，它通过left、right、top、bottom属性确定元素在正常文档流中偏移位置。相对定位完成的过程是首先按static方式生成一个元素，然后移动这个元素，移动方向由left、right、top、bottom确定，元素的形状和偏移前的位置保留不动。（相对于自己）

绝对定位absolute的定位包含框

**CSS定位包含框（定位框）**是标准布局中一个重要概念，它是绝对定位的基础。

绝对定位元素的偏移量是根据定位包括的位置计算的，一个绝对元素的位置取决于它的偏移量：top、right、bottom、left属性值。

定位包含框是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。

在默认状态下，body元素就是一个根定位包括框，所有绝对定位元素根据窗口来确定自己所处的位置和百分比大小显示的。
如果定义了定位包含框，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。

定位包含框一般可以用position属性来定义，有效取值包括absolute、fixed、relateive。

html

<style type="text/css">
    #a,
    #b {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 10px;
    }

    #a-a {
        position: absolute;
        width:50%;
        height: 50%;
        left: 50%;
        top: 50%;
        border: 1px solid #000;
    }

    #b {
        position: relative;
    }

    #b-b {
        position: absolute;
        width:50%;
        height: 50%;
        left: 50%;
        top: 50%;
        border: 1px solid #000;
    }
</style>
<div id="a">
    <div id="a-a">a-a</div>
</div>
<div id="b">
    <div id="b-b">b-b</div>
</div>

如上面例子，b设置了postion:relative，所以b-b取b为定位包含框。a没有被设置为定位包含框，所以b-b取默认body为定位包含框。

相对定位relative

相对定位元素的偏移量是根据它在正常文档流里的原始位置计算的。

一个相对定位元素的位置取决于它的偏移量：top、right、bottom、left属性值。

html

<style type="text/css">
    b {
        position: relative;
        top: -30px;
        border: 1px solid #000;
    }
    div{
        border: 1px solid #000;
        margin-top: 10%;
    }
</style>
<div>
    <p><b>这是标题</b>这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。这是一段很长的文本。</p>
</div>

可以看到，相对定位后，元素对象的原空间保留不变。相对定位偏移的边距遵循绝对定位中的偏离规则，不过相对定位的定位包含框是元素对象的原位置。

相对定位与绝对定位的区别

相对定位元素占有自己的空间，即原始位置保留不变。绝对定位元素被完全拖离出正常文档流中原来的空间，且原来空间将不再被保留，被相邻元素挤占。
绝对定位元素设置在可视区域之外会导致浏览器窗口的滚动条出现。而设置相对定位元素在可视区域之外，滚动条是不会出现的。

定位层叠

定位元素之间允许重叠显示，但在流动布局和浮动布局中是无法实现这种重叠效果的，因此可以利用定位重叠结束创建动态网页效果。

在CSS中可以通过z-index属性来确定定位元素的层叠等级，该属性只有在position属性取值为relative、absolute或fixed时才可以使用。

z-index属性值越大，层叠等级就越高
如果z-index属性值相同，则根据结构顺序层叠。
如果未指定z-index属性值，则此属性值为正数的元素会在其上，属性值为负数的元素会在其之下。

html

<style type="text/css">
    #a{
        background-color: aqua;
        border: 1px solid black;
        position: relative;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    #b{
        background-color: red;
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: relative;
        top: -50px;
        left: 50px;
        z-index: 2;
    }
    #c{
        background-color: green;
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: relative;
        top: -75px;
    }
</style>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

混合定位布局

混合定位布局是指利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确性优势互补。

比如，给父元素定义为相对定位position:relative，给子元素定义为position:absolute，那么子元素的位置将随着父元素，而不是整个页面进行变化。

html

<style type="text/css">
    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    #header {
        background-color: beige;
        width: 100%;
        height: 20%;
    }

    #container {
        background-color: burlywood;
        width: 100%;
        height: 60%;
        position: relative;
        margin: 0 auto;
    }
    #left{
        width: 30%;
        background-color: aliceblue;
        position: absolute;
        height: 100%;
    }
    #right{
        width: 70%;
        background-color: antiquewhite;
        position: absolute;
        right: 0px;
        height: 100%;
    }
    #footer {
        background-color: blanchedalmond;
        width: 100%;
        height: 20%;
    }
</style>
<div id="header">header</div>
<div id="container">
    <div id="left">left</div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>

CSS3新布局

CSS3新增了一些新布局，使用它们可以更灵活地设计网页版式。

多列布局：适合排版很长的文字内容，让其多列显示。
弹性布局：适合设计自动伸缩的多列容器，如栏目或模块，以适应移动页面设计的要求。

多列布局

CSS3中为我们提供了多列布局，并提供了多个css属性用于定义多列布局的样式。

columns：该属性用于定义多列布局。
column-width：用于定义列宽度。
column-count：用于定义列数量。
column-gap：用于定义列间距。
column-rule：用于定义列边框样式。
column-rule-width：定义列边框宽度。
column-rule-style：定义列边框样式。
column-rule-color：定义列边框的颜色。
column-span：用于定义某个元素跨列显示，也可设置单列显示。
column-fill：用于定义栏目的高度是否统一。

CSS3中使用columns属性定义多列布局，用法如下：

css

columns:column-width || column-count;

columns的属性初始值不固定，根据元素个别属性而定，其适用于不可替换的块元素、行内块元素、单元格（单元格元素除外）。

column-width：定义每列的宽度。
column-count：定义列数。

设置列宽

CSS3中使用column-width属性定义单列显示的宽度，用法如下：

css

column-width:length|auto;

length：长度值，不可为负值。
auto：根据浏览器自动计算来设置。

当单独使用column-width而不与其他多列布局属性配合使用时，也可以限制单列的宽度，当超出宽度时，则会自动多列显示。

设置列数

CSS3中使用column-count属性定义列数，用法如下：

css

column-count:integer|auto;

integer：定义栏目的列数，取值为大于0的整数。如果column-width和column-count属性没有明确值，则该值为最大列数。
auto：根据浏览器计算值自动设置。

设置列间距

CSS3中使用column-gap属性定义两栏之间的间距，用法如下：

html

column-gap:normal|lenght;

normal：根据浏览器默认设置进行解析，一般为1em。
length：长度值，不可为负值。

html

<style type="text/css">
    div {
        column-count: 3;
        column-gap: 3em;
    }
    p{
        line-height: 1.8em;

    }
</style>
<div>
    <p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。
    </p>
    <p>这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。
    </p>
</div>

设置列边框样式

CSS3使用column-rule属性定义每列之间边框的宽度、样式和颜色，用法如下：

html

column-rule:length|style|color|transparent;

length：长度值，用于定义列边框的宽度，不可为负值。
style：定义列边框样式，定义列边框的样式。
color：定义列边框的颜色。
transparent：设置列边框透明显示。根据上面的属性，column-rule派生出了3个子属性。
column-rule-width：定义列边框宽度。
column-rule-style：定义列边框样式。
column-rule-color：定义列边框的颜色。

html

<style type="text/css">
    div {
        column-count: 3;
        column-gap: 3em;
        column-rule: 1px solid #000;
    }
    p{
        line-height: 1.8em;

    }
</style>
<div>
    <p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。
    </p>
    <p>这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。
    </p>
</div>

设置跨列显示

CSS3中使用column-span属性定义跨列显示，或设置单列显示，用法如下：

html

column-span:none|all：

none：只在本栏中显示。
all：将横跨所有列显示。

html

<style type="text/css">
    div {
        column-count: 3;
        column-gap: 3em;
    }
    h1,h2{
        column-span: all;
        text-align: center;
    }
    p{
        line-height: 1.8em;

    }
</style>
<div>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。
    </p>
    <p>这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。
    </p>
</div>

设置列高度

C33S中使用column-fill属性定义栏目的高度是否统一，用法如下：

html

column-fill:auto|balance;

auto：各列的高度随其内容的变化而自动变化。

当设置为auto时，会发现内容都集中到第一列中去，这是因为父容器没有设置高度。使用height属性定义父容器的高度后，当内容达到高度限额时才会填充下一列。

balance：默认值。各列的高度将会根据内容最多的那一列的高度进行统一。

html

<style type="text/css">
    div {
        column-count: 3;
        column-gap: 3em;
        column-fill: auto; 
        column-rule: 1px solid #000;
        height: 100%;
    }
    h1,h2{
        column-span: all;
        text-align: center;
    }
    p{
        line-height: 1.8em;

    }
</style>
<div>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <p>这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。这是一段文字。
    </p>
    <p>这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。这也是一段文字。
    </p>
</div>

弹性盒布局

CSS中的弹性盒布局（FlexBox）是一种用来进行网页布局的CSS布局模型。它让元素可以在一个容器中以弹性的方式布局，并且可以方便地进行对齐、分布、排列等操作。

使用该模型可以很轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

定义弹性盒子模型

启动弹性盒模型，只需要为包含有子对象的容器对象设置display属性即可，用法如下：

html

display:box|inline-box|flexbox|inline-flexbox|flex|inline-flex

box：将对象作为弹性伸缩盒显示。伸缩盒为最老版本。
inline-box：将对象作为内联块级弹性伸缩盒显示。伸缩盒为最老版本。
flexbox：将对象作为弹性伸缩盒显示。伸缩盒为过渡版本。
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。伸缩盒为过渡版本。
flex：将对象作为弹性伸缩盒显示。伸缩盒为最新版本。
inline-flex：将对象作为内联块级弹性伸缩盒显示。伸缩盒为最新版本。

推荐使用flex和inline-flex定义弹性盒子布局，而不是老版本、过渡版本的属性。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
    }

    .project {
        border: 1px solid black;
        width: 30%;
        height: 50%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

弹性盒子布局的两个主要概念

伸缩容器：display属性设置为flex、inline-flex的元素称为伸缩容器。
伸缩项目：伸缩容器的每一个字元素都是一个伸缩项目，伸缩项目可以是任意数量的。

Flex布局模式

Flex布局模式由以下项目组成：

主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。

主轴不一定是水平的，这主要取决于justify-content属性设置。

主轴起点（main-start）和主轴终点（main-end）：伸缩项目放置在伸缩容器内从主轴起点向主轴终点方向。
主轴尺寸（main size）：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸。
侧轴（cross axis）：垂直于主轴称为侧轴。它的方向主要取决于主轴方向。
侧轴起点（cross start）和侧轴终点（cross end）：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
侧轴尺寸（cross size）：伸缩项目在侧轴方向的宽度或高度就是项目的侧轴长度。

Flex布局模式使用以下属性定义其样式：

flex-flow：同时定义flex-direction和flex-wrap属性。
- flex-direction：该属性用于定义主轴方向，从而定义伸缩项目在伸缩容器内的放置方向。
- flex-wrap：该属性用于定义伸缩容器里伸缩项目是单行还是多行显示。
justify-content：定义伸缩项目沿着主轴线的对齐方式。
align-items：定义伸缩项目在当前行的侧轴上的对齐方式。
align-content：主要用来调准伸缩行在伸缩容器里的对齐方式。适用于多行情况下。

定义伸缩方向

CSS3中使用flex-direction属性定义伸缩方向，它适用于伸缩容器，即伸缩项目的父元素。

flex-direction属性主要用来创建主轴，从而定义伸缩项目在伸缩容器内的放置方向，用法如下：

css

flex-direction:row|row-reverse|column|column-reverse

row：默认值，在ltr（left-to-right）排版方式下从左向右排列。在rtl（right-to-left）排版方式下从右向左排列。
row-reverse：与row排列方向相反。
column：从上到下排列。
column-reverse：从下到上排列。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
        flex-direction: column;
    }

    .project {
        border: 1px solid black;
        width: 30%;
        height: 100%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

定义行数

CSS3中使用flex-wrap属性定义伸缩容器里是单行还是多行显示，侧轴的方向决定了新行堆放的方向。该属性适用于伸缩容器即伸缩项目的父元素。其用法如下：

css

flex-wrap:nowrap|wrap|wrap-reverse

nowrap：默认值，伸缩容器单行显示。在ltr排版下，伸缩项目从左到右排列。在rtl排版下，伸缩项目从右到左排列。
wrap：伸缩容器多行显示。在ltr排版下，伸缩项目从左到右排列。在rtl排版上，伸缩项目从右向左排列。
wrap-reverse：伸缩容器多行显示。于wrap相反，在ltr排版下，伸缩项目从右向左排列。在rtl排版下，伸缩项目从左到右排列。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
        flex-wrap: wrap;
    }

    .project {
        border: 1px solid black;
        width: 30%;
        height: 50%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

同时定义伸缩方向和行数

CSS3中提供了flex-flow属性，用于同时定义flex-direction和flex-wrap属性，其用法如下：

css

flex-flow:flex-direction||flex-wrap

其默认值为：row nowrap

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
        flex-flow: row wrap;
    }

    .project {
        border: 1px solid black;
        width: 30%;
        height: 50%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

定义对齐方式

主轴对齐

CSS3中使用justify-content属性定义伸缩项目沿着主轴线得对齐方式。其语法如下：

css

justify-content:flex-start|flex-end|center|spance-between|space-around

flex-start：默认值，伸缩项目向一行的起始位置靠齐。
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：伸缩项目会平均地分布在行里。第一个项目在一行中的开始位置，最后一个伸缩项目在一行中的终点位置。
spce-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
        justify-content: center;
    }

    .project {
        border: 1px solid black;
        width: 10%;
        height: 50%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

侧轴对齐

CSS3中使用align-items属性定义伸缩项目在伸缩容器当前行的侧轴上的对齐方式，其用法如下：

css

align-items:flex-start|flex-end|center|baseline|stretch

flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
center：伸缩项目的外边距盒在该行的侧轴上居中放置。
baseline：伸缩项目根据他们的基线对齐。
stretch：默认值。伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 50%;
        align-items: center;
    }

    .project {
        border: 1px solid black;
        width: 30%;
        height: 50%;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
</div>

伸缩行对齐

CSS3中使用align-content来调准伸缩行在伸缩容器里的对齐方式，类似于justify-content属性，但align-content属性在只有一行的伸缩容器上没有效果。

css

align-content:flex-start|flex-end|center|sapce-between|space-around|stretch

flex-start：各行向伸缩容器的起点位置堆叠。
flex-end：各行向伸缩容器的结束位置堆叠。
center：各行向伸缩容器的中间位置堆叠。
space-between：各行在伸缩容器中平均分布。
space-around：各行在伸缩容器中平均分布，在两边格有一半的空间。
stretch：默认值，各行将会伸展以占用剩余的空间。

html

<style type="text/css">
    #contain {
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        align-content: center;
    }

    .project {
        border: 1px solid black;
        width: 200px;
        height: 200px;
        margin: 10px;
    }
</style>
<div id="contain">
    <div class="project">第一个项目</div>
    <div class="project">第二个项目</div>
    <div class="project">第三个项目</div>
    <div class="project">第四个项目</div>
    <div class="project">第五个项目</div>
</div>

定义伸缩项目样式

一个伸缩项目就是一个伸缩容器的子元素。伸缩项目中的内容与普通文本流一样。如一个伸缩项目被设置为浮动，用户依然可以在伸缩项目中放置一个浮动元素。

伸缩项目都有一个主轴长度（main size）和侧轴长度（cross size）。

主轴长度是伸缩项目在主轴上的尺寸
侧轴长度是伸缩项目在侧轴上的尺寸。

CSS3中为伸缩项目定义了以下属性，用于修改其样式：

order：定义伸缩项目的显示位置。默认情况下，伸缩项目是按照文档流出现的先后顺序排列的。通过order属性，可以自定义伸缩项目的出现顺序。

css

order: <integer>

flex-grow：用于定义伸缩项目的扩展能力。它接收一个不带单位的值作为一个比例，该比例决定了在伸缩容器还有剩余空间时，伸缩项目按比例应扩展多少空间。默认值为0.

css

flex-grow: <number>

flex-shrink：于flex-grow属性的功能相反，用来的定义伸缩项目的收缩能力。在剩余空间不足时，会收缩项目。默认值为1，负值同样生效。'

css

flex-shrink：<number>

flex-basis：用来设置伸缩项目初始主轴的基准值，剩余的空间按比率进行伸缩，该属性适用于伸缩项目。默认值为auto，不可为负值。

css

flex-basis：<length>|auto

flex：flex是flex-grow、flex-shrink、flex-basis3个属性的复合属性，该属性适用于伸缩项目，其默认值为0 1 auto。

css

flex:none| [flex-grow flex-shrink flex-basis]

align-self：该属性可以在单独的伸缩项目上覆盖其默认的侧轴对齐方式。属性值与align-items属性值相同。

css

align-self:auto|flex-start|flex-end|center|baseline|stretch

margin：当伸缩项目的margin被设置为auto时，伸缩项目会合并剩余的空间，会把其他伸缩项目挤到其他位置。

CSS中布局总结

布局类型：

盒布局 box：通过设置元素的内边距、边框、外边距来控制元素在页面中的布局，用于控制元素的间距、大小和位置，适用于大多数情况。
浮动布局 float：浮动布局通过设置元素的浮动属性来使元素在页面中浮动到指定位置，其他元素可以环绕在其周围，适用于多列布局、图文混排等场景。
多列布局 columns：多列布局，各列宽度必须相等，无法指定每列宽度，适合长篇文章如报纸、杂志等多列排版。
弹性盒子布局 flex：这是一种响应式布局，通过设置容器display属性未flex来实现灵活的布局。适用于需要灵活布局的情况，特别是在移动端开发中常用，可以快速实现复杂的布局。

CSS3动画Animation

CSS3动画都是通过持续改变CSS属性值产生动态样式效果来实现动画，分为两种实现方式：

Transition：支持属性从一个值平滑过滤到另一个值，由此产生渐变的动态效果。
Animations：通过关键帧产生序列渐变动画，每个关键帧中可以包含多个动态属性，从而在页面上生成多帧复杂的动画效果。

元素的2D变换

CSS2D Transform表示2D变换，已获得各主流浏览器的支持，语法如下：

css

transform: none|<transform-function>

none：初始值，表示没有变换效果
transform-function：设置变换函数，可以是一个或多个变换函数列表。变换函数包括:
- matrix()：定义矩阵变换，基于X和Y坐标重新定位元素的位置。
- translate()：移动元素对象，即基于X和Y坐标重新定位元素。
- scale()：缩放元素对象，可以使任意元素对象尺寸发生变化，可以为正数、负数、小数。
- rotate()：旋转元素对象，取值为一个度数值（deg）。
- skew()：倾斜元素对象，取值为一个度数值（deg）。 transform是一个复合属性，可以一直定义多个属性值。

定义变换原点

CSS变换的原点默认为元素的中心点，如果要改变这个中心点，可以使用transform-origin属性。该属性接受两个参数，第一个参数表示水平方向上的偏移，第二个参数表示沿垂直方向上的偏移。参数值可以是百分比、长度、或描述性关键字（left、center、right、top、middle、bottom）。

html

<style type="text/css">
    div {
        width: 200px;
        height: 50px;
        margin: 100px auto; /*上下左右*/
        background-color: #f00;
        border: 1px solid #000;
    }
    div:hover {
        transform: rotate(90deg);
        transform-origin: 0 0;//
        
    }
</style>
<div></div>

定义旋转rotate

rotate()函数能够使指定的元素对象旋转，接收一个角度参数值。

html

<style type="text/css">
    div {
        width: 200px;
        height: 50px;
        margin: 100px auto; /*上下左右*/
        background-color: #f00;
        border: 1px solid #000;
    }
    div:hover {
        transform: rotate(90deg);
    }
</style>
<div></div>

定义缩放scale

scale()函数能够缩放元素大小，该函数包含两个参数值，分别用来定义宽和高缩放比例。

html

<style type="text/css">
    div {
        width: 200px;
        height: 50px;
        margin: 100px auto; /*上下左右*/
        background-color: #f00;
        border: 1px solid #000;
    }
    div:hover {
        transform: scale(2,2);
    }
</style>
<div></div>

定义元素移动translate

translate()函数能够重新定位元素的坐标，该函数包含两个参数值，分别用来定义x轴和y轴坐标。

第一个参数表示相对于原位置的x轴偏移距离，第二个参数表示相对于原位置的y轴偏移距离。

html

<style type="text/css">
    button {
        width: 200px;
        height: 50px;
        background-color: #f00;
        border: 1px solid #000;
    }
    button:hover {
        transform: translate(10px,10px);
        background-color: blue;
    }
</style>
<button>按钮1</button>
<button>按钮2</button>

定义倾斜skew

skew()函数能够让元素倾斜显示，该函数包含两个参数值，分别用来定义x轴和y轴坐标倾斜的角度。

skew函数与rotate函数不同的是，rotate只旋转元素而不改变元素的形状，skew函数则改变函数的形状。

html

<style type="text/css">
    div {
        width: 200px;
        height: 50px;
        margin: 100px auto; /*上下左右*/
        background-color: #f00;
        border: 1px solid #000;
    }
    div:hover {
        transform: skew(0,30deg);
    }
</style>
<div></div>

定义矩阵变换matrix

matrix()是矩阵函数，通过该函数可以灵活实现的动画效果，可以一次性实现倾斜、旋转、位移等效果。该函数接受6个参数，分别代表：

第一个参数：控制x轴上的缩放
第二个参数：控制x轴上的倾斜
第三个参数：控制y轴上的倾斜
第四个参数：控制y轴上的缩放
第五个参数：控制x轴上的位移
第六个参数：控制y轴上的位移

html

<style type="text/css">
    div {
        width: 200px;
        height: 50px;
        margin: 100px auto; /*上下左右*/
        background-color: #f00;
        border: 1px solid #000;
    }
    div:hover {
        transform: matrix(1, 0.4, 0, 1, 0, 0)
    }
</style>
<div></div>

元素的3D变换

CSS3中3D变换主要涉及以下这些函数：

3D位移：translate3d()和translateZ()
3D旋转：rotateX()、rotate()、rotateZ()、rotate3d()
3D缩放：scaleZ()、scale3d()
3D矩阵：matrix3d()

3D位移

在CSS3中，3D位移主要使用两个函数translate3d(tx,ty,tz)和translateZ()。其中tx表示横向坐标位移向量的长度。ty表示纵向坐标位移向量的长度。tz表示z轴位移向量的长度，tz不能是一个百分比或者无效。

html

<style type="text/css">
    .container {
        perspective: 1200px;/*定义观察者的距离*/
    }

    img.transform3d {
        transform: translate3d(30px, 30px, 100px);
        border: 1px solid #000;
    }
</style>
<div class="container" id="container">
    <img src="./rfdynq.ico">
    <img class="transform3d" src="./rfdynq.ico">
</div>

定义缩放

CSS3 3D中使用scaleZ()和scale3d()函数实现元3d缩放。scale3d()语法如下：

css

scale3d(sx,sy,sz)

其接受3个参数，分别为：

sx：横向缩放比例
sy：纵向缩放比例
sz：z轴缩放比例当scale3d(1,1,sz)时等于scaleZ(sz)。

html

<style type="text/css">
    .container {
        perspective: 1200px;
    }

    img.transform3d {
        transform: scale3d(1,1,3);
        border: 1px solid #000;
    }
</style>
<div class="container" id="container">
    <img src="./rfdynq.ico">
    <img class="transform3d" src="./rfdynq.ico">
</div>

上面例子中的元素之所以没有被放大，是因为大多数元素的内容都是二维的，所以在Z轴上进行缩放可能不会产生明显的效果。

定义旋转

CSS3动画中，使用rotateX()、rotate()、rotateZ()函数对元素进行3D旋转。各个函数均接受一个角度值，当角度值大于0，则沿对应轴顺时针旋转。当角度值小于0，则沿对应轴逆时针旋转。

除了以上几个函数外，CSS3还提供了rotate3d()函数用于实现元素3d旋转，其语法如下：

css

rotate3d(x,y,z,a)

该元素接受一个由[x,y,z]组成的向量值表示轴向，a表示旋转的角度。

rotateX(a)函数功能等同于rotate3d(1,0,0,a)
rotateY(a)函数功能等同于rotate3d(0,1,0,a)
rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
ratateZ()函数从视觉上看等同于rotate()函数

html

<style type="text/css">
    .container {
        perspective: 1200px;
    }

    img.transform3d {
        transform: rotate3d(1, 0, 0, 45deg);
        border: 1px solid #000;
    }
</style>
<div class="container" id="container">
    <img src="./rfdynq.ico">
    <img class="transform3d" src="./rfdynq.ico">
</div>

设计过渡动画

CSS3中提供了多个函数用于实现过渡动画效果。

transition-property：该属性用来定义过渡动画的CSS属性名称。
transition-duration：该属性用来定义转换动画的时间长度。
transition-delay：该属性用来定义开启过渡动画的延迟时间。
transition-timing-function：该属性用来定义过渡动画的类型。

设置过渡属性

transition-property，该属性用来定义过渡动画的CSS属性名称。给某个CSS属性设置为过渡属性后，当属性值发生改变时会以动画形式表示。其语法如下：

css

transition-property:none| all | ident;

none：表示没有属性应用过渡效果。
all：默认值，表示所有属性都应用过渡效果。
ident：属性名称，可以一个或多个，以逗号分隔。

设置过渡时间

transition-duration，该属性用来定义转换动画的时间长度，其语法如下：

css

transition-duration:time;

适用于所有元素，包括:before和after伪元素。初始值为0，默认情况下看不到过渡动画，直接看到结果。

设置延迟时间

transition-delay，该属性用来定义开启过渡动画的延迟时间，语法如下：

css

transition-delay: time;

当设置的时间为正数时，过渡动画会延迟触发。
当设置的时间为负数时，过渡动画会立刻开始，但指定时间之前动作会被截断。

设置过渡动画类型

transition-timing-function，该属性用来定义过渡动画的类型，有以下动画类型：

ease：默认值，平滑过渡，相当于cubic-bezied(0.25,0.1,0.25)
linear：线性过渡，cubic-bezied(0,0.1,1)
ease-in：由慢到快，cubic-bezied(0.42,0,1.0.1.0)
ease-out：由快到慢，cubic-bezied(0,0,0.58,1.0)
ease-in-out：由慢到快再到慢，cubic-bezied(0.42,0,0.58,1.0)
cubic-bezier：特殊的立方贝塞尔曲线效果。

设置触发方式

CSS动画一般通过鼠标事件或状态定义动画，如CSS伪类和Javascript事件。

伪类包括：

:link：未访问的链接
:visit：访问过的链接
:hover：鼠标经过元素
:active：鼠标点击元素
:focus：元素被选中，表单对象接收键盘响应时出现。
:checked：复选框被选中时
...

Javascript事件包括：

click：点击事件
focus：选中事件
mousemove：当鼠标指针在页面上移动时触发的事件
mouseover：当鼠标指针移动到页面上某个元素上时触发的事件
mousecout：指鼠标移出页面元素时触发的事件
...

html

<style type="text/css">
    button {
        width: 200px;
        height: 50px;
        background-color: #f00;
        border: 1px solid #000;
    }

    button:hover {
        transition-property: background-color; /* 仅针对背景颜色应用过渡动画 */
        border: 10px solid green;
        transition-duration: 5s; /* 持续一秒 */
        background-color: blue;
        transition-delay: -1s; /* 延迟一秒 */
        transition-timing-function: ease-in;
    }
</style>
<button>按钮1</button>
<button>按钮2</button>

设计帧动画

CSS3中使用animation属性定义帧动画，目前主流浏览器都支持CSS帧动画。帧动画需要结合关键帧使用。

Animations与Transition功能相同，但是实现动画效果的方式不同，区别在于：

Transitions只能通过指定属性的开始值和结束值，然后通过各种平滑过渡的方式实现动画效果。
Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

定义关键帧

CSS3中使用@keyframe定义关键帧，具体用法如下：

css

@keyframes animation-name {
	keyframes-selector {
		css-styles;
	}
}

animation-name：定义帧动画的名称
keyframes-selector：定义帧动画的显示时间。合法值包括0~100%、from（等价于0%）、to（等价于100%）
css-styles：表示帧动画的CSS样式

设置元素的动画属性

定义了关键帧后，需要给元素添加上动画效果。CSS提供了多个属性用于定义元素的动画效果，包括：

animation-name：默认值为none，表示没有动画。用于设置动画关键帧的名称，可以是一个列表。
animation-duration：设置CSS动画播放时间。
animation-timing-function：设置动画过渡类型，默认值为ease。
animation-delay：设置动画延迟播放时间，默认中为0。
animation-iteration-count：设置动画重复播放次数，默认值为1。
animation-play-state：设置动画运行状态，默认值为running。running表示正在播放，paused表示已暂停。
animation-fill-mode：定义动画外状态，默认值为none。取值说明如下：
- none：不设置对象动画之外的状态。
- forwards：设置对象状态为动画结束时的状态
- backwards：设置对象状态为动画开始时的状态。
- both：设置独享状态为动画结束或开始的状态。

html

<style type="text/css">
    .container {
        width: 50%;
        height: 50%;
        border: 1px solid #000;
        position: absolute;
    }

    .box {
        width: 10%;
        height: 10%;
        position: absolute;
        left: 0;
        top: 0;
        border: 1px solid black;
        background-color: green;
        animation: boxmove 5s ease 1s 1 running forwards; /*infinite 无限*/
    }

    @keyframes boxmove {
        from {
            left: 0;
            top: 0;
        }

        to {
            left: 100%;
            top: 100%;
        }
    }
</style>
<div class="container">
    <div class="box"></div>
</div>

响应式样式

@media是 CSS 中用于定义响应式设计的一种规则。通过使用 @media，你可以根据不同的设备类型、屏幕尺寸、分辨率等条件，应用不同的样式。这样可以确保你的网页在各种设备上都有良好的显示效果。 @media的基本语法如下：

css

@media media_type and (condition) {
  /* CSS rules */
}

其中，media_type可以是以下值之一：

all：适用于所有设备。
screen：适用于电脑屏幕、平板电脑、智能手机等屏幕设备。
print：适用于打印机和打印预览模式。
speech：适用于屏幕阅读器等语音设备。 condition 是一个或多个媒体特性，用于定义应用样式的条件。常见的媒体特性包括：
width 和 height：视口的宽度和高度。
min-width 和 max-width：视口的最小宽度和最大宽度。
min-height 和 max-height：视口的最小高度和最大高度。
orientation：设备的方向（portrait 或 landscape）。
resolution：设备的分辨率。

等...

BEM命名风格

BEM（Block, Element, Modifier）是一种命名约定，旨在帮助开发者编写可复用且易于维护的 CSS 代码。

BEM 的基本思想是将页面分为独立的块（Block），每个块内部包含元素（Element），可以通过**修改器（Modifier）**来改变块或元素的外观或行为。

BEM 命名约定

Block（块）
Block 是一个独立的、具有明确功能的页面组件。它可以是导航栏、按钮、表单等。Block 是命名的基础。
例子：
css
```
.button {
    /* 样式 */
}
.menu {
    /* 样式 */
}
```
Element（元素）
Element 是 Block 的一部分，不能独立存在，只能与其关联的 Block 一起使用。Element 表示 Block 内的组成部分。
命名规则：
.block__element
例子：
css
```
.menu__item {
    /* 样式 */
}
.menu__link {
    /* 样式 */
}
```
Modifier（修改器）
Modifier 是用于修饰 Block 或 Element 的属性，用来表示不同的状态、外观或行为。Modifier 可以是布尔值（例如是否激活）或属性值（例如大小、颜色）。
命名规则：
.block--modifier 或 .block__element--modifier
例子：
css
```
.button--primary {
    /* 样式 */
}
.menu__item--active {
    /* 样式 */
}
```

实际示例

假设我们有一个导航菜单，包含多个菜单项，每个菜单项有一个链接，当菜单项处于活动状态时会有不同的样式。

html

<nav class="menu">
    <ul class="menu__list">
        <li class="menu__item menu__item--active">
            <a href="#" class="menu__link">Home</a>
        </li>
        <li class="menu__item">
            <a href="#" class="menu__link">About</a>
        </li>
    </ul>
</nav>

对应的 CSS：

css

.menu {
    /* 样式 */
}

.menu__list {
    /* 样式 */
}

.menu__item {
    /* 样式 */
}

.menu__item--active {
    /* 样式 */
}

.menu__link {
    /* 样式 */
}

BEM 的优势

可复用性：BEM 命名的代码可以在不同项目中轻松复用。
可维护性：明确的命名规范让团队成员可以轻松理解和修改代码。
避免样式冲突：BEM 的层次结构和命名规则减少了样式冲突的可能性。

使用 BEM 命名规范可以帮助你编写更清晰、可维护和可扩展的 CSS 代码。

单位

CSS 中有许多不同的单位来定义尺寸和间距。以下是一些常见的 CSS 单位：

绝对单位

px (像素)：屏幕上显示的物理像素。通常用于定义固定大小。
cm (厘米)：物理尺寸的厘米单位。
mm (毫米)：物理尺寸的毫米单位。
in (英寸)：物理尺寸的英寸单位。1 in = 2.54 cm。
pt (磅)：印刷单位，常用于字体大小。1 pt = 1/72 in。
pc (拍)：印刷单位。1 pc = 12 pt。

相对单位

em：相对于父元素字体大小的单位。1 em 通常等于当前元素的字体大小。
rem：相对于根元素 (<html>) 字体大小的单位。1 rem 等于根元素的字体大小。
% (百分比)：相对于父元素的值。例如，宽度设为 50% 就是父元素宽度的一半。
vw (视口宽度)：相对于视口（即浏览器窗口）宽度的单位。1 vw 等于视口宽度的 1%。
vh (视口高度)：相对于视口高度的单位。1 vh 等于视口高度的 1%。
vmin：视口宽度和高度中较小的那一个的百分比。
vmax：视口宽度和高度中较大的那一个的百分比。

其他单位

ch：相对于字符 "0" 的宽度。常用于定义文本区域的宽度。
ex：相对于字体中小写字母 "x" 的高度。通常比 em 小。
fr (分数单位)：用于 CSS Grid 布局中，表示可用空间的一个分数。

这些单位各有不同的用途，选择合适的单位可以帮助你创建更灵活和响应式的网页设计。

CSS基础 ​

CSS样式的基本结构 ​

CSS的应用 ​

CSS样式表 ​

CSS特性 ​

CSS的层叠性 ​

CSS的继承性 ​

CSS3选择器 ​

CSS3选择器的分类 ​

基本选择器 ​

标签选择器 ​

类选择器 ​

ID选择器 ​

通配选择器 ​

组合选择器 ​

包含选择器 ​

子选择器 ​

相邻选择器 ​

兄弟选择器 ​

分组选择器 ​

属性选择器 ​

伪类选择器 ​

动态伪类 ​

结构伪类 ​

否定伪类 ​

状态伪类 ​

目标伪类 ​

CSS美化网页文本 ​

定义字体样式 ​

定义字体类型 ​

自定义字体类型 ​

定义字体大小 ​

定义字体颜色 ​

定义字体粗细 ​

定义斜体字体 ​

定义字体下划线 ​

定义字体大小写效果 ​

定义文本样式 ​

定义文本水平对齐 ​

定义文本垂直对齐 ​

定义字距或词距 ​

定义行高 ​

定义首行缩进 ​

定义文本阴影 ​

定义溢出文本 ​

文本换行 ​

添加动态内容 ​

恢复默认样式 ​

CSS美化图像 ​

网页图像格式 ​

设置图像样式 ​

定义图像大小 ​

定义图像边距 ​

清除边框 ​

边框样式 ​

边框颜色 ​

边框宽度 ​

定义图像不透明度 ​

定义圆角图像 ​

定义阴影图像 ​

图文混插 ​

设置背景图像 ​

定义背景图像 ​

定义背景图像显示方式 ​

定义背景图像显示位置 ​

定义固定背景 ​

定义背景图像坐标 ​

定义背景图像的裁剪区域 ​

定义背景图像的大小 ​

定义背景图像循环方式 ​

定义多背景图 ​

定义渐变背景 ​

CSS美化超链接 ​

定义超链接下划线样式 ​

定义超链接立体样式 ​

定义鼠标样式 ​

定义超链接背景图像 ​

CSS美化列表 ​

设计项目符号类型 ​

自定义项目符号 ​

CSS基础

CSS样式的基本结构

CSS的应用

CSS样式表

CSS特性

CSS的层叠性

CSS的继承性

CSS3选择器

CSS3选择器的分类

基本选择器

标签选择器

类选择器

ID选择器

通配选择器

组合选择器

包含选择器

子选择器

相邻选择器

兄弟选择器

分组选择器

属性选择器

伪类选择器

动态伪类

结构伪类

否定伪类

状态伪类

目标伪类

CSS美化网页文本

定义字体样式

定义字体类型

自定义字体类型

定义字体大小

定义字体颜色

定义字体粗细

定义斜体字体

定义字体下划线

定义字体大小写效果

定义文本样式

定义文本水平对齐

定义文本垂直对齐

定义字距或词距

定义行高

定义首行缩进

定义文本阴影

定义溢出文本

文本换行

添加动态内容

恢复默认样式

CSS美化图像

网页图像格式

设置图像样式

定义图像大小

定义图像边距

清除边框

边框样式

边框颜色

边框宽度

定义图像不透明度

定义圆角图像

定义阴影图像

图文混插

设置背景图像

定义背景图像

定义背景图像显示方式

定义背景图像显示位置

定义固定背景

定义背景图像坐标

定义背景图像的裁剪区域

定义背景图像的大小

定义背景图像循环方式

定义多背景图

定义渐变背景

CSS美化超链接

定义超链接下划线样式

定义超链接立体样式

定义鼠标样式

定义超链接背景图像

CSS美化列表

设计项目符号类型

自定义项目符号