列表,表格和表单

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;
}