CSS学习记录7

CSS文本属性

文本颜色：

属性名：color

作用：控制文字的颜色。

    <style>
        p{
            color: rgb(125,12,98);
        }
    </style>

文本间距：

字母间距：letter-spacing

单词间距：word-spacing

    <style>
        .test01{
            letter-spacing: 20px;
        }
        .test02{
            word-spacing: 20px;
        }
    </style>

可写负值。

文本修饰：

属性名：text-decoration

作用：控制文本的各种装饰线（上/下划线，删除线）。

可写值：

• none:无装饰线（用于删除超链接等标签的装饰线）
• underline:下划线
• overline:上划线
• line-through:删除线

        /*无修饰*/
        a{
            text-decoration: none;
        }
        /*下划线*/
        .test01{
            text-decoration: underline;
        }
        /*上划线*/
        .test02{
            text-decoration: overline;
        }
        /*删除线*/
        .test03{
            text-decoration: line-through;
        }

其他可写：

• dotted:虚线
• wavy:波浪线
• 颜色

        .test04{
            text-decoration: underline wavy red;
        }
        .test05{
            text-decoration: underline dotted rgb(156,69,36);
        }

文本缩进：

属性名：text-indent

作用：首行缩进

    <style>
        p{
            font-size: 25px;
            text-indent: 50px;
        }
    </style>

文本对齐：

水平：

属性名：text-align

作用：控制文本的水平对齐方式。

可写值：

• left：左对齐
• right：右对齐
• center：居中

    <style>
        .test01{
            text-align: left;
        }
        .test02{
            text-align: center;
        }
        .test03{
            text-align: right;
        }
    </style>

行高：

属性名：line-height

作用：控制一行文字的高度。

可写值：

1. normal ：由浏览器根据文字大小决定的一个默认值。

2. 像素( px )。

3. 数字： font-size 的倍数（很常用）。

4. 百分比： font-size 的百分比。

    <style>
        div{
            font-size: 20px;
        }
        .test01{
            line-height: normal;
        }
        .test02{
            line-height: 30px;
        }
        .test03{
            line-height: 1.5;
        }
        .test04{
            line-height: 150%;
        }
    </style>

注意：

• 行高不可过小，最好在font-size的1.5~2倍之间
• 行高可以继承，所以最好用倍数
• 单行时，当height=line-height，垂直居中

vertical-align

作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式

1. baseline （默认值）：使元素的基线与父元素的基线对齐。

2. top ：使元素的顶部与其所在行的顶部对齐。

3. middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。

4. bottom ：使元素的底部与其所在行的底部对齐。

CSS列表属性

作用在<ul><ol><li>上

设置列表符号：

属性名：list-style-type

常用值：

• none:不显示符号
• square:实心方块
• disc:圆
• decimal:数字

    <style>
        /*不显示*/
        .test01{
            list-style-type: none;
        }
        /*圆*/
        .test02{
            list-style-type: disc;
        }
        /*方块*/
        .test03{
            list-style-type:square ;
        }
        /*数字*/
        .test04{
            list-style-type: decimal;
        }
    </style>

设置列表符号位置：

属性名：list-style-position

属性值：

• inside ：在 li 的里面
• outside ：在 li 的外边

    <style>
        li{
            background-color: aqua;
        }
        /*在 li 的里面*/
        .test01{
            list-style-position: inside;
        }
        /*在 li 的外边*/
        .test02{
            list-style-position: outside;
        }
    </style>

里外区别（设置背景色可直观查看）：

上为里；下为外。

自定义列表符号：

属性名：list-style-image

语法：list-style-image：url（图片地址）；

    <style>
        ul{
            list-style-image: url(图片地址);
        }
    </style>

复合属性：

属性名：list-style

没有数量、顺序的要求。

    <style>
        ul{
            list-style: square inside ;
        }
    </style>