列表，表格和表单
1.项目符号样式 list-style-type
list-style-type属性允许你控制项目符号（也称为标记）的形状或样式。该属性可以应用到<ol>元素，<ul>元素，<li>元素的规则中使用。
无序列表：对于一个无序列表的list-style-type属性，你可以使用以下值：
none disc circle square
有序列表：对于一个有序（编号）列表的list-style-type属性，你可以使用以下值：
decimal 1 2 3 decimal-leadin
g-zero 01 02 03 lower-alpha a b c lower-roman upper-roman
ul{ list-style-type: lower-roman; }
2.项目图片 list-style-image
可利用list-style-image属性将一个图像作为项目符号使用。该属性的值以字母url开头，后面跟着一堆圆括号，在括号里面，图像的路径在双引号中给出。该属性可以应用到<ul>元素和<li>元素的规则中。
ul{ list-style-image: url("address") ; }
3.标记的定位 list-style-position
默认情况下，列表会缩进到页面中。list-style-position属性用于表明标记显示的位置，实在包含主体内容的盒子的内部，还是在其外部。该属性可以选用以下两个值：
outside：该值表明标记位于文本块的左侧。
inside：该值表明标记位于文本块内部，同时文本块会被缩进。
4.列表快捷方式 list-style
与其他的一些CSS属性一样，针对列表样式也有一个类似快捷方式的属性。该属性成为list-style，它允许你按任意顺序表示标记的样式，图像和位置属性。
5.表格属性
width：用于设置表格的宽度
padding：用于设置每个单元格边框与其内容之间的空隙
text-transform：用于将表格标题中的内容转换成大写
letter-spacing，font-size：用于设置表格标题的内容，增加额外的样式
border-top，border-bottom：用于设置表格标题上方和下方边框
text-align：用于将某些单元格中的书写方式设置为向左对齐或向右对齐
background-color：用于交替改变表格的背景颜色
：hover：在用户吧光标悬停在某个表格行时将此行高亮显示
设置单元格内边距：如果单元格中的文本紧贴边框，将不利于阅读，增加内边距有利于提高文本的可读性。
区分标题：将表格标题以粗体显示能够提高标题的可读性。为了明确地区分标题和内容，还可将标题大写，然后为其添加背景色或者下划线。
交替改变表格行的背景色：每隔一个表格行改变他的背景色有利于用于一行一行地查看。为了保持表格地整洁，可使用与表格行正常颜色右细微差别的背景色。
对齐数字：对于包含数字的列，可使用text-align属性将其内容向右对齐，这样一来大数字与小数字的差别便可以一目了然。
6.空单元格的边框 empty-cells
如果在一个表格中含有空单元格，那么你可以使用empty-cells属性来指定是否显示空单元格的边框。由于浏览器按不同的方式对空单元格进行处理，所以对于任意空单元格，如果你想让显示或者隐藏它们的边框，就需要用到empty-cells，该属性有三个值：
show：该值用于显示空单元格的边框。
hide：该值用于隐藏空单元格的边框。
inherit：如果一个表格嵌套在另一个表格中，那么inherit值表明单元格遵循外部表格的规则（继承）。
7.单元格之间的空隙 border-spacing，border-collapse
border-spacing属性允许你控制相邻单元格之间的距离。默认情况下，浏览器经常在每个的单元格之间留有一个较小的缝隙，如果你想增加或者减小这个缝隙，可以利用border-spacing属性进行控制。该属性的值通常以像素指定。如果希望分别指定单元格之间的横向距离和纵向距离，你可以一次指定两个值。
如果为单元格添加了边框，那么在两个单元格相接的地方，边框的宽度就会使外援边框的两倍。要避免这种情况的发生，可使用border-collapse属性来合并相邻的边框。该属性的可选值右：
collapse：该值表示尽可能将单元格相邻的边框何为一个单独的边框
separate：该值表示相邻的边框分离。
8.定义表单样式
CSS通常用于控制表单元素的外观。它可以使表单更美观，也可以使表单在不同的浏览器中表现得更加一直。它主要定义下列控件的样式：
文本输入框和文字域 提交按钮 表单中的标签，可以精确地对表单中的控件进行对齐。
9.定义单行文本框样式
这里总结以下用于文本输入框的一些常用CSS属性：
font-size：用于设置用户输入文本的大小。
color：用于设置文本颜色。
background-color：用于设置输入文本框的背景色。
border：用于在文本输入框的边缘增加边框。
border-radius：可用于创建圆角边框。
伪类：focus：用来咋使用文本输入框时改变文本输入框的背景颜色。
伪类：hover：用来在用户将光标悬停在文本输入框时改变文本输入框的背景色。
background-image：为盒子增加背景图像。
10.定义提交按钮样式
提交按钮所涉及的<input>元素设置的样式：
color：用于控制按钮上的文本的颜色。
text-shadow：可在支持改属性的浏览器上展示3D效果的文本。
border-bottom：使按钮的下方 边框稍微粗一点，从而使3D效果更加明显。
background-color：可以使提交按钮从周围的项目中凸显出来。
：hover：鼠标悬停时改变按钮样式。
11.定义字段集及说明的样式
<fiedset>字段集主要用来确定一个表单的边缘。在一个长表单中，它可以用来将相关信息进行分组。<legend>元素用于说明控件组中需要何种信息。以上两种元素常用的属性包括：
width：用于控制字段集的宽度。
color：用于控件文本的颜色。
background-color：用于改变这些元素的背景色。
border：用于控制字段集合/或说明周围的边框的外观。
border-radius：用于在支持该属性的浏览器中将这些元素的边缘进行柔化。
padding：可用来增加这些元素的内边距。
12.表单控件的对齐：问题
表单中的标签元素常常有长短不一的情况，这意味着表单控件可能不会对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="problem.css"> </head> <body> <div> <label for="name" class="title">Name:</label> <input type="text" id="name" name="name"> </div> <div> <label for="email" class="title">Email:</label> <input type="text" id="email" name="email"> </div> <div class="radio-buttons"> <span class="title">Gender</span> <input type="radio" id="male" name="gender" value="M"> <label for="male">M</label> <input type="radio" id="female" name="gender" value="F"> <label for="female">F</label> </div> <div class="submit"> <input type="submit" value="Register" id="submit"> </div> </body> </html>
13.表单空间的对齐：解决方案
div{ border-bottom: 1px solid #efefef; max-resolution: 10px; padding-bottom: 10px; width: 260px; } .title{ float: left; width: 100px; text-align: right; padding-right: 10px; } .submit{ text-align: right; }
可以比较不添加CSS前后的变化。
14.光标样式 cursor
cursor属性用于控制先是给用户的光标的类型。下面列出该属性最常用的值：
auto crosshair default pointer move text wait help url("cursor.jpg")自定义
15.示例 本示例将演示我们本文所介绍的一些CSS属性，这些属性用于控制列表，表格和表单的外观。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>List,Tables and Forms</title> <link rel="stylesheet" href="example.css"> </head> <body> <h1>Poetry WorkShop</h1> <p>We will be conducting a number of poetry workshops and symposiums throughout the year.</p> <p>Please note that the following events are free to members:</p> <ul> <li>A Poetic Perspective</li> <li>Walt Whitman at War</li> <li>Found Poems and Outsider Poetry</li> </ul> <table> <tr class="head"> <th></th> <th>New York</th> <th>Chicago</th> <th>San Francisco</th> </tr> <tr> <th>A Poetic Perspective</th> <td>Sat,4 Feb 2012 <br> 11am-2pm</td> <td>Sat,3 Mar 2012 <br>11am-2pm</td> <td>Sat,17 Mar 2012 <br>11am-2pm</td> </tr> <tr class="even"> <th>Walt Whitman at War</th> <td>Sat,7 Apr 2012 <br>11am-1pm</td> <td>Sat,5 May 2012 <br>11am-1pm</td> <td>Sat,19 May 2012 <br>11am-1pm</td> </tr> <tr> <th>Found Poems & amp: Outsider Poetry</th> <td>Sat,9 Jun 2012 <br>11am-2pm</td> <td>Sat,7 Jul 2012 <br>11am-2pm</td> <td>Sat,21 Jul 2012 <br>11am-2pm</td> </tr> <tr class="even"> <th>Natural Death:An Exploration</th> <td>Sat,4Aug 2012 <br>11am-4pm</td> <td>Sat,8 Sep 2012 <br>11am-4pm</td> <td>Sat,15 Sep 2012 <br>11am-4pm</td> </tr> </table> <form action="#"> <fieldset> <legend>Register your interest</legend> <p> <label for="name" id="title">Your name:</label> <input type="text" name="name" id="name"><br> <label for="email" class="title">Your Email:</label> <input type="text" name="email" id="email"> </p> <p> <label for="location" class="title">Your closest center:</label> <select name="location" id="location"> <option value="ny">New York</option> <option value="il">Chicago</option> <option value="ca">San Francisco</option> </select> </p> <span class="title">Are you a member?</span> <label><input type="radio" name="member" value="yes">Yes</label> <label><input type="radio" name="member" value="no">No</label> </fieldset> <div class="submit"><input type="submit" value="Register"></div> </form> </body> </html>
body{ font-family: Arial, Verdana, sans-serif; font-size: 90%; color: #666666; background-color: #f8f8f8; } li{ list-style-type: circle; line-height: 1.6em; } table{ border-spacing: 0px; } th,td{ padding: 5px 30px 5px 10px; border-spacing: 0px; font-size: 90%; margin: 0px; } th,td{ text-align: left; background-color: #e0e9f0; border-top: 1px solid #f1f8fe; border-bottom: 1px solid #cbd2d8; border-right: 1px solid #cbd2d8; } tr.head th{ color: #ffffff; border-bottom: 2px solid #547ca0; border-right: 1px solid #749abe; border-top: 1px solid #90b4d6; text-align: center; text-shadow: -1px -1px 1px #666666; letter-spacing: 0.15em; } td{ text-shadow: 1px 1px 1px #ffffff; } tr.even td,tr.even th{ background-color: #e8eff5; } tr.head th:first-child{ border-top-left-radius: 5px; } tr.head th:last-child{ border-top-right-radius: 5px; } fieldset{ width: 310px; margin-top: 20px; border: 1px sloid #d6d6d6; background-color: #ffffff; line-height: 1.6em; } legend{ font-style: italic; color: #666666; } input[type="text"]{ width: 120px; border: 1px solid #d6d6d6; padding: 2px; outline: none; } input[type="text"]:focus,input[type="text"]:hover{ background-color: #d0e2f0; border:1px solid #999999; } input[type="submit"]{ border: 1px solid #006633; background-color: #009966; color: #ffffff; border-radius: 5px; padding: 5px; margin: 5px; margin-top: 10px; } input[type="submit"]:hover{ border: 1px solid #006633; background-color: #00cc33; color: #ffffff; cursor: pointer; } .title{ float: left; width: 160px; clear: left; } .submit{ width: 310px; text-align: right; }