1.2 CSS文本属性

最新推荐文章于 2023-07-16 00:12:28 发布

.弗兰克

最新推荐文章于 2023-07-16 00:12:28 发布

阅读量1k

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/z2768557792/article/details/129333190

版权

CSS Text(文本)属性： 定义文本外观，颜色，装饰，缩进，行间距来修饰文本

文本样式

文本缩进 text-indent
文本水平对齐方式：text-align
文本修饰：text-decoration
行高 line-height

CSS文本颜色属性color

颜色表示方式	表示含义	属性值
关键词	预设定义的颜色名	red，green，blue，yellow
rgb表示法	红绿蓝三原色，每项取值:0-255	rgb(0,0,0）,rgb(255,255,255),rgb(255,0,0)
rgba表示法	红绿蓝三+a表示透明度，取值范围:0-1	rgba(255,255,255，0.5）,rgba(255,0,0,0,3)
十六进制表示法	`#`开头,将数字转换成十六进制表示	`#`000000，`#`ff0000,`#`e92322

常见颜色

默认取法

基本色
skyblue：天蓝色
pink：粉色

rgb表示法

rgb(255,0,0) : 红色
rgb(0,255,0) : 绿色
rgb(0,0,255) : 蓝色
rgb(0,0,0)：黑色
rgb(255,255,255)：白色

透明度a

a的取值范围:0-1

完全不透明：1
完全透明: 0

举个栗子

 .blue {

        /* 文本颜色属性color */

        color: blue;  

    }

    .red {

        /* 文本颜色也可以用十六进制定义 # + 6位 */

        /* 颜色一般不用记忆，一般都是用吸管工具吸取 */

        color: #f10c0c;
        /*color: #ff00ff 可以写成 color: #f0f*/

    }
    
   /* 文本颜色也可以用RGB代码定义 rgb（100,25,67）/rgb(20%,15%,26%) */
    .yellow {

        color: rgb(201, 245, 7);

    }

    <p class="blus">我是蓝色</p>

    <p class="red">我是红色</p>
    
     <p class="yellow">我是黄色</p>

CSS文本对齐taxt-align

基本介绍

text-align属性用于设置元素内文本内容的水平对齐方式

元素文本对齐方式text-align属性
text-align的对齐方式有 right,left,center

注意：如果想让哪一个标签内的文本水平居中，text-align直接加入文本的父类元素，也就是上一级元素

举个栗子

 .p1 {

         /* text-align的对齐方式有right,left,center */

        /* text-align设置元素文本居中对齐 */

            text-align:center;

            /* text-align:left; */

            /* text-align:right; */

    }

  

    .p2 {

        text-align: right;

      }

      .p3 {

        text-align: left;

      }

  <p class="p1">我是居中p标签</p>

    <p class="p2">我是向右p标签</p>

    <p class="p3">我是向左p标签</p>

text-align能使哪些元素水平居中

文本
span标签，a标签
input标签，img标签
如果这些是子元素，那么将属性设置在父类标签

CCS文本修饰线属性 text-deccoration

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线

开发中会使用text-decoration：none，清除a标签默认的下划线

1.下划线 text-decoration: underline 最常用
2.取消下划线text-decoration: none 最常用
3.上划线text-deccoration: overline
4.删除线text-decoration: line-through

举个栗子


 .p1 {

        /* 下划线 */

        text-decoration: underline;

    }

  

    /* 一般网页链接都没下划线，所以直接标签选择器a 在css设置去线就行 */

    .p2 {

        /* 去掉下划线 */

        text-decoration: none;

    }


    .p3 {

    /* 上划线 */

    text-decoration: overline;

    }

    .p4 {

    /*删除线  */

    text-decoration: line-through;

    }

    <p class="p1">我是p标签,我有下划线</p>

    <a href="#" class="p2">我是a标签,我要去掉下划线</a>

    <p class="p3">我是p标签,我有上划线</p>

    <p class="p4">我是p标签,我有删除线</p>

CSS文本首行缩进text-indent(em)

注：

text-indent 属性用于指定文本的第一行的缩进，一般指段落的首行缩进
h1-h6，p标签都不缩进
em是一个相对单位，就是当前元素（font-size）,1个文字的大小,如果当前元素没有设置字体大小，则按照父元素的1个文字大小

举个栗子

/* 此时定义首行缩进20px（像素） */

    .p1 {

        text-indent: 20px ;

    }

 /* 此时可以设置数值em单位 */

    .p2 {

        text-indent: 2em;

    }

  
    /* 向左突出20像素 */

    .p3 {

        text-indent: -20px;

    }

<p>

我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签,我是正常的p标签

</p>

<p class="p1">

    我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px,我是p标签,我要缩进20px

</p>

<p class="p2">我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em,我是p标签,我要缩进2em</p>


<p class="p3">

我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素,我是p标签,我要向左突出20像素

</p>

CSS的行高 `line-height`

行高的作用：控制一行的上下间距

应用：

?使单行文本垂直居中可以设置line-height：文字父元素高度
网页精准布局时，会设置line-height，可以取消上下间距

特点：

行高指的是文字占有的实际高度
可以通过line-height来设置行高
行高经常用来设置文字的行间距

取值：

数字+px/em
单个数字（倍数，当前标签font-size的倍数）

举个栗子

.p1 {

        line-height: 16px;

    }

  

    .p2 {

        font-size: 30px;

        line-height: 60px;

    }


div class="p1">我是div标签,我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px,我是div标签,我的行高是16px,字体是16px,我是div标签，我的行高是16px,字体是16px,</div>

<div class="p2">我是div标签，我的行高是60px，字体大小是30pxx</div>

<div>我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签,我是正常div标签</div>

总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制，比如color： `#fff123`
text-align	文本对齐方式	暂无
text-indent	文本首行缩进	注意：只能设置首行缩进, 比如：`text-indent：2px`
text-decoration	文本的修饰	一般只用于链接去下划线text-decoration：none
line-height	行高	行高=上边距+字体高度+下边距,上边距=下边距

.弗兰克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.2 CSS文本属性

text-align属性用于设置元素内文本内容的水平对齐方式元素文本对齐方式text-align属性text-align的对齐方式有注意：如果想让哪一个标签内的文本水平居中，text-align直接加入文本的父类元素，也就是上一级元素举个栗子.p1 {/* text-align的对齐方式有right,left,center */ /* text-align设置元素文本居中对齐 */ text-align : center;
复制链接

扫一扫