2.1 CSS3基础-CSDN博客

1. CSS3背景

//index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
        haha<br/> haha<br/> haha<br/> haha<br/> haha<br/>
    </p>
</body>
</html>

//mycss.css
body{
    background-color: darkgray;
}
p{
    background-image: url("html5.png");
    background-size: 100px 100px;
    background-repeat: no-repeat;
    background-attachment: fixed; //滚动页面时背景图片固定不滚动
}

2. CSS样式

//iindex.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <p id="p1">this is My web page</p>
    <p id="p2">this is My web page</p>
    <p id="p3">this is My web page</p>
    <p id="p4">阴影测试</p>
    <p id="p5">换行测试换行测试换行测试换行测试换行测试换行测</p>
    <h1>位置测试</h1>
    <h2>头缩进测试</h2>
</body>
</html>

//mycss.css
h1{
    color: red;
    text-align: center;
}
h2{
    text-indent: 2em;
}
#p1{
    text-transform: capitalize;
}
#p2{
    text-transform: lowercase;
}
#p3{
    text-transform: uppercase;
}
#p4{
    text-shadow: 5px 5px 2px red;
}
#p5{
    width: 100px;
    word-wrap: normal;
}

3. CSS链接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

a:link{
    /*普通的、未被访问的链接 , text-decoration去掉下划线*/
    color: #FF0000;
　　text-decoration: none;
}
a:visited{
    /*用户已经访问的链接*/
    color: #00FF00;
}
a:hover{
    /*鼠标指针位于链接上方*/
    color: #0000FF;
}
a:active{
    /*链接被点击的时刻*/
    color: black;
}

4.CSS列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>梨子</li>
        <li>香蕉</li>
    </ul>
</body>
</html>

ul li{
    list-style-type: circle;
    /* 自定义logo   list-style-image: url("");*/
}

5. CSS表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <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>
    </table>
</body>
</html>

#tb{
    border: 1px solid blue;
    width: 400px;
    height: 400px;
    text-align: center;
    border-collapse: collapse;  /*使得表格边框是一条线*/
}
#tr,th,td{
    border: 1px solid blue;
    text-align: center;
}

转载于:https://www.cnblogs.com/iMirror/p/4283516.html