CSStext（文本）属性可定义文本外观，比如文本颜色，对齐文本，装饰文本，文本缩进，行间距等

4.1文本颜色

color属性用于定义文本颜色。

div {

color: red;

}

颜色表示方法：

表示 属性值
预定义颜色值 red，green，blue，pink
十六进制 #FF0000,#FF6600,#29D794
RGB代码 rgb(255,0,0)或rgb（100%，0%，0%）

开发中最常用的是16进制

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS文本外观属性之颜色</title>

    <style>

        div {

            /* color: pink; */

            /* color: #ff0000; */

            color: rgb(200,0,0);

        }

    </style>

</head>

<body>

    <div>听说喜欢pink色的男生，都喜欢男人</div>

</body>

</html>

4.2 对齐文本

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

div {

text-align: center;

}

属性值 解释
left 左对齐（默认值）

right

 右对齐
center 居中对齐

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文字对齐</title>

    <style>

        h1 {

            /* 本质是让h1盒子里面的文字水平居中对齐 */

            text-align: center;

        }

    </style>

</head>

<body>

    <h1>文本对齐</h1>

</body>

</html>

4.3装饰文本

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

属性值 描述
none 默认。没有装饰线（最常用）
underline 下划线。链接a自带下划线（常用）
overline 上划线（几乎不用）
line-through 删除线（不常用）

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS文本装饰之装饰文本</title>

    <style>

        div {

            /* 下划线 */

            /* text-decoration: underline; */

            /* 删除线 */

            text-decoration: line-through;

            /* 上划线 */

            /* text-decoration: overline; */

        }

        a {

            /* 取消a默认的下划线 */

            text-decoration: none;

        }

    </style>

</head>

<body>

    <div>

        粉红色的回忆

    </div>

    <a href="#">粉红色的回忆</a>

</body>

</html>

4.4文本缩进

text-indent属性用来指定文本的第一行缩进，通常将段落的首行缩进

div {

text-indent： 10px;

}

通过设置该属性，所有元素的第一行都可以所及一个给定的长度，甚至该长度可以是负值

p{

text-indent: 2em;

}

em 是一个相对单位，就是当前元素（front-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文本缩进</title>

    <style>

        p {

            /* 文本的第一行缩进多少距离 */

            text-indent: 20px;

        }

        h4 {

            /* 如果此时写了2em 则是当前元素 2个文字大小的距离 */

            text-indent: 2em;

        }

    </style>

</head>

<body>

    <p>生活不易，但是千万不能放弃</p>

    <p>一定不能颓废，要努力</p>

    <p>还要自信</p>

    <h4>just learn---------------------------------------------------------------------------------------------------</h4>

</body>

</html>

4.5行间距

line-height属性用于设置行间距里（行高）。可以控制文字行与行之间的距离

p{

line-height: 26px;

}

上间距下间距共同构成line-height（行高）

代码示范

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>行间距</title>

    <style>

        div {

            line-height: 26px;

        }

    </style>

</head>

<body>

    <div>中国人</div>

</body>

</html>

4.6文本属性总结

属性 表示 注意点

color

 文本颜色 我们通常用16进制比如 而且是简写模式 #ff
text-align 文本对齐 可以设定文字水平的对齐方式
text-indent 文本缩进 通常我们用于段落首行缩进2个字的距离 text-indent：2em;

text-decoration

 文本修饰 记住添加下划线 underline  取消下划线none
line-height 行高 控制行与行之间的距离
     

4 CSS文本属性的更多相关文章

  1. [CSS]文本属性（Text）

      CSS 文本属性(Text) 属性 描述 CSS color 设置文本的颜色. 1 direction 规定文本的方向 / 书写方向. 2 letter-spacing 设置字符间距. 1 lin ...

  2. css文本属性用法总结

    稍稍总结了下css文本的一些属性用法,自己忘记的时候也可以用来查查,不用去查网站那么麻烦. 下面是部分总结,也希望对其他人有用 文本修饰 (1)text-decoration:  文本修饰(横线) 4 ...

  3. css文本属性

    CSS1&2中的文本属性 属性 版本 简介 text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  4. css 文本属性和字体属性

    1.将浮动居中 这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. CSS文本属性 文本阴影text-shadow 换行 text-overflow

    div{             font-size: 20px;             text-shadow: 5px 5px 5px #333; text-shadow: 10px 10px ...

  6. CSS 文本属性

    一.文本位置 text-align: 参数 /** * left center right:左中右**/text-align: left; 二.文本行间距 line-height: 参数 特别要注意: ...

  7. CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  8. 学习css之文本属性

    css3之文本属性: 1.缩进和水平对齐:text-indent, 通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值. 这个属性最常见的用途是将段 ...

  9. 如何设置文本不换行省略号显示等CSS常用文本属性

    如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

随机推荐

  1. 小老板，我学的计算机组成原理告诉我半导体存储器都是断电后丢失的，为什么U盘SSD（固态硬盘）没事呢？

    什么是闪存: 快闪存储器(英语:flash memory),是一种电子式可清除程序化只读存储器的形式,允许在操作中被多次擦或写的存储器 存储原理 要讲解闪存的存储原理,还是要从EPROM和EEPROM ...

  2. python（内置高阶函数）

    1.高阶函数介绍: 一个函数可以作为参数传给另外一个函数,或者一个函数的返回值为另外一个函数(若返回值为该函数本身,则为递归),如果满足其一,则为高阶函数. 常见的高阶函数:map().sorted( ...

  3. unittest 管理接口用例（数据分离-读取excel）

    1.公共模块 ---> login.xls """ common (package) ---> ReadFile.py """ ...

  4. Servlet 教程——检视阅读

    Servlet 教程--检视阅读 参考 Servlet教程--菜鸟--蓝本 Servlet教程--w3cschool Servlet教程--易百 servlet依赖maven依赖: <!--se ...

  5. MySQL JDBC Driver 8.0+设置服务器时区

    遇到一个问题,线下环境测试数据的查询完全没有问题,但是线上环境却没法查询出数据,并且从mybatis输出的日志来看,查询参数也没有问题,数据库中数据也是存在的,查询参数类型是java.util.Dat ...

  6. Coursera课程笔记----C程序设计进阶----Week 5

    指针(二) (Week 5) 字符串与指针 指向数组的指针 int a[10]; int *p; p = a; 指向字符串的指针 指向字符串的指针变量 char a[10]; char *p; p = ...

  7. Numpy-np.random.normal()正态分布

    X ~ :随机变量X的取值和其对应的概率值P(X = ) 满足正态分布(高斯函数) 很多随机现象可以用正态分布描述或者近似描述 某些概率分布可以用正态分布近似计算 正态分布(又称高斯分布)的概率密度函 ...

  8. vue相关环境搭建一条龙

    前言 如题,基于很多朋友对于环境配置及搭建存在疑问或者不熟悉的情况,因此整理一篇完整的环境搭建说明,在此默认各位到手的电脑是需要从0开始配置环境.  nvm的安装 很多同学过去可能安装node都是直接 ...

  9. 04JAVA基础数组

    概念 存储同一种数据类型的多种元素的容器 数组初始化 动态初始化 设定数组长度,系统自动分配默认值 int[] arr = new int[3]; 静态初始化 给定数组默认值,系统自动分配长度 int ...

  10. strut2 自定义文件上传错误信息

    在文件上传过程中我们可以指定拦截器对文件类型.后缀名.大小进行设定,action中的配置: <interceptor-ref name="fileUpload"> &l ...