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. unittest（@classmethod 装饰器）

    1.前言: 前面讲到unittest里面setUp可以在每次执行用例前执行,这样有效的减少了代码量,但是有个弊端,比如打开浏览器操作,每次执行用例时候都会重新打开,这样就会浪费很多时间. 于是就想是不 ...

  2. muduo网络库源码学习————Timestamp.cc

    今天开始学习陈硕先生的muduo网络库,moduo网络库得到很多好评,陈硕先生自己也说核心代码不超过5000行,所以我觉得有必要拿过来好好学习下,学习的时候在源码上面添加一些自己的注释,方便日后理解, ...

  3. socket编程之并发回射服务器2

    承接上文:socket编程之并发回射服务器 为了让服务器进程的终止一经发生,客户端就能检测到,客户端需要能够同时处理两个描述符:套接字和用户输入. 可以使用select达到这一目的: void str ...

  4. [js进阶1]-数据类型

    基本数据类型 js 总的有7中数据类型,包括基本类型和引用类型 基本类型 6 种 number boolean string null undefiend symbol 前5种类型统称为原始类型 sy ...

  5. 将csv文件导入sql数据库

    有一个csv文件需要导入到Sql数据库中,其格式为 “adb”,"dds","sdf" “adb”,"dds","sdf" ...

  6. Battery Charging Specification Revision 1.2 中文版本

    Battery Charging Specification Revision 1.2 Li,Guanglei 2014.04.03 Rev0.1 转载请注明转自:http://blog.csdn.n ...

  7. Openwrt：mtd/mtd_write烧写固件

    文章目录 1 查看当前系统分区信息 2 备份固件firmware 3 恢复固件firmware 4 备份恢复Openwrt路由器配置 5 恢复Openwrt路由器默认设置 6 刷新路由器固件 比较简单 ...

  8. hadoop问题

    如果启动hadoop集群时,无法启动datanode,则可以集群所有节点下dfs.datanode.data.dir的配置值所指示的路径下清空所有文件(夹),然后 hadoop namenode -f ...

  9. 如何在MATLAB下把模糊推理系统转化为查询表(转载)

    如何在MATLAB下把模糊推理系统转化为查询表(原创) http://foundy.blog.163.com/blog/static/2633834420090212202156/?mode=edit ...

  10. LeetCode 102. 二叉树的层序遍历 | Python

    102. 二叉树的层序遍历 题目来源:https://leetcode-cn.com/problems/binary-tree-level-order-traversal 题目 给你一个二叉树,请你返 ...