CSS 概述

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS 文件扩展名为 .css。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

	
		
		
		
	
	
		我是一段文字
	

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{
    color:red;
}

子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于

元素子元素的所有

元素：

div > p{
    color:red;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随

元素之后的所有

元素：

div + p {
    color:red;
}

通用兄弟选择器 

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于

元素的同级元素的所有

元素：

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	选择每个被选中的 元素。
:disabled	input:disabled	选择每个被禁用的 元素。
:empty	p:empty	选择没有子元素的每个 元素。
:enabled	input:enabled	选择每个已启用的 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 元素的每个 元素。
:focus	input:focus	选择获得焦点的 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 元素。
:invalid	input:invalid	选择所有具有无效值的 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 元素的每个 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个 元素的每个 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 元素的每个 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 元素的每个 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 元素。
:optional	input:optional	选择不带 "required" 属性的 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 元素。
:required	input:required	选择指定了 "required" 属性的 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 元素。
:visited	a:visited	选择所有已访问的链接。

伪元素选择器

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式。
• 在元素的内容之前或之后插入内容。

语法

selector::pseudo-element {
  property: value;
}

您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个 元素之后插入内容。
::before	p::before	在每个 元素之前插入内容。
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
::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" 开头的每个 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 元素。
[attribute**=value*]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 元素。

使用 CSS

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

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

• 外部 CSS
• 内部 CSS
• 行内 CSS

外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。

1. 创建 guanwei.css 文件。

label{
    color: red;
    font-size: 18px;
}

2. 在 HTML 页面中引入这个 css 文件就能影响到我们的标签了。

    
        
    
    
        我是一行内容，被外部CSS文件所影响！
    

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 我是一行内容，被内部CSS文件所影响！

行内 CSS

行内样式，也称内联样式。可用于为单个元素应用唯一的样式。如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

    
    
    
        我是一行内容，被行内CSS文件所影响！
    

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

1. 行内样式（在 HTML 元素中）。
2. 外部和内部样式表（在 head 部分），根据引用顺序决定优先级。
3. 浏览器默认样式。

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

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 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
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	定义更细的字符。
100 200 300 400 500 600 700 800 900	定义由细到粗的字符。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 属性。

可以按顺序设置如下属性：

1. border-width
2. border-style（必需）
3. 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 属性设置 或 中内容的水平对齐方式（左、右或居中）。

默认情况下， 元素的内容居中对齐，而 元素的内容左对齐。

td {
  text-align: center;
}

垂直对齐

vertical-align 属性设置 或 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（ 和 元素都是）。

td {
  height: 50px;
  vertical-align: bottom;
}

表格内边距

如需控制边框和表格内容之间的间距，请在 和 元素上使用 padding 属性。

th, td {
  padding: 15px;
  text-align: left;
}

可悬停表格

在 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行。

tr:hover {background-color: #f5f5f5;}

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条。

... table content ...

CSS 列表

HTML 列表和 CSS 列表属性

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

• 无序列表（
  ）- 列表项用的是项目符号标记。
  • 有序列表（
    ）- 列表项用的是数字或字母标记。

  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 元素继承。

  可以按顺序设置如下属性：

  1. list-style-type
  2. list-style-position
  3. 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 属性的值。