CSS常用标签笔记

1 字体样式属性

对于font-family属性，如果字体类型只有一个英文单词，则不需要加上双引号；如果字体类型是多个英文单词或者是中文，则需要加上双引号。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {font-family:Arial;}
        #div2 {font-family: "Times New Roman";}
        #div3 {font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-size: 10px;}
        #p2 {font-size: 15px;}
        #p3 {font-size: 20px;}
    </style>
</head>
<body>
    <p id="p1">字体大小为 10px</p>
    <p id="p2">字体大小为 15px</p>
    <p id="p3">字体大小为 20px</p>
</body>
</html>

font-weight属性取值有两种：一种是100～900的“数值”；另外一种是“关键字”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {font-weight: 100;}
        #p2 {font-weight: 400;}
        #p3 {font-weight: 700;}
        #p4 {font-weight: 900;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:100（lighter）</p>
    <p id="p2">字体粗细为:400（normal）</p>
    <p id="p3">字体粗细为:700（bold）</p>
    <p id="p4">字体粗细为:900（bolder）</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic </p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>

颜色color

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">/*关键字取色*/
        #p1{color:gray;}
        #p2{color:orange;}
        #p3{color:red;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为灰色</p>
    <p id="p2">字体颜色为橙色</p>
    <p id="p3">字体颜色为红色</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{color: #03FCA1;}/*16进制RGB取色*/
        #p2{color: #048C02;}
        #p3{color: #CE0592;}
    </style>
</head>
<body>
    <p id="p1">字体颜色为#03FCA1</p>
    <p id="p2">字体颜色为#048C02</p>
    <p id="p3">字体颜色为#CE0592</p>
</body>
</html>

2 文本样式

首行缩进

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
     <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
     <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
</body>
</html>

水平对齐

text-align:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-align:left;}
        #p2{text-align:center;}
        #p3{text-align:right;}
    </style>
</head>
<body>
    <p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
    <p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
    <p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>

文本修饰 text-decoration

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-decoration:underline;}
        #p2{text-decoration:line-through;}
        #p3{border-top: 1px solid #000;padding-top: 0.1em;}
    </style>
</head>
<body>
    <p id="p1">这是"下划线"效果</p>
    <p id="p2">这是"删除线"效果</p>
    <p id="p3">这是"顶划线"效果</p>
</body>
</html>

大小写 text-transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
    <p id="p1">rome was't built in a day.</p>
    <p id="p2">rome was't built in a day.</p>
    <p id="p3">rome was't built in a day.</p>
</body>
</html>

行高 line-height

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{line-height:15px;}
        #p2{line-height:20px;}
        #p3{line-height:25px;}
    </style>
</head>
<body>
    <p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

3 边框样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{border:1px solid red;}
    </style>
</head>
<body>
    <div>绿叶，给你初恋般感觉。</div>
</body>
</html>

4 局部样式

一个元素有四条边

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
        width:100px;               /*div元素宽为 100px*/
        height:60px;               /*div元素高为 60px*/
        border-top:2px solid red; /*上边框样式*/
        border-right:2px solid yellow; /*右边框样式*/
        border-bottom:2px solid blue;  /*下边框样式*/
        border-left:2px solid green;   /*左边框样式*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

5 列表样式

列表项符号 list-style-type

在CSS中，不管是有序列表还是无序列表，我们都是使用list-style-type属性来定义列表项符号。list-style-type属性是针对ol或者ul元素的，而不是li元素。

//有序列表
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol{list-style-type:lower-roman;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>
</html>

//无序列表
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-type:circle;}
    </style>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

去除列表项

list-style-type:none;

列表项图片 list-style-image

list-style-image:url(图片路径);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-image: url(img/leaf.png);}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

6 表格样式

表格标题样式 caption-side

caption-side:取值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{caption-side:bottom;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格 1</th>
                <th>表头单元格 2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格 1</td>
                <td>表行单元格 2</td>
            </tr>
            <tr>
                <td>表行单元格 3</td>
                <td>表行单元格 4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格 5</td>
                <td>表行单元格 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格边框合并 border-collapse

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-collapse: collapse;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格 1</th>
                <th>表头单元格 2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格 1</td>
                <td>表行单元格 2</td>
            </tr>
            <tr>
                <td>表行单元格 3</td>
                <td>表行单元格 4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格 5</td>
                <td>表行单元格 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格边框间距 border-spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        table,th,td{border:1px solid silver;}
        table{border-spacing: 8px;}
    </style>
</head>
<body>
    <table>
        <caption>表格标题</caption>
        <!--表头-->
        <thead>
            <tr>
                <th>表头单元格 1</th>
                <th>表头单元格 2</th>
            </tr>
        </thead>
        <!--表身-->
        <tbody>
            <tr>
                <td>表行单元格 1</td>
                <td>表行单元格 2</td>
            </tr>
            <tr>
                <td>表行单元格 3</td>
                <td>表行单元格 4</td>
            </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
            <tr>
                <td>表行单元格 5</td>
                <td>表行单元格 6</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

7 图片样式

图片大小

width:像素值;

height:像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img
        {
        width:60px;
        height:60px;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="卡通女孩" />
</body>
</html>

图片边框

border:1px solid red;

图片对齐

text-align: 取值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:300px;
            height:80px;
            border:1px solid silver;
        }
        .div1{text-align:left;}
        .div2{text-align:center;}
        .div3{text-align:right;}
         img{width:60px;height:60px;}
    </style>
</head>
<body>
    <div class="div1">
        <img src="img/girl.gif" alt=""/>
    </div>
    <div class="div2">
        <img src=" img/girl.gif" alt=""/>
    </div>
    <div class="div3">
        <img src=" img/girl.gif" alt=""/>
    </div>
</body>
</html>

垂直对齐

vertical-align:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{width:60px;height:60px;}
        #img1{vertical-align:top;}
        #img2{vertical-align:middle;}
        #img3{vertical-align:bottom;}
        #img4{vertical-align:baseline;}
    </style>
</head>
<body>
    绿叶学习网<img id="img1" src="img/girl.gif" alt=""/>绿叶学习网（top）
    <hr/>
    绿叶学习网<img id="img2" src="img/girl.gif" alt=""/>绿叶学习网（middle）
    <hr/>
    绿叶学习网<img id="img3" src="img/girl.gif" alt=""/>绿叶学习网（bottom）
    <hr/>
    绿叶学习网<img id="img4" src="img/girl.gif" alt=""/>绿叶学习网（baseline）
</body>
</html>

文字环绕

fl oat:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img{fl oat:left;}
        p{
            font-family:"微软雅黑";
            font-size:12px;
        }
    </style>
</head>
<body>
    <img src="img/lotus.png" alt=""/>
     <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人？牡丹之爱，宜乎众矣。</p>
</body>
</html>

8 背景样式

背景样式就是两个方面：背景颜色，背景图片。

定义背景颜色比较简单。但是，定义背景图片比较复杂，涉及的样式属性比较多。

背景颜色 background-color

background-color:颜色值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:60px;
        }
        #div1{background-color: hotpink}
        #div2{background-color: #87CEFA;}
    </style>
</head>
<body>
    <div id="div1">背景颜色为：hotpink</div>
    <div id="div2">背景颜色为：#87CEFA</div>
</body>
</html>

注意，color属性是定义文本颜色，background-color定义背景颜色，要区分清楚。

背景图片样式

background-image:url(图片路径);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{background-image: url(img/haizei.png);}
    </style>
</head>
<body>
    div
        {
    width:250px;
    height:170px;
    background-image: url(img/haizei.png);
        }
</body>
</html>

背景图片重复

background-repeat:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:200px;
            height:100px;
            border: 1px solid silver;
            background-image: url(img/fl ower.png);
        }
        #div2{background-repeat: repeat-x}
        #div3{background-repeat: repeat-y}
        #div4{background-repeat: no-repeat}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
</body>
</html>

背景图片位置 background-position

background-position属性取值有两种，一种是像素值，一种是关键字

像素值

background-position:水平距离垂直距离;

关键字

background-position:水平距离垂直距离;

背景图固定 scroll/fixed

background-attachment:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:160px;
            height:1200px;
            border:1px solid silver;
            background-image:url(img/judy.png);
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9 超链接样式

超链接伪类

hover

:hover伪类可以定义任何一个元素在鼠标经过时的样式！注意，是任何元素喔。

div:hover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            color:white;
            background-color: lightskyblue;
        }
        div:hover
        {
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div>绿叶学习网</div>
</body>
</html>

img:hover

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        img:hover
        {
            border:2px solid red;
        }
    </style>
</head>
<body>
    <img src="img/girl.gif" alt="">
</html>

鼠标样式

cursor:取值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        div
        {
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            background-color: hotpink;
            color:white;
            font-size:14px;
        }
        #div_default{cursor:default;}
        #div_pointer{cursor:pointer;}
    </style>
</head>
<body>
    <div id="div_default">鼠标默认样式</div>
    <div id="div_pointer">鼠标手状样式</div>
</body>
</html>