层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 文件扩展名为 .css。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基本结构</title>
<style>
span {
color:red;
font-weight: 900;
}
</style>
</head>
<body>
<span>我是一段文字</span>
</body>
</html>CSS 语法
CSS 语法由两个主要的部分构成：选择器，以及一条或多条声明：
选择器 {
属性:值;
属性:值;
....
属性:值;
}选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
- CSS 声明总是以分号 ; 结束，声明总以大括号 {} 括起来。
- 为了让 CSS 可读性更强，你可以每行只描述一个属性。
CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束。
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}CSS 选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
简单选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。
#l1{
color:red;
}
#l2,#l3,#s1{
color:#bc7;
font-size: 16px;
} class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 . 号显示。
.c1{
color:#8f5;
font-weight: 900;
}元素选择器
元素选择器用于描述指定类型元素的样式。元素选择器根据元素名称来选择 HTML 元素。
label{
color:red;
font-size: 4em;
}组合器选择器
组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
- 后代选择器 (空格)
- 子选择器 (>)
- 相邻兄弟选择器 (+)
- 通用兄弟选择器 (~)
后代选择器
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 <div> 元素内的所有 <p> 元素：
div p{
color:red;
}子选择器
子选择器匹配属于指定元素子元素的所有元素。
下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：
div > p{
color:red;
}相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：
div + p {
color:red;
}通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：
div ~ p {
color:red;
}伪类选择器
伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式。
- 为已访问和未访问链接设置不同的样式。
- 设置元素获得焦点时的样式。
语法
selector:pseudo-class {
property: value;
}例如，如下代码：
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}注意：a:hover 必须定义在的 a:link 和 a:visited 之后，a:active 必须定义在 a:hover 之后，才能生效！
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素。 |
| :enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 |
| :focus | input:focus | 选择获得焦点的 <input> 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not(p) | 选择每个非 <p> 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 |
| :optional | input:optional | 选择不带 "required" 属性的 <input> 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
| :read-only | input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 |
| :read-write | input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 |
| :required | input:required | 选择指定了 "required" 属性的 <input> 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如，它可用于：
- 设置元素的首字母、首行的样式。
- 在元素的内容之前或之后插入内容。
语法
selector::pseudo-element {
property: value;
}<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>
</body>
</html>所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 <p> 元素之后插入内容。 |
| ::before | p::before | 在每个 <p> 元素之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分。 |
属性选择器
为带有特定属性的 HTML 元素设置样式。我们可以设置带有特定属性或属性值的 HTML 元素的样式。
语法
选择器[attribute表达式] {
属性: 值;
}所有 CSS 属性选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性的所有元素。 |
| [attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
| [attribute~=value] | [title~=flower] | 选择带有包含 "flower" 一词的 title 属性的所有元素。 |
| [attribute|=value] | [lang|=en] | 选择带有以 "en" 开头的 lang 属性的所有元素。 |
| [attribute^=value] | a[href^="https"] | 选择其 href 属性值以 "https" 开头的每个 <a> 元素。 |
| [attribute$=value] | a[href$=".pdf"] | 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。 |
| [attribute**=value*] | a[href*="w3school"] | 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。 |
使用 CSS
当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。
有三种插入样式表的方法：
- 外部 CSS
- 内部 CSS
- 行内 CSS
外部 CSS
通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
1. 创建 guanwei.css 文件。
label{
color: red;
font-size: 18px;
}2. 在 HTML 页面中引入这个 css 文件就能影响到我们的标签了。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="guanwei.css">
</head>
<body>
<label>我是一行内容，被外部CSS文件所影响！</label>
</body>
</html>内部 CSS
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <style> 元素中进行定义。它只会影响到当前页面。
<!DOCTYPE html>
<html>
<head>
<style>
label{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<label>我是一行内容，被内部CSS文件所影响！</label>
</body>
</html>行内 CSS
行内样式，也称内联样式。可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label style="color:red;font-size:22px;">我是一行内容，被行内CSS文件所影响！</label>
</body>
</html>层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
- 行内样式（在 HTML 元素中）。
- 外部和内部样式表（在 head 部分），根据引用顺序决定优先级。
- 浏览器默认样式。
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。
CSS 文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：
- 颜色名 - 比如 "red"。
- 十六进制值 - 比如 "#ff0000"，也可以写成 "#f00"。
- RGB 值 - 比如 "rgb(255,0,0)"。
页面的默认文本颜色是在 body 选择器中定义的。
body {
color: red;
}
h1 {
color: #3af;
}背景色
我们可以使用 background-color 属性设置背景色。
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}文本对齐
text-align 属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。
h1 {
text-align: center;
}
#l1 {
text-align: left;
}
.c2 {
text-align: right;
}文本方向
direction 属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。
p {
direction: rtl;
}direction 属性值：
| 值 | 描述 |
|---|---|
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
文字装饰
text-decoration 属性规定添加到文本的修饰。这个属性允许对文本设置某种效果，如加下划线。如果后代元素没有自己的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:none;}文字间距
文字间距有五种显示效果：
- 文字缩进：text-indent 属性用于指定文本第一行的缩进。
- 字母间距：letter-spacing 属性用于指定文本中字符之间的间距。
- 行高：line-height 属性用于指定行之间的间距。
- 字间距：word-spacing 属性用于指定文本中单词之间的间距。
- 空白：white-space 属性指定元素内部空白的处理方式。
/* 文字缩进 */
#p1 {
text-indent: 50px;
}
/* 字母间距 */
#p1 {
letter-spacing: 10px;
}
/* 行高 */
#p1 {
line-height: 2.8;
}
/* 字间距 */
#p1 {
word-spacing: 30px;
}
/* 空白 */
#p1 {
white-space: nowrap;
}文本空白的值描述：
| 值 | 描述 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
文本阴影
text-shadow 属性为文本添加阴影。
属性值：
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。模糊的效果。 |
| color | 可选。阴影的颜色。 |
text-shadow: 10px 6px 10px red;字体
字体选择很重要，选择正确的字体会对网站的用户体验产生巨大影响。正确的字体可以为您的品牌创造强有力的形象。
使用易于阅读的字体很重要。字体为您的文本增加了价值。为字体选择正确的颜色和文本大小也很重要。
通用字体族
在 CSS 中，有五个通用字体族：
- 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
- 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
- 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
- 草书字体（Cursive）- 模仿了人类的笔迹。
- 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
所有不同的字体名称都属于这五个通用字体系列之一。
| 通用字体族 | 字体名称实例 |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
font-family 属性
在 CSS 中，我们使用 font-family 属性规定文本的字体。
注意：如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。
/* 如果浏览器不支持第一种字体，他将尝试下一种字体。 */
p{font-family:"Times New Roman", Times, serif;}font-style 属性
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
#p1{font-style:normal;}
#p2{font-style:italic;}
#p3{font-style:oblique;}font-size 属性
font-size 属性用于设置文本的大小。
字体大小的值可以是绝对或相对的大小。
- 绝对大小：
- 设置一个指定大小的文本。
- 不允许用户在所有浏览器中改变文本大小。
- 确定了输出的物理尺寸时绝对大小很有用。
- 相对大小：
- 相对于周围的元素来设置大小。
- 允许用户在浏览器中改变文字大小。
注意：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
label {font-size:100%;}
span {font-size:2.5em;} /* 40px/16=2.5em */font-weight 属性
font-weight 属性设置文本的粗细。
属性值：
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
#p1 {font-weight:normal;}
#p2 {font-weight:bold;}
#p3 {font-weight:900;}CSS 链接
通过 CSS，可以用不同的方式设置链接的样式。链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。
设置链接样式
可以根据链接处于什么状态来设置链接的不同样式。四种链接状态分别是：
- a:link - 正常的，未访问的链接。
- a:visited - 用户访问过的链接。
- a:hover - 用户将鼠标悬停在链接上时。
- a:active - 链接被点击时。
/* 未被访问的链接 */
a:link {
color: red;
}
/* 已被访问的链接 */
a:visited {
color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
color: hotpink;
}
/* 被选择的链接 */
a:active {
color: blue;
}如果为多个链接状态设置样式，请遵循如下顺序规则：
- a:hover 必须 a:link 和 a:visited 之后
- a:active 必须在 a:hover 之后
文本装饰
text-decoration 属性主要用于从链接中删除下划线：
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}背景色
background-color 属性可用于指定链接的背景色：
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
} 链接按钮
我们可以组合了多个 CSS 属性，将链接显示为框/按钮：
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}CSS 表格
使用 CSS 可以极大地改善 HTML 表格的外观。
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
可以按顺序设置如下属性：
- border-width
- border-style（必需）
- border-color
/* 分别设置边框粗细、样式和颜色*/
table, th, td {
border: 1px solid black ;
}样式属性值：
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
表格尺寸
如需在 CSS 中设置表格尺寸，请使用 height 和 width 属性。
table {
width:50%;
height:230px;
}合并表格边框
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。
/* 为表格设置合并边框模型 */
table {
border-collapse:collapse;
}属性值：
| 值 | 描述 |
|---|---|
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
表格外边框
margin 属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
注释：允许使用负值。
/*
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px
*/
margin: 10px 5px 15px 20px;属性值：
| 值 | 描述 |
|---|---|
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 以包含元素宽度的百分比指定外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
水平对齐
text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。
默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。
td {
text-align: center;
}垂直对齐
vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。
默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。
td {
height: 50px;
vertical-align: bottom;
}表格内边距
如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性。
th, td {
padding: 15px;
text-align: left;
}可悬停表格
在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行。
tr:hover {background-color: #f5f5f5;}响应式表格
如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条。
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>CSS 列表
HTML 列表和 CSS 列表属性
在 HTML 中，列表主要有两种类型：
- 无序列表（<ul>）- 列表项用的是项目符号标记。
- 有序列表（<ol>）- 列表项用的是数字或字母标记。
CSS 列表属性使您可以：
- 为有序列表设置不同的列表项标记。
- 为无序列表设置不同的列表项标记。
- 将图像设置为列表项标记。
- 为列表和列表项添加背景色。
所有 CSS 列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。在一条声明中设置列表的所有属性。 |
| list-style-image | 指定图像作为列表项标记。 |
| list-style-position | 规定列表项标记（项目符号）的位置。 |
| list-style-type | 规定列表项标记的类型。 |
list-style 属性
list-style 简写属性在一个声明中设置所有的列表属性。
说明：该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
可以按顺序设置如下属性：
- list-style-type
- list-style-position
- list-style-image
可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
list-style-type 属性
list-style-type 属性设置列表项标记的类型。
list-style-type: value;| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认。标记是实心圆。 |
| circle | 标记是空心圆。 |
| square | 标记是实心方块。 |
| decimal | 标记是数字。 |
| decimal-leading-zero | 0开头的数字标记。(01, 02, 03, 等。) |
| lower-roman | 小写罗马数字(i, ii, iii, iv, v, 等。) |
| upper-roman | 大写罗马数字(I, II, III, IV, V, 等。) |
| lower-alpha | 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) |
| upper-alpha | 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) |
| lower-greek | 小写希腊字母(alpha, beta, gamma, 等。) |
| lower-latin | 小写拉丁字母(a, b, c, d, e, 等。) |
| upper-latin | 大写拉丁字母(A, B, C, D, E, 等。) |
| hebrew | 传统的希伯来编号方式 |
| armenian | 传统的亚美尼亚编号方式 |
| georgian | 传统的乔治亚编号方式(an, ban, gan, 等。) |
| cjk-ideographic | 简单的表意数字 |
| hiragana | 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） |
| katakana | 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） |
| hiragana-iroha | 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） |
| katakana-iroha | 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
注意：某些属性值浏览器并不兼容。
list-style-position 属性
list-style-position 属性设置在何处放置列表项标记。该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处，不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
list-style-position: inside|outside|initial|inherit;| 值 | 描述 |
|---|---|
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
list-style-image 属性
list-style-image 属性使用图像来替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
ul {
list-style-image:url("guanwei.gif");
list-style-type:square;
}| 值 | 描述 |
|---|---|
| URL | 图像的路径。 |
| none | 默认。无图形被显示。 |
| inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
9737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
