1.1 项目符号样式

我们用list-style-type属性来创建列表项目符号,所谓的项目符号就是指一个项目开头的标记符号,然而在有序列表和无序列表中有所不同

有序列表:项目符号按一定的规则有顺序地进行编号,它常见的属性值有

decimal:阿拉伯数字

decimal-leading-zero:表示前缀带零的阿拉伯数字

lower-alpha:小写英文字母

upper-alpha:大写英文字母

lower-roman:小写罗马数字

upper-roman:大写罗马数字

lower-latin:小写拉丁字母

lower-greek:小写希腊字母

 

无序列表:项目符号不按顺序进行,符号样式的属性值一样.

none:表示隐藏

disc:表示实心圆

circle:表示空心圆,默认值

square:表示正方形 1 <!DOCTYPE html>

 2  2 <html>
 3  3     <head>
 4  4         <title>List Style Type</title>
 5  5         <style type="text/css">
 6  6             ol {
 7  7                 list-style-type: lower-roman;}
 8  8         </style>
 9  9         </head>
10 10         <body>
11 11                    <h1>做家务活</h1>
12 12                    <h2>做菜</h2>
13 13                     <ol>
14 14                          <li>择菜</li>
15 15                          <li>洗菜</li>
16 16                          <li>切菜</li>
17 17                          <li>炒菜</li>
18 18                      </ol>
19 19            </body>
20    </html>

 

1.2 项目图像

项目图像就是指我们可以使用list-style-type属性来将一个图像来作为项目符号使用.该属性的值以字母url开头,后面

跟着一对圆括号.在括号里面图像的路径在双引号中给出,可同时运用到<ul>,<ol>和<li>元素中,但一般不推荐在<ol>元素中使用.

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>List Style Image</title>
 5         <style type="text/css">
 6             ul {
 7                 list-style-image: url("images/star.png");}
 8             li {
 9                 margin: 10px 0px 0px 0px;}
10         </style>
11     </head>
12 <body>
13         <h1>卫生大扫除任务</h1>
14         <h2>清理教室卫生</h2>
15         <ul>
16             <li>扫地</li>
17             <li>擦黑板</li>
18             <li>抹窗户</li>
19             <li>拖地</li>
20             <li>倒垃圾</li>
21         </ul>
22     </body>
23 </html>

同时在示例里面还展示了margin的用法,它用来增加垂直方向上列表项目之间的空隙.

 

1.3  标记的定位

默认情况下,文本都会进行缩进,list-style-type用来标记显示的位置.可选用以下两个值:

 outside:该值表明标记位于文本块的外部(左侧),也是未使用该属性的默认处理方法.

 inside:该值表明标记位于文章内部,同时文本也会缩进.

两者不同点在于一个在装有内容的盒子的外部,一个在内部.

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>List Style Position</title>
 5         <style type="text/css">
 6             ul {
 7                 width: 250px;}
 8             li {
 9                 margin: 10px;}
10             ul.illuminations {
11                 list-style-position: outside;}
12             ul.season {
13                 list-style-position: inside;}
14         </style>
15     </head>
16     <body>
17         <h3>Illuminations</h3>
18         <ul class="illuminations">
19             <li>That idol, black eyes and yellow mop, without parents or court ...</li>
20             <li>Gracious son of Pan! Around your forehead crowned with flowerets ...</li>
21             <li>When the world is reduced to a single dark wood for our four ...</li>
22         </ul>
23         <h3>A Season in Hell</h3>
24         <ul class="season">
25             <li>Once, if my memory serves me well, my life was a banquet ...</li>
26             <li>Hadn't I once a youth that was lovely, heroic, fabulous ...</li>
27             <li>Autumn already! - But why regret the everlasting sun if we are ...</li>
28         </ul>
29     </body>
30 </html>

 

1.4 列表快捷方式

列表快捷方式就是用来省略一些CSS的属性,而是直接在list-style后面直接加上属性值来布置样式的方法.

一般的属性值为样式(list-style-type),图形(list-style-image),位置(list-style-position).

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>List Style</title>
 5         <style type="text/css">
 6             ul {
 7                 list-style: inside circle;
 8                 width: 300px;}
 9             li {
10                 margin: 10px 0px 0px 0px;}
11         </style>
12     </head>
13     <body>
14         <h1>Quotes from Edgar Allan Poe</h1>
15         <ul>
16             <li>I have great faith in fools; self-confidence my friends call it.</li>
17             <li>All that we see or seem is but a dream within a dream.</li>
18             <li>I would define, in brief, the poetry of words as the rhythmical creation of Beauty.</li>
19         </ul>
20     </body>
21 </html>

 

1.5  表格属性

width:用于设置表格的宽度

padding:用于设置每个单元格与其内容之间的空隙.

text-transform:用于将表格标题中的内容转换为大写.

letter-spacing,font-size:用于为表格标题的内容增加额外的样式,前者表示字母间距,后者为字体大小

border-top,border-bottom:用来设置表格标题的上方和下方的边框.

text-align:用于将某些单元格中的书写方式设置为向左对齐或向右对齐.

background-color:用于交替改变表格行的背景颜色.

:hover:在用户把光标悬停在某个表格时将此行发亮显示

 

示例:

 1 <!DOCTYPE>
 2 <html>
 3     <head>
 4         <title>Table Properties</title>
 5         <style type="text/css">
 6             body {
 7                 font-family: Arial, Verdana, sans-serif;
 8                 color: #111111;}
 9             table {
10                 width: 600px;}
11             th, td {
12                 padding: 7px 10px 10px 10px;}
13             th {
14                 text-transform: uppercase;
15                 letter-spacing: 0.1em;
16                 font-size: 90%;
17                 border-bottom: 2px solid #111111;
18                 border-top: 1px solid #999;
19                 text-align: left;}
20             tr.even {
21                 background-color: #efefef;}
22             tr:hover {
23                 background-color: #c3e6e5;}
24             .money {
25                 text-align: right;}
26         </style>
27     </head>
28     <body>
29         <h1>First Edition Auctions</h1>
30         <table>
31             <tr>
32                 <th>Author</th>
33                 <th>Title</th>
34                 <th class="money">Reserve Price</th>
35                 <th class="money">Current Bid</th>
36             </tr>
37             <tr>
38                 <td>E.E. Cummings</td>
39                 <td>Tulips & Chimneys</td>
40                 <td class="money">$2,000.00</td>
41                 <td class="money">$2,642.50</td>
42             </tr>
43             <tr class="even">
44                 <td>Charles d'Orleans</td>
45                 <td>Poemes</td>
46                 <td class="money"></td>
47                 <td class="money">$5,866.00</td>
48             </tr>
49             <tr>
50                 <td>T.S. Eliot</td>
51                 <td>Poems 1909 - 1925</td>
52                 <td class="money">$1,250.00</td>
53                 <td class="money">$8,499.35</td>
54             </tr>
55             <tr class="even">
56                 <td>Sylvia Plath</td>
57                 <td>The Colossus</td>
58                 <td class="money"></td>
59                 <td class="money">$1031.72</td>
60             </tr>
61         </table>
62     </body>
63 </html>

 

1.6   空单元格的边框

有时候为了网页内容的美观简洁,表格也会存在空单元格,那么我们可以使用empty-cells属性来指定是否显示空单元格的边框.

该属性有三个取值:

show:用于显示空单元格的边框

hide:隐藏空单元格的边框

inherit:如果一个表格嵌套在另一个表格中,那么inherit值表明单元格遵循外部表格的规则.(继承)

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Empty Cells</title>
 5         <style type="text/css">
 6             td {
 7                 border: 1px solid #0088dd;
 8                 padding: 15px;}
 9             table.one {
10                 empty-cells: show;}
11             table.two {
12                 empty-cells: hide;}
13         </style>
14     </head>
15     <body>
16         <table class="one">
17             <tr>
18                 <td>1</td>
19                 <td>2</td>
20             </tr>
21             <tr>
22                 <td>3</td>
23                 <td></td>
24             </tr>
25         </table>
26         <table class="two">
27             <tr>
28                 <td>1</td>
29                 <td>2</td>
30             </tr>
31             <tr>
32                 <td>3</td>
33                 <td></td>
34             </tr>
35         </table>
36     </body>
37 </html>

 

1.7  单元格之间的空隙

我们用border-spacing属性来控制相邻单元格之间的距离.,该值通常以像素为单位,如果希望分别指定单元格横向距离与纵向距离,可一次指定两个值

collapse:该值表示尽可能将单元格相邻的边框合并为一个单独的边框,将其套缩起来.

separate:该值表示将相邻的边框分离

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Gaps Between Cells</title>
 5         <style type="text/css">
 6             td {
 7                 background-color: #0088dd;
 8                 padding: 15px;
 9                 border: 2px solid #000000;}
10             table.one {
11                 border-spacing: 5px 15px;}
12             table.two {
13                 border-collapse: collapse;}
14         </style>
15     </head>
16     <body>
17         <table class="one">
18             <tr>
19                 <td>1</td>
20                 <td>2</td>
21             </tr>
22             <tr>
23                 <td>3</td>
24                 <td>4</td>
25             </tr>
26         </table></br>
27         <table class="two">
28             <tr>
29                 <td>1</td>
30                 <td>2</td>
31             </tr>
32             <tr>
33                 <td>3</td>
34                 <td>4</td>
35             </tr>
36         </table>
37     </body>
38 </html>

 

1.8  单行文本框样式

font-size:用于设置设置输入文本的大小

color:用于设置文本颜色

background-color:用于设置文本输入框的背景色

border:用于在文本输入框的边缘增加边框

border-radius:用于创建圆角

:focus:伪类focus用来在使用文本输入框时改变文本输入框的背景颜色.

:hover:伪类hover用来在用户将光标悬停在文本输入框时改变文本输入框的背景色.

background-image:为盒子增加背景颜色.

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Styling Text Inputs</title>
 5         <style type="text/css">    
 6             input {
 7                 font-size: 120%;
 8                 color: #5a5854;
 9                 background-color: #f2f2f2;
10                 border: 1px solid #bdbdbd;
11                 border-radius: 5px;
12                 padding: 5px 5px 5px 30px;
13                 background-repeat: no-repeat;
14                 background-position: 8px 9px;
15                 display: block;
16                 margin-bottom: 10px;}
17             input:focus, input:hover {
18                 background-color: #ffffff;
19                 border: 1px solid #b1e1e4;}
20             input#email {
21                 background-image: url("images/email.png");}
22             input#twitter {
23                 background-image: url("images/twitter.png");}
24             input#web {
25                 background-image: url("images/web.png");}
26         </style>
27     </head>
28     <body>
29         <form>
30             <input type="text" id="email" />
31             <input type="text" id="twitter" />
32             <input type="text" id="web" />
33         </form>
34     </body>
35 </html>

 

1.9   光标样式

 

cursor属性用于控制显示给用户的光标的类型

该属性的常见值

auto:自动

crosshair:十字光标

default:默认

pointer:点

move:移动

text:文本

wait:等待

help:帮助

url:("cursor.gif"):网站

 

示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Cursor</title>
 5         <style type="text/css">
 6             a {
 7                 cursor: move;}
 8         </style>
 9     </head>
10     <body>
11         <p>
12             <a href="http://www.whitmanarchive.org">Walt Whitman</a>
13         </p>
14     </body>
15 </html>