05_文本属性

最新推荐文章于 2023-08-05 15:35:01 发布

The Biggest

最新推荐文章于 2023-08-05 15:35:01 发布

阅读量707

点赞数

分类专栏：前端学习文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/java_996/article/details/121137637

版权

前端学习专栏收录该内容

13 篇文章

订阅专栏

CSS文本属性

文本属性可以定义文本的外观，比如文本颜色，对齐方式，装饰文本，文本缩进，行间距

这里用到的css文本属性主要有：

1.color：设置文本颜色

2.text-align:设置文本对齐方式

3.text-decoration:设置文本装饰线

4.text-indent:设置文本缩进

5.line-height:设置行间距

color属性：

设置文本颜色，颜色主要有三种表示方式：

1.预装颜色： color：red;

2.十六进制颜色：color：#ff0000; (开发中使用最多)

注意：十六进制颜色#不能忘，每两位对应一个颜色，分别是红绿蓝。

ff转为二进制为：11111111，转为十进制为255。

00转为十进制为0，所以绿色和蓝色的值为0.

所以#ff0000对应颜色为（255，0，0）是饱和度最高的红色。

如果红绿蓝分别对应的两位十六进制数字相同的话，是可以简写成一位，上述可以简写为 color：#f00;

3.rgb颜色：color：rgb(255,0,0);

text-align属性：

设置文本对齐方式

属性值：

1.text-align: center; 居中对齐

2.text-align: left; 左对齐，也是浏览器默认的对齐方式

3.text-align: right; 右对齐

text-decoration属性：

装饰文本：下划线删除线上划线没有线（去除原本存在的线）

text-decoration值：

none：没有，默认值,可以删除下划线，比如a标签自带的下划线

underline：下划线

overline: 上划线

line-through:删除线

text-indent属性：

文本缩进：用来指定文本的第一行的缩进，经常是将段落的首行进行缩进,可以选取负值，文字将会向左进去看不到

属性text-indent：单位像素px

独特单位：em 相对与当前的文字大小自动生成相应数量的的文字缩进距离.即一个字就是一个em单位

line-height属性：

单位：像素px

行间距由上间距+字距+下间距组成，一般字体大小是一定的，改变行间距是减去字体高度剩下的值均分给上下间距。

所以我们说的行间距即等价为上行字体的底端到当前行字的底端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>

    <!-- 
        文本属性可以定义文本的外观，比如文本颜色，对齐方式，装饰文本，文本缩进，行间距
     -->

     <!-- /* 
     对齐方式：text-ailgn 只能设置水平对齐方式，默认是左对齐。
     值：
     center left right
     */ -->
     
     <style>
         .div1 {

               /* 
               RGB颜色
               */
               color: rgb(255,0,0);

                text-align: right;

         }

         .p1 {
             
              /*
              16进制颜色，最常用，使用PS可以直接吸取
               color: #ff0000;
               */
             color: #ff0000;
             text-align: center;
         }

         span {
             /* 
             直接输入颜色,预定义
             color: red;
              */
            color: red;
         }
         /* 
         装饰文本： 下划线 删除线 上划线
         text-decoration:
         值：
         none：没有，默认值,可以删除下划线，比如a标签自带的下划线
         underline:下划线
         overline：上划线
         line-through:删除线
         */
         .pink {
             /* text-decoration: underline; */
             /* text-decoration: line-through; */
             text-decoration: overline;
         }
         a {
             /* 去掉a标签自带的下划线 */
             text-decoration: none;
         }
         /* 
         文本缩进：用来指定文本的第一行的缩进，经常是将段落的首行经行缩进,可以选取负值，文字将会向左进去看不到
            属性text-indent：单位像素px
            独特单位：em 相对与当前的文字大小自动生成相应数量的的文字缩进距离.即一个字就是一个em单位
         */
         p {
             text-indent: 2em;
             /* text-indent: 16px; */
         }

         /* 行间距：line-height,单位是像素。行间距等于  上间距+文字高度+下间距 ；在变行间距时其实改变的是上间距和下间距，文字大小是设置的 */
         .height{
             text-indent: 2em;
             line-height: 30px;
             /* 因为文字是16px，行高是16px的话上下间距就没有了，而如果设置像素高于16像素，则多余的部分平均分给上下间距。在测量中，第一行的最下沿到第二行的最下沿即为行高*/
         }

     </style>
</head>
<body>

    <div class="div1">我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</div>
    <p class="p1">我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</p>
    <span>我是清都山水郎，天教分付与疏狂。诗万首，酒千觞，几曾着眼看侯王？</span>
    <div class="pink">pink</div>
    <a href="#">纵横</a>
    <div class="height">中国人</div>
    <p class="height">打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

    <p class="height"> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
     
    <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>


</body>
</html>