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>