CSS基本样式讲解

标签：

1. 背景  纯色和背景图像

background-color

background-image

background-repeat background-positioin background-attachment

CSS3: background-size background-origin background-clip

2. 文本

p{　　
　　width: 300px;
    text-shadow: 100px 20px 1px #ff0000;
　　text-wrap: normal;
}

3. 字体  字体系列、大小、加粗、风格和变形

p{
    font-size: 20px;
    font-family: fantasy;
}
@font-face{
    font-family: myfont;
    src: url();
}
div{
    font-family: myfont;
}

4. 链接

a:link  a:visited  a:hover a:active

5. 列表 允许你放置、改变列表标志或者将图像作为列表项标志

list-style list-style-image list-style-position list-style-type

6. 表格

#tb,tr,th,td{
    border: 1px solid blue;
    text-align: center;
    background: aqua;

}
#tb{
    width: 400px;
    height: 400px;
    border-collapse: collapse;
}

#tb{
    border-collapse: collapse;
    width: 500px;
}
#tb th,#tb td{
    border: 1px solid red;
    padding: 5px;
}
#tb th{
    text-align: left;
    background-color: aqua;
    color: white;
}
#tb tr.alt td{
    color: black;
    background-color: aquamarine;
}

<table id="tb">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr>
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
    <tr class="alt">
        <td>小王</td>
        <td>20</td>
        <td>男</td>
    </tr>
</table>

7. 轮廓 用来突出元素的作用

outline outline-color outline-style outline-width

p{
    outline-width: 5px;
    outline-color: blue;
    outline-style: double;
}

CSS基本样式讲解

标签：

原文地址：http://www.cnblogs.com/htmlphp/p/4772442.html