CSS 语法
CSS 实例
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束。
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}CSS Id 和 Class选择器
id 和 class 选择器
如果你要在 HTML 元素中设置 CSS 样式，你需要在元素中设置 "id" 和 "class" 选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 # 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#x
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="x">你好，世界！</p>
</body>
</html>- ID 属性不要以数字开头，数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。
- ID 属性只能在每个 HTML 文档中出现一次。
class 类选择器
class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点"."号显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>可以指定特定的 HTML 元素使用 class。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">此标题不受影响</h1>
<p class="center">此段落将居中对齐。</p>
</body>
</html>- 类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
标签选择器
标签选择器，以 HTML 标签作为 CSS 修饰所用的选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h3
{
color:red;
}
</style>
</head>
<body>
<h3>CSS</h3>
</body>
</html>内联选择器
内联选择器，直接在标签内部写 CSS 代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<h3 style="color:red;">CSS</h3>
</body>
</html>四种 CS 选择器有修饰上的优先级：
内联选择器 > id选择器 > 类选择器 > 标签选择器
CSS 创建
如何插入样式表
插入样式表的方法：
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部。
<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 属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<p style="color:sienna; margin-left:20px">这是一个段落。</p>
</body>
</html>多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
外部样式表拥有针对 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）会被内部样式表中的规则取代。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。
层叠次序
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 head 标签内部）
- 内联样式（在 HTML 元素内部）
内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
提示:如果你使用了外部文件的样式在内部样式中也定义了该样式，则内部样式表会取代外部文件的样式。
多重样式优先级深入理解
优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
多重样式优先级顺序
优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
- 通用选择器（*）
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。!important 规则与优先级毫无关系。使用 !important 改变了你样式表本来的级联规则，从而使其难以调试。
权重计算
- 内联样式表的权值最高 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
CSS 优先级法则：
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
- 继承的 CSS 样式不如后来指定的 CSS 样式；
- 在同一组属性设置中标有 "!important" 规则的优先级最大；
CSS Backgrounds (背景)
CSS 背景
CSS 背景属性用于定义 HTML 元素的背景。
CSS 属性定义背景效果：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color 属性定义了元素的背景颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS</h1>
</body>
</html>CSS 中，颜色值通常以以下方式定义:
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8">
<title>CSS</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS</h1>
<div>
文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
在同一个 div 中。
</div>
</body>
</html>提示：你可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。
提示：background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-image:url(' ');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello !</h1>
</body>
</html>背景图像 - 水平或垂直平铺
如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-image:url(' ');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello !</h1>
</body>
</html>背景图像- 设置定位与不平铺
如果你不想让图像平铺，你可以使用 background-repeat 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-image:url(' ');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>可以利用 background-position 属性改变图像在背景中的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-image:url(' ');
background-repeat:no-repeat;
background-position:right top;
margin-right:100px;
}
</style>
</head>
<body>
<h1>你好！</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>提示：为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如 100px 或 5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。
如果只有一个关键字，则会默认另一个关键字为 center。
百分数值
百分数值的表现方式更为复杂。用百分数值将图像在其元素中居中，按照下面的代码进行设置：
body
{
background-image:url(' ');
background-repeat:no-repeat;
background-position:50% 50%;
}把一个图像放在水平方向 2/3、垂直方向 1/3 处
body
{
background-image:url(' ');
background-repeat:no-repeat;
background-position:66% 33%;
}长度值
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。
设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:50px 100px;
}注意：这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
背景- 简写属性
背景颜色的简写属性为 "background"：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background:#ffffff url(' ') no-repeat right top;
margin-right:100px;
}
</style>
</head>
<body>
<h1>你好！</h1>
<p>背景图像只显示一次，而且它的位置也远离文本。</p>
<p>在这个例子中，我们还在右边添加了一个边距。</p>
</body>
</html>使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
实例
- 如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
background-image:url(' ');
background-repeat:no-repeat;
background-attachment: fixed
}
</style>
</head>
<body>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
<p>背景图像是固定的， 试着向下滚动页面。</p>
</body>CSS 背景属性
| 属性 | 描述 |
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
CSS Text(文本)
CSS Text 文本格式
通过 CSS 的 Text 属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等。
Text Color
颜色属性被用来设置文字的颜色。
- 十六进制值 - 如"＃FF0000"
- 一个RGB值 - "RGB（255,0,0）"
- 颜色的名称 - 如"红"
一个网页的背景颜色是指在主体内的选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
color:red;
}
h1
{
color:#00ff00;
}
p.ex
{
color:rgb(0,0,255);
}
</style>
</head>
<body>
<h1>标题</h1>
<p>普通的段落。</p>
<p class="ex">class=“ex”的段落。</p>
</body>
</html>文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当 text-align 设置为justify，每一行被展开为宽度相等，左，右外边距是对齐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
text-align:center
}
p.date
{
text-align:right
}
p.main
{
text-align:justify
}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">xxxx 年 x 月 xx 号</p>
<p class="main">............</p>
</body>
</html>文本修饰
text-decoration属性用来设置或删除文本的装饰。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a
{
text-decoration:none;
}
</style>
</head>
<body>
<p>链接到: <a href=" "> </a></p>
</body>
</html>text-decoration属性
- text-decoration:overline
- text-decoration:line-through
- text-decoration:underline
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.uppercase
{
text-transform:uppercase;
}
p.lowercase
{
text-transform:lowercase;
}
p.capitalize
{
text-transform:capitalize;
}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
text-indent:50px;
}
</style>
</head>
<body>
<p>......</p>
</body>
</html>文本间隔
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
word-spacing:5px;
}
</style>
</head>
<body>
<p>
文字。
文字。
</p>
</body>
</html>实例
- 如何增加或减少字符之间的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
letter-spacing:2px;
}
h2
{
letter-spacing:-2px;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
</body>
</html>- 如何指定在一个段落中行之间的空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.small
{
line-height:80%;
}
p.big
{
line-height:200%;
}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>- 如何改变元素的文本方向。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
div.ex1
{
direction:rtl;
}
</style>
</head>
<body>
<div>一些文本 默认书写方向</div>
<div class="ex1">一些文本 从右到左的书写方向 </div>
</body>
</html>- 如何增加一个段落中的单词之间的空白空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
p
{
word-spacing:30px;
}
h4
{
word-spacing: -0.1em;
}
</style>
</head>
<body>
<p>
This is some text.
</p>
<h4>
This is some text.
</h4>
</body>
</html>- 如何禁用一个元素内的文字环绕
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
p
{
white-space:nowrap;
}
</style>
</head>
<body>
<p>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>- 如何设置文本的垂直对齐图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img.top
{
vertical-align:text-top;
}
img.bottom
{
vertical-align:text-bottom;
}
</style>
</head>
<body>
<p>一个 <img src=" " alt=" " width="121" height="74" /> 具有默认对齐方式的图像.</p>
<p>一个 <img class="top" src=" " alt=" " width="121" height="75" /> 文本顶部对齐的图像.</p>
<p>一个 <img class="bottom" src=" " alt=" " width="121" height="75" /> 图像与文本底部对齐.</p>
</body>
</html>- 如何设置文本阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
text-shadow:2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
</body>
</html>所有CSS文本属性
| 属性 | 描述 |
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
CSS Fonts (字体)
CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
CSS字型
两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
- 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
| 字型 | 说明 |
| Serif | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | 所有的等宽字符具有相同的宽度 |
CSS 定义了 5 种通用字体系列：
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
字体系列
font-family 属性设置文本的字体系列。
注意: 如果字体系列的名称超过一个字，它必须用引号，如 Font Family："宋体"。
多个字体系列是用一个逗号分隔指明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.serif
{
font-family:"Times New Roman",Times,serif;
}
p.sansserif
{
font-family:Arial,Helvetica,sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman 。</p>
<p class="sansserif">这一段的字体是 Arial 。</p>
</body>
</html>字体样式
主要是用于指定斜体文字的字体样式属性。
属性：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.normal
{
font-style:normal;
}
p.italic
{
font-style:italic;
}
p.oblique
{
font-style:oblique;
}
</style>
</head>
<body>
<p class="normal">这是一个段落, normal.</p>
<p class="italic">这是一个段落, italic.</p>
<p class="oblique">这是一个段落, oblique.</p>
</body>
</html>italic 和 oblique 的区别
- 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
- 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。
字体大小
font-size 属性设置文本的大小。
字体大小的值可以是绝对或相对的大小。
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
设置字体大小像素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
font-size:40px;
}
h2
{
font-size:30px;
}
p
{
font-size:14px;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是段落</p>
</body>
</html>用em来设置字体大小
1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 30px，那么公式需改为：pixels/30=em）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
font-size:2.5em;/* 40px/16=2.5em */
}
h2
{
font-size:1.875em;/* 30px/16=1.875em */
}
p
{
font-size:0.875em;/* 14px/16=0.875em */
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是一个段落。</p>
</body>
</html>使用百分比和EM组合
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body
{
font-size:100%;
}
h1
{
font-size:2.5em;
}
h2
{
font-size:1.875em;
}
p
{
font-size:0.875em;
}
</style>
</head>
<body>
<h1>这是标题1</h1>
<h2>这是标题2</h2>
<p>这是一个段落。</p>
<p>以百分比和em指定字体大小将显示相同的大小
主要浏览器，并允许所有浏览器调整文本大小！</p>
</body>
</html>实例
- 如何设置字体的加粗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.normal
{
font-weight:normal;
}
p.light
{
font-weight:lighter;
}
p.thick
{
font-weight:bold;
}
p.thicker
{
font-weight:900;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>- 如何设置字体的转变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.normal
{
font-variant:normal;
}
p.small
{
font-variant:small-caps;
}
</style>
</head>
<body>
<p class="normal">This is a paragraph.</p>
<p class="small">This is a paragraph.</p>
</body>
</html>- 如何使用简写属性将字体属性设置在一个声明之内
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
</style>
</head>
<body>
<p class="ex1">This is a paragraph.</p>
<p class="ex2">This is a paragraph.</p>
</body>
</html>- 如何设置字体风格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.normal
{
font-style:normal;
}
p.italic
{
font-style:italic;
}
p.oblique
{
font-style:oblique;
}
</style>
</head>
<body>
<p class="normal">这是一个段落, normal.</p>
<p class="italic">这是一个段落, italic.</p>
<p class="oblique">这是一个段落, oblique.</p>
</body>
</html>所有CSS字体属性
| 属性 | 描述 |
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
CSS 链接样式
链接样式
链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。
四个链接状态：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>
</html>当设置为若干链路状态的样式，一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited 后面
- a:active 必须跟在 a:hover 后面
常见的链接样式
文本修饰
text-decoration 属性主要用于删除链接中的下划线：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>
</html>背景颜色
背景颜色属性指定链接背景色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
</body>
</html>鼠标形状
| 属性值 | 描述 |
| default | 默认光标，箭头 |
| pointer | 超链接的指针，手型 |
| wait | 指示程序正在忙 |
| help | 指示可用的帮忙 |
| text | 指示文本 |
| crosshair | 鼠标呈现十字状 |
cursor 属性实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:hover
{
color: green;
cursor: crosshair;
}
</style>
</head>
<body>
<p><a href=" "> </a></p>
</body>
</html>实例
- 如何为超链接添加其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="/css/" target="_blank">这个链接会改变字体颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接会改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接会改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接会改变字体样式</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接会改变下划线</a></b></p>
</body>
</html>- 结合若干CSS属性显示为方框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">This is a link</a>
</body>
</html>CSS 列表样式 (ul)
CSS 列表
CSS 列表属性作用：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
不同的列表项标记
list-style-type 属性指定列表项标记的类型：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
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;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>咖啡</li>
<li>茶</li>
</ul>
<ul class="b">
<li>咖啡</li>
<li>茶</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>咖啡</li>
<li>茶</li>
</ol>
<ol class="d">
<li>咖啡</li>
<li>茶</li>
</ol>
</body>
</html>list-style-type 属性的常见属性值的描述：
- none：不使用项目符号
- disc：实心圆
- circle：空心圆
- square：实心方块
- decimal：阿拉伯数字
- lower-alpha：小写英文字母
- upper-alpha：大写英文字母
- lower-roman：小写罗马数字
- upper-roman：大写罗马数字
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
ul
{
list-style-image:url(' ');
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
</body>
</html>提示：
- 利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
列表 -简写属性
在单个属性中可以指定所有的列表属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
ul
{
list-style:square url(" ");
}
</style>
</head>
<body>
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
</body>
</html>使用缩写属性值的顺序：
- list-style-type
- list-style-position
- list-style-image
实例
- 所有不同的 CSS 列表项标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katagana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="b">
<li>Disc 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="c">
<li>Square 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ol class="d">
<li>Armenian 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="e">
<li>Cjk-ideographic 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="f">
<li>Decimal 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="h">
<li>Georgian 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="i">
<li>Hebrew 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="j">
<li>Hiragana 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="k">
<li>Hiragana-iroha 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="l">
<li>Katakana 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="m">
<li>Katakana-iroha 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="n">
<li>Lower-alpha 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="o">
<li>Lower-greek 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="p">
<li>Lower-latin 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="q">
<li>Lower-roman 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="r">
<li>Upper-alpha 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="s">
<li>Upper-latin 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="t">
<li>Upper-roman 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="u">
<li>None 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
<ol class="v">
<li>inherit 样式</li>
<li>茶</li>
<li>可口可乐</li>
</ol>
</body>
</html>所有的CSS列表属性
| 属性 | 描述 |
| list-style | 简写属性。 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
CSS Table (表格)
表格边框
指定 CSS 表格边框，使用 border 属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table,th,td
{
border:2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
</tr>
</table>
</body>
</html>注意：在上面的例子中的表格有双边框。这是因为表和 th / td 元素有独立的边界。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table
{
border-collapse: collapse;
}
table, td, th
{
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
</tr>
</table>
</body>
</html>表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:80%;
}
th
{
height:20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
<th>存款</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
</table>
</body>
</html>表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align 属性设置水平对齐方式，像左，右，或中心：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
<th>存款</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
</table>
</body>
</html>垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:30px;
vertical-align:bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
<th>存款</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
</table>
</body>
</html>表格填充
如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
<th>存款</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
</table>
</body>
</html>表格颜色
指定边框的颜色，和 th 元素的文本和背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓</th>
<th>名字</th>
<th>存款</th>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
<tr>
<td>X</td>
<td>xx</td>
<td>$xxx</td>
</tr>
</table>
</body>
</html>CSS Box Model (盒子模型)
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
- Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
提示：在盒模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
元素的宽度和高度
元素的总宽度为 300px：
width:250px;
padding:10px;
border:5px;
margin:10px;250px (宽) + 20px (左 + 右填充) + 10px (左 + 右边框) + 20px (左 + 右边距) = 300px
总宽度为 250 像素的元素：
width:220px;
padding:10px;
border:5px;
margin:0px;220px (宽) + 20px (左 + 右填充) + 10px (左 + 右边框) + 0px (左 + 右边距) = 250px
元素的总宽度计算公式：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度计算公式：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
CSS Border (边框)
CSS 边框可以是围绕元素内容和内边距的一条或多条线，对于这些线条，可以自定义它们的样式、宽度以及颜色。
边框样式
边框样式属性指定要显示什么样的边界。
border-style 值
border-style属性用来定义边框的样式
- none: 默认无边框
- dotted: 定义一个点线框
- dashed: 定义一个虚线框
- solid: 定义实线边界
- double: 定义两个边界。 两个边界的宽度和border-width的值相同
- groove: 定义3D沟槽边界。效果取决于边界的颜色值
- ridge: 定义3D脊边界。效果取决于边界的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
- outset: 定义一个3D突出边框。 效果取决于边界的颜色值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">没有边框.</p>
<p class="dotted">一个点线边框.</p>
<p class="dashed">一个虚线边框.</p>
<p class="solid">一个实线边框.</p>
<p class="double">一个双线边框.</p>
<p class="groove">一个3D沟槽边框.</p>
<p class="ridge">一个3D脊边框.</p>
<p class="inset">一个3D嵌入边框.</p>
<p class="outset">一个3D突出边框.</p>
<p class="hidden">一个隐藏边框.</p>
</body>
</html>边框宽度
border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：
- 指定长度值，比如 2px 或 0.1em；
- 使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
注意：CSS 没有定义 3 个关键字的具体宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">一些文字</p>
<p class="two">一些文字</p>
<p class="three">一些文字</p>
</body>
</html>注意: "border-width" 属性如果单独使用则不起作用.，要先使用 "border-style" 属性来设置 borders。 .
边框颜色
border-color 属性用于设置边框的颜色，一次可以接受最多 4 个颜色值。
可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
可以设置边框的颜色为"transparent"。
注意： border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">红色边框</p>
<p class="two">绿色边框</p>
</body>
</html>边框-单独设置各边
在 CSS 中，可以指定不同的侧面不同的边框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2种不同的边框样式。</p>
</body>
</html>可以设置一个单一属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border-style:dotted solid;
}
</style>
</head>
<body>
<p>2种不同的边框样式。</p>
</body>
</html>border-style 属性可以有 1-4 个值：
border-style:dotted solid double dashed
- 上边框： dotted
- 右边框： solid
- 底边框： double
- 左边框： dashed
border-style:dotted solid double
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid
- 上、底边框是 dotted
- 左、右边框是 solid
border-style:dotted
- 四面边框是 dotted
透明边框
CSS2 引入了边框颜色值 transparent，这个值用于创建有宽度的不可见边框。
透明样式的定义：
a:link, a:visited
{
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover
{
border-color: gray;
}边框-简写属性
在"border"属性中设置：
- border-width
- border-style (required)
- border-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>这是一段文字。</p>
</body>
</html>实例
- 用简写属性来将所有四个边框属性设置于同一声明中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>一些文本。</p>
</body>
</html>- 如何设置下边框的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>- 如何设置左边框的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>
<body>
<p>一些文本</p>
</body>
</html>- 如何设置四个边框的颜色。可以设置一到四个颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">一种颜色的边框!</p>
<p class="two">两种颜色的边框!</p>
<p class="three">三种颜色的边框!</p>
<p class="four">四种颜色的边框!</p>
</body>
</html>- 如何设置右边框的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border-style:solid;
border-right-color:#ff0000;
}
</style>
</head>
<body>
<p>一些文本。</p>
</body>
</html>CSS 边框属性
| 属性 | 描述 |
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| border-bottom | 简写属性，用于把下边框的所有属性设置到一个声明中。 |
| border-bottom-color | 设置元素的下边框的颜色。 |
| border-bottom-style | 设置元素的下边框的样式。 |
| border-bottom-width | 设置元素的下边框的宽度。 |
| border-left | 简写属性，用于把左边框的所有属性设置到一个声明中。 |
| border-left-color | 设置元素的左边框的颜色。 |
| border-left-style | 设置元素的左边框的样式。 |
| border-left-width | 设置元素的左边框的宽度。 |
| border-right | 简写属性，用于把右边框的所有属性设置到一个声明中。 |
| border-right-color | 设置元素的右边框的颜色。 |
| border-right-style | 设置元素的右边框的样式。 |
| border-right-width | 设置元素的右边框的宽度。 |
| border-top | 简写属性，用于把上边框的所有属性设置到一个声明中。 |
| border-top-color | 设置元素的上边框的颜色。 |
| border-top-style | 设置元素的上边框的样式。 |
| border-top-width | 设置元素的上边框的宽度。 |
CSS 轮廓（outline）属性
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓属性指定了样式，颜色和外边框的宽度。
轮廓属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
实例
- 使用outline属性在元素周围画一条线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>一些文本</p>
</body>
</html>- 如何设置轮廓的样式
<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">一个点线轮廓</p>
<p class="dashed">一个虚线轮廓</p>
<p class="solid">一个实线轮廓</p>
<p class="double">一个双边轮廓</p>
<p class="groove">一个3D沟槽轮廓</p>
<p class="ridge">一个3D脊边轮廓</p>
<p class="inset">一个3D嵌入轮廓</p>
<p class="outset">一个3D突出轮廓</p>
</body>
</html>- 如何设置轮廓的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
border:1px solid red;
outline-style:dotted;
outline-color:#00ff00;
}
</style>
</head>
<body>
<p>一些文本</p>
</body>
</html>- 如何设置轮廓的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
p.two
{
border:1px solid red;
outline-style:dotted;
outline-width:3px;
}
</style>
</head>
<body>
<p class="one">这是一个段落中的一些文本</p>
<p class="two">这是一个段落中的一些文本</p>
</body>
</html>CSS 轮廓
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
所有 CSS 轮廓属性
| 属性 | 说明 | 值 |
| outline | 在一个声明中设置所有的外边框属性 | outline-color outline-style outline-width inherit |
| outline-color | 设置外边框的颜色 | color-name hex-number rgb-number invert inherit |
| outline-style | 设置外边框的样式 | none dotted dashed solid double groove ridge inset outset inherit |
| outline-width | 设置外边框的宽度 | thin medium thick length inherit |
CSS Margin(外边距)
CSS Margin (外边距)属性定义元素周围的空间。
CSS Margin 属性接受任何长度单位、百分数值甚至负值。
Margin
margin 清除周围的元素（外边框）的区域。margin 没有背景颜色，是完全透明的
margin 可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
可能的值
| 值 | 说明 |
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
Margin 可以使用负值，重叠的内容。
CSS Padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
Padding（填充）
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
可能的值
| 值 | 说明 |
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
提示：CSS padding 属性可以使用长度值或百分比值，但与 margin 属性不同，它不允许使用负值。
内边距的百分比数值
CSS padding 属性的百分比数值是相对于其父元素的 width 计算的，如果改变了父元素的 width，则它们也会改变。
将段落的内边距设置为父元素 width 的 20%：
p {padding: 20%;}假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<div style="width: 200px;border: 1px solid #616161">
<p>这个段落包含在一个宽度为200像素的DIV中。</p>
</div>
</body>
</html>注意：上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
background-color:blue;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定填充的段落。</p>
<p class="padding">这是一个有指定填充的段落。</p>
</body>
</html>填充 - 简写属性
可以在一个属性中指定的所有填充属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
background-color:blue;
}
p.padding
{
padding:25px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>Padding 属性，可以有一到四个值：
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
实例
- 使用缩写属性设置在一个声明中的所有填充属性，可以有一到四个值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.ex1 {padding:2cm;}
p.ex2 {padding:0.5cm 3cm;}
</style>
</head>
<body>
<p class="ex1">这段文字每边的内边距相等。两边的衬垫是2cm.</p>
<p class="ex2">该文本的上下padding为0.5cm，左右padding为3cm.</p>
</body>
</html>- 如何设置元素左填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.padding {padding-left:2cm;}
p.padding2 {padding-left:50%;}
</style>
</head>
<body>
<p>这是一个没有左内边距的文本.</p>
<p class="padding">此文本的左内距为2厘米.</p>
<p class="padding2">此文本的左填充为50%.</p>
</body>
</html>- 如何设置元素右填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.padding {padding-right:2cm;}
p.padding2 {padding-right:50%;}
</style>
</head>
<body>
<p>This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%.</p>
</body>
</html>- 如何设置元素上填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.padding {padding-top:2cm;}
p.padding2 {padding-top:50%;}
</style>
</head>
<body>
<p>这是一个没有顶部填充的文本.</p>
<p class="padding">此文本顶部有2厘米的填充.</p>
<p class="padding2">此文本的顶部填充为50%。</p>
</body>
</html>- 如何设置元素下填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.padding {padding-bottom:2cm;}
p.padding2 {padding-bottom:50%;}
</style>
</head>
<body>
<p>这是一个没有底部填充的文本.</p>
<p class="padding">此文本的底部填充为2厘米.</p>
<p class="padding2">此文本的底部填充为50%.</p>
</body>
</html>所有的CSS填充属性
| 属性 | 说明 |
| padding | 使用缩写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
CSS 分组和嵌套
CSS 分组 和 嵌套 选择器
CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。
CSS 嵌套适用于选择器内部的选择器的样式。
分组选择器
在样式表中有很多具有相同样式的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<h2>这是一个二级标题。</h2>
<p>这是一个段落。</p>
</body>
</html>为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1,h2,p
{
color:green;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<h2>这是一个二级标题。</h2>
<p>这是一个段落。</p>
</body>
</html>提示：您可以对任意多个选择器进行分组，CSS 对此没有任何限制。
嵌套选择器
它可能适用于选择器内部的选择器的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>此段落文本为蓝色，居中对齐。</p>
<div class="marked">
<p>这一段没有蓝色文字。</p>
</div>
</body>
</html>CSS 尺寸
CSS 尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
实例
- 如何设置不同元素的高度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:50px;
width:300px;
}
</style>
</head>
<body>
<img class="normal" src=" " width="95" height="80" /><br>
<img class="big" src=" " width="95" height="80" />
<p class="ex">该段落的高度为50px,宽度为300px.</p>
<p>这是一个段落中的一些文本. </p>
</body>
</html>- 如何使用百分比值设置元素的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:30%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src=" " width="95" height="84" /><br>
<img class="big" src=" " width="95" height="84" /><br>
<img class="small" src=" " width="95" height="84" />
</body>
</html>- 如何使用像素值来设置元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img {width:150px;}
</style>
</head>
<body>
<img src=" " width="95" height="80" />
</body>
</html>- 如何设置元素的最大高度
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
p
{
max-height:50px;
background-color:green;
}
</style>
</head>
<body>
<p>本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。本段落的最大高度被设置为 50px。</p>
</body>
</html>- 如何使用百分比值来设置元素的最大宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
max-width:20%;
background-color:green;
}
</style>
</head>
<body>
<p>这是一些文本. 这是一些文本. 这是一些文本.</p>
</body>
</html>- 如何设置元素的最小高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
min-height:100px;
background-color:green;
}
</style>
</head>
<body>
<p>这个段落的最小高度设置为100px.</p>
</body>
</html>- 如何使用像素值设置元素的最小宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p
{
min-width:150px;
background-color:green;
}
</style>
</head>
<body>
<p>这个段落的最小宽度设置为150px.</p>
</body>
</html>所有CSS 尺寸属性
| 属性 | 描述 |
| height | 设置元素的高度 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
CSS Display (显示) 与 Visibility（可见性）
CSS display 属性和 visibility 属性都可以用来隐藏某个元素。
display 属性设置一个元素应如何显示，visibility 属性指定一个元素应可见还是隐藏。
隐藏元素 - display:none 或 visibility:hidden
隐藏一个元素可以通过把 display 属性设置为"none"，或把 visibility 属性设置为"hidden"。
请注意，这两种方法会产生不同的结果。
visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
也就是说，该元素虽然被隐藏了，但仍然会影响布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。
也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>注意,隐藏标题没有占用空间.</p>
</body>
</html>CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
- <h1>
- <p>
- <div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
- <span>
- <a>
如何改变一个元素显示
可以更改内联元素为块元素，也可以更改块元素为内联元素。
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline}
</style>
</head>
<body>
<p>将此链接列表显示为水平菜单：</p>
<ul>
<li><a href=" " target="_blank">HTML</a></li>
<li><a href=" " target="_blank">CSS</a></li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>XX</h2>
<span>xxxxxx</span>
<span>xxx</span>
<h2>YY</h2>
<span>yyyyyy</span>
<span>yyy</span>
</body>
</html>注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为 display:block 是不允许有它内部的嵌套块元素。
实例
- 如何显示一个元素的内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p {display:inline;}
</style>
</head>
<body>
<p>值为“inline”的显示属性将导致</p>
<p>两个元素之间没有距离.</p>
</body>
</html>- 如何显示一个元素的块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
span {display:block;}
</style>
</head>
<body>
<span>结果是一个值为“block”的显示属性</span>
<span>两个元素之间的换行符.</span>
</body>
</html>- 如何使用表的collapse属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
tr.collapse {visibility:collapse;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>XXX</td>
<td>YYY</td>
</tr>
<tr class="collapse">
<td>XXX</td>
<td>ZZZ</td>
</tr>
</table>
</body>
</html>CSS Positioning (定位)
CSS position 属性，允许您将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
Positioning (定位)
CSS 定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。他们也有不同的工作方式，这取决于定位方法.
有四种不同的定位方法。
Static 定位
HTML 元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right 影响。
Fixed 定位
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
</style>
</head>
<body>
<p class="pos_fixed">放置更多的文字</p>
<p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p><p>一些文字</p>
</body>
</html>Fixed 定位使元素的位置与文档流无关，因此不占据空间。
Fixed 定位的元素和其他元素重叠。
Relative 定位
相对定位元素的定位是相对其正常位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是一个没有位置的标题</h2>
<h2 class="pos_left">此标题根据其正常位置向左移动</h2>
<h2 class="pos_right">此标题根据其正常位置向右移动</h2>
</body>
</html>可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h2.pos_top
{
position:relative;
top:-50px;
}
</style>
</head>
<body>
<h2>这是一个没有位置的标题</h2>
<h2 class="pos_top">此标题根据其正常位置向上移动</h2>
</body>
</html>注意：即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h2
{
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>这是一个绝对位置的标题</h2>
</body>
</html>Absolutely 定位使元素的位置与文档流无关，因此不占据空间。
Absolutely 定位的元素和其他元素重叠。
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img src=" " width="100" height="140" />
</body>
</html>具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意： 如果两个定位元素重叠，没有指定 z - index，最后定位在 HTML 代码中的元素将被显示在最前面。
实例
- 如何设置元素的外形。该元素被剪裁成这种形状，并显示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src=" " width="100" height="140" />
</body>
</html>- overflow属性创建一个滚动条，当一个元素的内容在指定的区域过大时如何设置以适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>overflow:滚动</p>
<div class="scroll">当您希望更好地控制布局时，可以使用溢出属性. 默认值是可见的.</div>
<p>overflow:隐藏</p>
<div class="hidden">当您希望更好地控制布局时，可以使用溢出属性. 默认值是可见的.</div>
</body>
</html>- 如何设置浏览器来自动处理溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<div>
当你想更好的控制布局时你可以使用 overflow 属性。尝试修改 overflow 属性为: visible, hidden, scroll, 或 inherit 并查看效果。 默认值为 visible。
</div>
</body>
</html>- 如何改变光标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<p>将鼠标移动到这些字上改变鼠标样式光标.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">十字</span><br>
<span style="cursor:default">默认的</span><br>
<span style="cursor:e-resize">e-调整</span><br>
<span style="cursor:help">帮助</span><br>
<span style="cursor:move">移动</span><br>
<span style="cursor:n-resize">n-调整</span><br>
<span style="cursor:ne-resize">ne-调整</span><br>
<span style="cursor:nw-resize">nw-调整</span><br>
<span style="cursor:pointer">指针</span><br>
<span style="cursor:progress">前进等待</span><br>
<span style="cursor:s-resize">s-调整</span><br>
<span style="cursor:se-resize">se-调整</span><br>
<span style="cursor:sw-resize">sw-调整</span><br>
<span style="cursor:text">下一个</span><br>
<span style="cursor:w-resize">w-调整</span><br>
<span style="cursor:wait">等待</span><br>
</body>
</html>所有的CSS定位属性
| 属性 | 说明 | 值 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 | auto length % inherit |
| clip | 剪辑一个绝对定位的元素 | shape auto inherit |
| cursor | 显示光标移动到指定的类型 | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 | auto length % inherit |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 | auto hidden scroll visible inherit |
| position | 指定元素的定位类型 | absolute fixed relative static inherit |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 | auto length % inherit |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 | auto length % inherit |
| z-index | 设置元素的堆叠顺序 | number auto inherit |
CSS Float（浮动）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>
<img src=" " width="270" height="80" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.x
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<img class="x" src=" " width="107" height="90">
<img class="x" src=" " width="107" height="80">
<img class="x" src=" " width="116" height="90">
<img class="x" src=" " width="120" height="90">
<img class="x" src=" " width="107" height="90">
<img class="x" src=" " width="107" height="80">
<img class="x" src=" " width="116" height="90">
<img class="x" src=" " width="120" height="90">
</body>
</html>清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.x
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
</head>
<body>
<img class="x" src=" " width="207" height="90">
<img class="x" src=" " width="107" height="80">
<img class="x" src=" " width="116" height="90">
<img class="x" src=" " width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="x" src=" " width="107" height="90">
<img class="x" src=" " width="107" height="80">
<img class="x" src=" " width="116" height="90">
<img class="x" src=" " width="120" height="90">
</body>
</html>实例
- 为图像添加边框和边距并浮动到段落的右侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
</head>
<body>
<img src=" " width="250" height="60" />
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>
</body>
</html>- 标题和图片向右侧浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div
{
float:right;
width:300px;
margin:0 0 10px 10px;
padding:10px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src=" " width="300" height="80" /><br>
CSS
</div>
<p>
这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.
</p>
</body>
</html>- 改变样式，让段落的第一个字母浮动到左侧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>
<body>
<p>
<span>这</span>是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>
</html>- 使用 float 创建一个网页页眉、页脚、左边的内容和主要内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="header">CSS</h1>
</div>
<div class="left">
<p>......</p>
</div>
<div class="content">
<h2>css</h2>
<p>......</p>
<p>......</p>
</div>
<div class="footer">......</div>
</div>
</body>
</html>CSS 中所有的浮动属性
| 属性 | 描述 | 值 |
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
CSS 水平对齐 (Horizontal Align)
块元素对齐
块元素是一个元素，占用了全宽，前后都是换行符。
块元素的例子：
- <h1>
- <p>
- <div>
中心对齐,使用margin属性
块元素可以把左，右页边距设置为"自动"对齐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>............</p>
<p>............</p>
</div>
</body>
</html>提示: 如果宽度是 100％，对齐是没有效果的。
使用 position 属性设置左，右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>。。。。。。</p>
<p>。。。。。。</p>
</div>
</body>
</html>注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。
使用 float 属性设置左，右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p>。。。。。。</p>
<p>。。。。。。</p>
</div>
</body>
</html>使用 Padding 设置垂直居中对齐
CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:
.center { padding: 70px 0; border: 3px solid green; }如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
.center { padding: 70px 0; border: 3px solid green; text-align: center; }CSS 组合选择符
组合选择符说明了两个选择器直接的关系。
CSS3 中包含了四种组合方式：
- 后代选取器(以空格分隔)
- 子元素选择器(以大于号分隔）
- 相邻兄弟选择器（以加号分隔）
- 普通兄弟选择器（以波浪号分隔）
后代选取器
后代选取器匹配所有指定元素的后代元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div p
{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>子元素选择器
与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div>p
{
background-color:green;
}
</style>
</head>
<body>
<h1>XXXXXX</h1>
<div>
<h2>XXX</h2>
<p>YYYYYY</p>
</div>
<div>
<span><p>YYY</p></span>
</div>
<p>ZZZZZZ</p>
</body>
</html>相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div+p
{
background-color:green;
}
</style>
</head>
<body>
<h1>XXXXXX</h1>
<div>
<h2>XXX</h2>
<p>YYY</p>
</div>
<p>YYYYYY</p>
<p>ZZZZZZ</p>
</body>
</html>普通相邻兄弟选择器
普通兄弟选择器选取所有指定元素的相邻兄弟元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div~p
{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>CSS 伪类
CSS 伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。
语法
selector:pseudo-class {property:value;}CSS 类使用伪类：
selector.class:pseudo-class {property:value;}anchor 伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
</style>
</head>
<body>
<p><b><a href=" " target="_blank">这是一个链接</a></b></p>
</body>
</html>注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
CSS - :first - child 伪类
可以使用 :first-child 伪类来选择元素的第一个子元素
匹配第一个 <p> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是一些文字。</p>
<p>这是一些文字。</p>
</body>
</html>匹配所有 <p> 元素中的第一个 <i> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p><i>XX</i> <i>XX</i></p>
<p><i>YY</i> <i>YY</i></p>
</body>
</html>匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p><i>XX</i> <i>XX</i></p>
<p><i>YY</i> <i>YY</i></p>
</body>
</html>CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>文字 <q lang="no">引用</q> 文字。</p>
</body>
</html>实例
- 如何为超链接添加其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p><b><a class="one" href=" " target="_blank">这个链接会改变字体颜色</a></b></p>
<p><b><a class="two" href=" " target="_blank">这个链接会改变字体大小</a></b></p>
<p><b><a class="three" href=" " target="_blank">这个链接会改变背景颜色</a></b></p>
<p><b><a class="four" href=" " target="_blank">这个链接会改变字体样式</a></b></p>
<p><b><a class="five" href=" " target="_blank">这个链接会改变下划线</a></b></p>
</body>
</html>- 如何使用 :focus 伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
input:focus
{
background-color:green;
}
</style>
</head>
<body>
<form action="demo-form" method="get">
第一个名字: <input type="text" name="fname" /><br>
第二个名字: <input type="text" name="lname" /><br>
<input type="submit" value="提交" />
</form>
</body>
</html>所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-ty | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
CSS 伪元素
CSS 伪元素是用来添加一些选择器的特殊效果。
CSS 伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。
语法
selector:pseudo-element {property:value;}CSS类使用伪元素：
selector.class:pseudo-element {property:value;}:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
<!DOCTYPE html>
<html>
<head>
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>first line伪元素</p>
</body>
</html>注意："first-line" 伪元素只能用于块级元素。
下面的属性应用于 "first-line" 伪元素：
- font properties
- color properties
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>Xxxxxx</p>
</body>
</html>注意： "first-letter" 伪元素只能用于块级元素。
下面的属性应用于 "first-letter" 伪元素：
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (only if "float" is "none")
- text-transform
- line-height
- float
- clear
Multiple Pseudo-elements
结合多个伪元素使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>您可以组合：first letter和：first-line伪元素，为文本的第一个字母和第一行添加特殊效果！</p>
</body>
</html>CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1:before
{
content:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715939111&t=5c15c27ffd39521a520713c909a1535e);
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
h1:after
{
content:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1715939111&t=5c15c27ffd39521a520713c909a1535e);
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
CSS 导航栏
导航栏=链接列表
作为标准的 HTML 基础一个导航栏是必须的。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li> 元素非常有意义。
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>删除列表中的边距和填充
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>- list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
- 移除浏览器的默认设置将边距和填充设置为 0
垂直导航栏
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
完全样式的垂直导航栏的示例.
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#home">主页</a>
</li>
<li>
<a href="#news">新闻</a>
</li>
<li>
<a href="#contact">联系</a>
</li>
<li>
<a href="#about">关于</a>
</li>
</ul>
</body>
</html>水平导航栏
有两种方法创建横向导航栏。使用内联或浮动的列表项。
如果你想链接到具有相同的大小，你必须使用浮动的方法。
内嵌列表项
建立一个横向导航栏的方法之一是指定元素。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>- display:inline - 默认情况下，<li> 元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。
完全样式的水平导航栏的示例.
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>浮动列表项
对于所有的链接宽度相等，浮动元素，并指定为元素的宽度。
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>- float:left - 使用浮动块元素的幻灯片彼此相邻
- display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
- display:inline; -默认情况下，元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行 。
完全样式的横向导航栏的示例
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:100px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#home">主页</a>
</li>
<li>
<a href="#news">新闻</a>
</li>
<li>
<a href="#contact">联系</a>
</li>
<li>
<a href="#about">关于</a>
</li>
</ul>
</body>
</html>CSS 下拉菜单
基本下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>鼠标移动到我这！</span>
<div class="dropdown-content">
<p>HTML</p>
<p>CSS</p>
</div>
</div>
</body>
</html>HTML 部分：
- 可以使用任何的 HTML元素来打开下拉菜单，如：<span>, 或 a <button> 元素。
- 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。
- 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
- .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
- .dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。可以随意修改它。 注意: 如果想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。
- 使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。
- :hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
下拉菜单
创建下拉菜单，并允许用户选取列表中的某一项：
在下拉列表中添加了链接，并设置了样式。
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.dropbtn
{
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
.dropdown:hover .dropbtn
{
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href=" ">HTML</a>
<a href=" ">CSS</a>
<a href=" ">JS</a>
</div>
</div>
</body>
</html>下拉内容对齐方式
float:left;
float:right;
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.dropbtn
{
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
.dropdown:hover .dropbtn
{
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown" style="float:left;">
<button class="dropbtn">左</button>
<div class="dropdown-content" style="left:0;">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JS</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">右</button>
<div class="dropdown-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JS</a>
</div>
</div>
</body>
</html>实例
- 如何在下拉菜单中添加图片
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
.dropdown
{
position: relative;
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content
{
display: block;
}
.desc
{
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<img src=" " alt="xxx" width="100" height="50">
<div class="dropdown-content">
<img src=" " alt="xxx" width="400" height="200">
<div class="desc">......</div>
</div>
</div>
</body>
</html>- 如何在导航条上添加下拉菜单
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="utf-8">
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background-color: #111;
}
.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</ul>
</body>
</html>CSS 图片廊
使用CSS创建图片廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div.img
{
margin: 2px;
border: 1px solid #000000;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img
{
display: inline;
margin: 3px;
border: 1px solid #ffffff;
}
div.img a:hover img
{
border: 1px solid #0000ff;
}
div.desc
{
text-align: center;
font-weight: normal;
width: 120px;
margin: 2px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href=" "><img src=" " alt="x" width="110" height="90"></a>
<div class="desc">描述</div>
</div>
<div class="img">
<a target="_blank" href=" "><img src=" " alt="x" width="110" height="90"></a>
<div class="desc">描述</div>
</div>
<div class="img">
<a target="_blank" href=" "><img src=" " alt="x" width="110" height="90"></a>
<div class="desc">描述</div>
</div>
</body>CSS 图像透明/不透明
创建一个透明图像
CSS3中属性的透明度是 opacity.
Opacity 属性值从0.0 - 1.0。值越小，使得元素更加透明。
alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
<!DOCTYPE html>
<html>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src=" " width="200" height="110" alt="x">
<img src=" " width="200" height="110" alt="y">
</body>
</html>图像的透明度 - 悬停效果
<!DOCTYPE html>
<html>
<head>
<style>
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<img src=" " width="150" height="113" alt="x">
<img src=" " width="150" height="113" alt="x">
</body>
</html>透明的盒子中的文字
创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。
在第一个 div 内部创建一个较小的 div 元素。div 也有一个固定的宽度，背景颜色，边框是透明的。
透明的 div 里面，在 P 元素内部添加一些文本。
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 500px;
height: 250px;
background: url(https://b0.bdstatic.com/8852a36f35474152e7c77bbc9e991449.jpg@h_1280) repeat;
border: 2px solid black;
}
div.transbox
{
width: 405px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
filter:alpha(opacity=60);
}
div.transbox p
{
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>金樽清酒斗十千，玉盘珍羞直万钱。
停杯投箸不能食，拔剑四顾心茫然。
欲渡黄河冰塞川，将登太行雪满山。
闲来垂钓碧溪上，忽复乘舟梦日边。
行路难，行路难，多歧路，今安在？
长风破浪会有时，直挂云帆济沧海。</p>
</div>
</div>
</body>
</html>CSS 图像拼合技术
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
实例
<!DOCTYPE html>
<html>
<head>
<style>
img.home
{
width: 46px;
height: 44px;
background: url( ) 0 0;
}
img.next
{
width: 43px;
height: 44px;
background: url( ) -91px 0;
}
</style>
</head>
<body>
<img class="home" src=" "><br><br>
<img class="next" src=" ">
</body>
</html>- <img class="home" src="img_trans.gif" /> -因为不能为空，src 属性只定义了一个小的透明图像。显示的图像将是我们在 CSS 中指定的背景图像
- 宽度：46px;高度：44px; - 定义我们使用的那部分图像
- background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左 0px，顶部 0px）
创建一个导航列表
使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表。
使用一个 HTML 列表，因为它可以链接，同时还支持背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
#navlist
{
position:relative;
}
#navlist li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#navlist li, #navlist a
{
height:44px;
display:block;
}
#home
{
left:0px;
width:46px;
}
#home
{
background:url(' ') 0 0;
}
#prev
{
left:63px;
width:43px;
}
#prev
{
background:url(' ') -47px 0;
}
#next
{
left:129px;
width:43px;
}
#next
{
background:url(' ') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href=" "></a></li>
<li id="prev"><a href=" "></a></li>
<li id="next"><a href=" "></a></li>
</ul>
</body>
</html>- #navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
- #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding 设置为0，列表样式被删除，所有列表项是绝对定位
- #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是 44px
- #home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是 46px
- #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
- #prev{left:63px;width:43px;} - 左外边距定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
- #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像向右侧定位47px（＃home宽46px+分隔线的1px）
- #next{left:129px;width:43px;} - 左外边距定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
- >#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像向右侧定位91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
图像拼合 - 悬停效果
<!DOCTYPE html>
<html>
<head>
<style>
#navlist
{
position:relative;
}
#navlist li
{
margin:0;
padding:0;
list-style:none;
position:absolute;
top:0;
}
#navlist li, #navlist a
{
height:48px;
display:block;
}
#home
{
left:0px;
width:48px;
}
#home
{
background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') 0 0;
}
#home a:hover
{
background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') 0 -48px;
}
#prev
{
left:63px;
width:46px;}
#prev
{
background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') -50px 0;
}
#prev a:hover
{
background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') -50px -48px;
}
#next
{
left:129px;
width:48px;
}
#next
{
background:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') -94px 0;
}
#next a:hover
{
background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201806%2F28%2F20180628000317_E8Thc.thumb.400_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716011292&t=b283c5bbd888a1f0a845bd20c54d8717') -94px -48px;
}
</style>
</head>
<body>
<ul id="navlist">
<li id="home"><a href=" "></a></li>
<li id="prev"><a href=" "></a></li>
<li id="next"><a href=" "></a></li>
</ul>
</body>
</html>- 由于该列表项包含一个链接，我们可以使用：hover 伪类
- #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px
CSS 媒体类型
媒体类型
某些 CSS 属性仅仅被设计为针对某些媒介。比方说 voice-family 属性被设计为针对听觉用户终端。其他一些属性可用于不同的媒体类型。例如，font-size属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
<style>
@media screen
{
p.test
{
font-family:verdana,sans-serif;
font-size:14px;
}
}
@media print
{
p.test
{
font-family:times,serif;
font-size:10px;
}
}
@media screen,print
{
p.test
{
font-weight:bold;
}
}
</style>其他媒体类型
注意：媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备。 |
CSS 属性选择器
CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。
属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">你好</h1>
<a title=" " href=" ">XXX</a>
</body>
</html>属性和值选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title=x]
{
border:5px solid green;
}
</style>
</head>
<body>
<img title="x" src=" " width="100" height="20" />
<br>
<a title="x" href=" ">xxx</a>
</body>
</html>属性和值的选择器 - 多值
包含指定值的 title 属性的元素样式的例子，使用（~）分隔属性和值
<!DOCTYPE html>
<html>
<head>
<style>
[title~=x]
{
color:blue;
}
</style>
</head>
<body>
<h2 title="x y">HTML</h2>
<p title="z x">CSS</p>
</body>
</html>包含指定值的 lang 属性的元素样式的例子，使用（|）分隔属性和值
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=x]
{
color:blue;
}
</style>
</head>
<body>
<p lang="x">HTML</p>
<p lang="x-y">CSS</p>
<p lang="x-z">JS</p>
</body>
</html>表单样式
属性选择器样式无需使用 class 或 id 的形式
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:green;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="demo-form" method="get">
Firstname:<input type="text" name="fname" value="x" size="20">
Lastname:<input type="text" name="lname" value="y" size="20">
<input type="button" value="Button">
</form>
</body>
</html>
2738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
