css 初步入门

最新推荐文章于 2024-09-24 22:35:29 发布

IAOONGIN

最新推荐文章于 2024-09-24 22:35:29 发布

阅读量431

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/grandshaw/article/details/53027525

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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