CSS颜色属性、文本文字属性、属性继承

html零基础必看——html入门，编程就是如此简单

第六章：颜色属性、文本文字属性

一、颜色样式（颜色取值法）
- 1.颜色属性值取值方法
二、字体样式
三、文本属性
四、属性继承
总结

一、颜色样式（颜色取值法）

1.颜色属性值取值方法

颜色属性常见有color、background-color。属性值：

英文取值:

如red、blue等，直接对应用相关颜色的英文

16进制取值：

通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

如：#FFFF99 具体见16进制颜色表

可手动输入，也可以通过截图时，用截图工具复制色号

3.rgb值

RGB就是红绿蓝，就是英文的首字母，RGB是色光三原色。每个色彩值在0-255之间，0代表什么也没有是黑色，255代表色彩值最高，即为白色。

取值：0~255正整数，也可用百分比

如rgb(0,0,255) 具体见RGB颜色查询对照表

可手动输入，也可以通过截图时，用截图工具复制色号

rgba值

rgba值和rgb一样，只是多了一个a属性(alpha) a代表透明度 a取值范围: 0~1

如：(0,0,255，0.5)

透明色transparent

给的值就是透明的颜色

<head>
    <title>颜色取值</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        /* 1.英文取值法： */
        .p1{
      
      
            color: red;
            /* color: pink; */
        }
        /* 2.16进制取值法： */
        .p2{
      
      
            color: #FFCC00;
            /* color: #FF99FF; */
        }
        /* 3.rgb取值法：r:红  g:绿 b:蓝色 三原色
          取值：0~255正整数 也可以百分比  */
        .p3{
      
      
           color: rgb(23, 187, 45);
        }
        /* 4.rgb取值法:和rgb一样 只是多了一个a属性(alpha) a代表透明度
          a取值范围: 0~1
         */
        .p4{
      
      
            color: rgba(123, 34, 255,0.5);
        }
        /* 5. 透明的颜色 transparent，使文字变得透明 */
        .p5{
      
      
            color:transparent ;
        }
    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

效果图：
在这里插入图片描述

二、字体样式

修饰网页一下文字的特征 : 颜色大小粗细对齐方式等等

1. color 文字颜色

2.font-size 字体大小

取值：数值，单位：px em 百分比等（1em=16px）

字体默认大小是16px，最小值是12px。

3.font-style 文字倾斜样式

属性值：

italic 使字体倾斜

normal 使字体不倾斜
注意：除了i 、em 以外，其他字体的都是默认normal不倾斜

4.font-weight 字体粗细

属性值：

bold 定义粗的字体

bold 定义更粗的字体

lighter 定义更细的字体

normal 定义正常字体大小
注意：除了h1~h6，b，strong以外，其他字体的都是默认normal

5.font-family 字体类型，字体名称

一些常见字体类型：宋体、黑体、微软雅黑、楷体等

取值：直接引用相应字体对应中文汉字即可。如：font-family: 黑体;

注意：为了规范，在引用这些值时，可以用英文状态下‘ ’单引号，当然不用引号也不会报错；如：font-family: ‘黑体’。

<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        p,em,i{
      
      
            color: red;
            font-size: 15px;
        }

        /* 文字倾斜样式 */
        .p2{
      
      
            /* font-style：italic使字体倾斜 */
            font-style: italic;
        }
        em,i{
      
      
            /* font-style: normal使字体不倾斜 ，除了i 、em 以外，其他字体的都是默认normal*/
            font-style: normal;
        }

        /* 字体粗细 */
        .p1{
      
      
            /* bold 定义粗的字体 */
            font-weight: bold;
        }
        .p2{
      
      
            /* bold 定义更粗的字体 */
            font-weight: bolder;
        }
        .p3{
      
      
            /* lighter  定义更细的字体*/
            font-weight: lighter;
        }
        .p4{
      
      
            /* normal 定义正常字体大小，除了h1~h6，b，strong以外，其他字体的都是默认normal */
            font-weight: normal;
        }
        .p5{
      
      
            /* 用数值100~900来控制，取值只能是整百【不要px单位】 */
            font-weight: 900;
        }
        
        /* 字体类型，字体名称 宋体、黑体、微软雅黑、楷体等
        取值：直接引用相应字体对应中文汉字即可
        【为了规范，在引用这些值时，可以用英文状态下‘’单引号，当然不用引号也不会报错 】
        需要引入其他特殊字体时，通过外部引入*/
        .p1{
      
      
            /* font-family: 黑体; */
            font-family: '宋体';
        }
        .p2{
      
      
            font-family: '楷体';
        }

    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <em>你好，我是em</em>
    <i>你好，我是i</i>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

效果图：
在这里插入图片描述

6.line-height 行高

取值：数值（px）百分比

如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了

7.font-varian 小型大写字母显示文本

所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。

取值：font-variant: small-caps

<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1 {
      
      
            width: 200px;
            height: 300px;
            background-color: red;
        }

        .div1>p {
      
      
            /* display: inline-block; */
            width: 100px;
            height: 50px;
            border: 1px solid yellow;
            line-height: 50px;
        }

        /* 行高  line-height
        取值：数值（px）  百分比
        如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了*/
        .div2 {
      
      
            width: 200px;
            height: 100px;
            border: 1px solid red;
            line-height: 50px;
        }
        /* 小型大写字母显示文本 这意味着所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。
         font-variant: small-caps */
        .div2>.two{
      
      
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">你好，我是p1</p>
        <p class="p2">你好，我是p2</p>
        <p class="p3">你好，我是p3</p>
        <p class="p4">你好，我是p4</p>
        <p class="p5">你好，我是p5</p>
    </div>
    <div class="div2">
        <p class="one">hello ,html,css</p>
        <p class="two">hello ,html,css</p>
    </div>
</body>

效果图：
在这里插入图片描述

补充：vertical-align垂直基线对齐属性

属性值：

top:顶部对齐

middle：中部对齐

bottom：底部对齐

baseline : 默认对齐
关于上章讲到的基线对齐问题，就是给加上一个相同的对齐的属性值，顶部，中部，或底部对齐。详见上章三、4基线对齐问题

三、文本属性

1.text-align 水平对齐方式

属性值：

left 居左对齐

center 水平居中对齐

right 居右对齐

<style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: thistle;
            margin-bottom: 10px;
        }
        /* 水平对齐方式： */
        .div1>.p1{
      
      
            /* 居左对齐 */
            text-align:left;
        }
        .div1>.p2{
      
      
            /* 水平居中对齐 */
            text-align:center;
            /* 加上行高line-height=height*/
            line-height: 50px;
        }
        .div1>.p3{
      
      
            /* 居右对齐 */
            text-align:right;
            text-indent: 10px;
        }
</style>
<body>
    <div class="div1">
        <p class="p1">这是我的对齐方式</p>
        <p class="p2">这是我的对齐方式</p>
        <p class="p3">这是我的对齐方式</p>
    </div>
</body>

效果图：
在这里插入图片描述

2.text-indent 首行缩进

取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。

<style>
        /* 首行缩进
        取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。*/
        .div2{
      
      
            width: 500px;
            height: 150px;
            border: 1px solid red;
            text-indent: 20px;
            /* text-indent: -20px; */
        }
        
    </style>
    <div class="div2">
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
    </div>

效果图：
在这里插入图片描述

3. text-decoration 文本线样式

属性值：

none 默认值，没有文本线
一般用来清除a链接的下划线

underline 下划线

overline 上划线

line-through 中划线
注意：del标签是删除线标签。一个是样式，一个是标签。

4.text-decoration-color 文本线颜色

<style>
        .div3>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }

        /* 文本线样式 */
        .div3>.p1>a{
      
      
            /* none 默认值，没有文本线 */
            text-decoration: none;
        }
        .div3>.p2{
      
      
            /* underline 下划线 */
            text-decoration: underline;
        }
        .div3>.p3{
      
      
            /* overline 上划线 */
            text-decoration: overline;
        }
        .div3>.p4{
      
      
            /*  line-through 中划线
            del标签是删除线 */
            text-decoration: line-through;
        }

        /* 文本线颜色 */
        .div3>.p2{
      
      
            text-decoration-color: blue;
        }
        .div3>.p3,.div3>.p4{
      
      
            text-decoration-color: red;
        }
    </style>
    <div class="div3">
        <p class="p1"><a href="">我是超链接</a></p>
        <p class="p2">文本线</p>
        <p class="p3">文本线</p>
        <p class="p4">文本线</p>
        <p class="p5">￥99 <del>原价：299</del> 我是删除线</p>
        
    </div>

效果图：
在这里插入图片描述

5.text-transform 字母大小写转换

属性值：

none 默认值，不变

uppercase 首字母大写

capitalize 字母全部变为大写

lowercase 字母全部变为小写

6.letter-spacing 字间距

它是控制字与字（字母与字母），即字符之间的距离。
属性值：数值，单位：px、em。

7.word-spacing 词间距

它是控制单词与单词之间的距离，即控制本身就有空格的这个空格距离。
属性值：数值，单位：px、em。

二者区别：

letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。

word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。

<title>文本属性</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }
        
        /* 字母大小写转换 */
        .div1>.p1{
      
      
            /* none 默认值，不变 */
            text-transform: none;
        }
        .div1>.p2{
      
      
            /* 首字母大写 */
            text-transform: uppercase;
        }
        .div1>.p3{
      
      
            /* 字母全部变为大写 */
            text-transform: capitalize;
        }
        .div1>.p4{
      
      
            /* 字母全部变为小写 */
            text-transform: lowercase;
        }
        .div2>p{
      
      
            width: 500px;
            height: 50px;
            background-color: green;
            margin-bottom: 10px;
        }

        .div2>.p2{
      
      
            /* 控制字与字（单个字符）之间的距离 */
            letter-spacing: 30px;
        }
        .div2>.p3{
      
      
            /* 控制以空格间隔开文字的间距（空格本身的宽度）*/
            word-spacing: 30px;
        }
        /* letter-spacing和word-spacing的 区别： 
        1.letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。 
        2. word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。
        */
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">HELLO,i love html and css</p>
        <p class="p3">HELLO,i love html and css</p>
        <p class="p2">HELLO,i love html and css</p>
        <p class="p4">HELLO,i love html and css</p>
    </div>
    <div class="div2">
        <p class="p1">你好,我是p。html and css ## ￥￥</p>
        <p class="p2">你好,我是p。html and css ## ￥￥</p>
        <p class="p3">你好,我是p。html and css ## ￥￥</p>
    </div>
</body>

效果图：
在这里插入图片描述

8.white-space 换行方式

属性值：

normal 默认值，正常换行

nowrap 文本不换行

9.word-break 长单词换行方式

属性值：

normal 默认值，使用浏览器默认的换行方式

break-all 允许在单词内换行

keep-all 只能在半角空格或连字符处换行

<style>
       div{
      
      
           width: 150px;
           height: 100px;
           border: 1px solid red;
           margin-bottom: 10px;
           white-space: normal;
       }
       /* white-space 换行方式
        normal 默认值，正常换行
        nowrap 文本不换行*/
       .div2{
      
      
           white-space: nowrap;
       }

       .div3{
      
      
           /* *normal* 默认值，使用浏览器默认的换行方式 */
           /* break-all 允许在单词内换行 */
           /* word-break: break-all; */
           word-break: break-all;
       }
       .div4{
      
      
        /* keep-all* 只能在半角空格或连字符处换行。 */
           /* word-break: break-all; */
           word-break: keep-all;
       }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div3">
        I love learning front end.I love learning front end
    </div>
    <div class="div4">
        I love learning front end.I love learning front end
    </div>
</body>

效果图：
在这里插入图片描述

10.文本溢出变为省略号…

溢出内容隐藏 overflow:hidden

溢出显示方式 text-overflow 属性值： ellipsis 显示省略符号来代表被修剪的文本 clip 默认，裁剪文本

单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少）

white-space: nowrap;给一个不换行属性，所以就会溢出

overflow:hidden; 溢出部分给隐藏起来

text-overflow: ellipsis 溢出的内容变为…

<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1{
      
      
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 将单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少） */
            /*给一个不换行属性，所以就会溢出  */
            white-space: nowrap;
            /* 溢出隐藏了 */
            overflow:hidden;
            /* 溢出的内容变为... */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
</body>

效果图：
在这里插入图片描述
单行文字溢出部分变为…省略号（了解一下即可，不必深究）

<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
.div2{
      
      
    width: 200px;
    background-color: pink;

    /* 将多行文字溢出部分变为…省略号，要有以下五个步骤（必不可少） */
    /*给一个不换行属性，所以就会溢出  */

    /* 注意不要设置高度，默认由内容自己撑开 */

    /* 溢出隐藏了 */
    overflow:hidden;
    /* 溢出的内容变为... */
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 这个数值代表想要第几行变为...省略号隐藏 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
    </style>
</head>
<body>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。我爱学前端，零基础学HTML+CSS。
    </div>
</body>

效果图：
在这里插入图片描述

四、属性继承

继承：一个子元素可以从祖先元素继承一些属性的值。
大部分的文本文字属性都会继承，而盒子本身的宽高边距边框等属性则不会继承。

总结

上述是小编为大家整理的颜色属性（颜色取值法）、字体样式、文本属性等部分进行了一个比较详细的讲解。参考多方资料加上自己的理解整理出来的，或有不确之处和疏漏的地方，还望各位大佬能够不吝赐教，加以斧正，小编在此先行谢过了。