层叠样式表(英文全称: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 属性的值。 |