css 初步入门

来源：互联网发布：php的存储过程调用编辑：程序博客网时间：2024/05/30 04:25

css样式之
背景，文本，字体，链接，列表，表格，轮廓
例子如下，
1.效果图

2.html文件：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Insert title here</title>    <link rel="stylesheet"  type="text/css" href="style.css"> </head><body><a href="http://www.bilibili.com"> 哔哩哔哩</a><hr><div class="content">    <h4>水调歌头</h4>    <p>明月几时有</p>    <p>把酒问青天</p></div><hr><div>    <ul>        <li>苹果        <li>雪梨        <li>香蕉     </ul></div><hr><div><table id="tb">    <tr>    <th>姓名</th>            <th>性别</th>            <th>年龄</th>    </tr>    <tr class="alt1">            <td>李楠</td>            <td>男</td>            <td>20</td>    </tr>    <tr class="alt2">            <td>李楠</td>            <td>男</td>            <td>20</td>    </tr>    <tr class="alt1">            <td>李楠</td>            <td>男</td>            <td>20</td>    </tr>    <tr class="alt2">            <td>李楠</td>            <td>男</td>            <td>20</td>    </tr></table></div><hr><div><p id="p1">halo!</p></div></body></html>

3.css文件：

@CHARSET "UTF-8";body{    background-image: URL(back.jpg);}.content{    text-align: left;    margin-right: 10%;}h4{    font-family: 楷体;    color: yellow;    /*文本阴影4个参数 分别是  距内容左边的距离    距内容上边的距离    模糊像素    颜色*/    text-shadow: 10px 10px 1px orange;    /*文本缩进*/    text-indent: 1em;}.content p{    color :blue;    text-shadow: 10px 10px 1px blue;}/*链接的样式    未点击前    a:LINK      鼠标悬停在上面时    a:HOVER    点击之后    a:VISITED    点击时 a:ACTIVE*/a:LINK{        color: red;}a:HOVER{    color: blue;}a:VISITED{    color :orange;}a:ACTIVE {    color:green;}li{    /*列表 自带默认样式list-style-type:circle;*/    /*列表 自定义图片样式*/    list-style-image: url("skin_head.png");}#tb{    /*折叠边界，不会导致内(td,th)外(table)都有边界*/    border-collapse: collapse;    width: 400px;    color: #000000;}#tb th,#tb td{/*table 的th和tb*/    /*设置边界属性 3个参数： 粗细，线的形状，颜色*/    border: 1px solid black;    text-align:center;}#tb th{/*table的th*/    background-color: #a2b9dd;}#tb tr.alt1{/*table中类为alt1的tr*/    background-color: gray;}#tb tr.alt2{/*table中类为alt2的tr*/    background-color: aqua;}#p1{    color: white;    width: 40px;    /*轮廓线设置*/    outline-style: dotted;    outline-color: yellow;    outline-width: 2px;}

0 0