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. Leetcode---Solutions&Notes

    Leetcode已经成为面试必备技能之一,为了紧随潮流,也模仿大佬们刷刷题. 1.采用"龟系"做法,每道题尽量做到时间复杂度和空间复杂度的较优水平: 2.每道题的Solution先 ...

  2. 2019年广东工业大学腾讯杯新生程序设计竞赛（同步赛）E-缺席的神官

    链接:https://ac.nowcoder.com/acm/contest/3036/E 来源:牛客网 题目描述 面前的巨汉,让我想起了多年前的那次,但这个巨汉身上散布着让人畏惧害怕的黑雾.即使看不 ...

  3. 一只简单的网络爬虫（基于linux C/C++）————socket相关及HTTP

    socket相关 建立连接 网络通信中少不了socket,该爬虫没有使用现成的一些库,而是自己封装了socket的相关操作,因为爬虫属于客户端,建立套接字和发起连接都封装在build_connect中 ...

  4. 实现MapReduce

    简介 当我们要统计数亿文本的词频,单个机器性能一般,况且是数亿级数据,处理是十分缓慢的,对于这样的任务,希望的是多台电脑共同处理,大幅度减少任务时间.联合多台电脑一起工作的系统就是分布式系统. 最近在 ...

  5. 题目分享T

    题意:蛐蛐国里现在共有n只蚯蚓(n为正整数).每只蚯蚓拥有长度,我们设第i只蚯蚓的长度为a_i(i=1,2,...,n),并保证所有的长度都是非负整数(即:可 能存在长度为0的蚯蚓).每一秒,神刀手会 ...

  6. DVWA-对Command Injection(命令注入)的简单演示与分析

    前言 上一篇文章中,对命令注入进行了简单的分析,有兴趣的可以去看一看,文章地址 https://www.cnblogs.com/lxfweb/p/12828754.html,今天这篇文章以DVWA的C ...

  7. andorid jar/库源码解析之Dagger/Dagger2

    目录:andorid jar/库源码解析 Dagger.Dagger2: 作用: 1.用于解耦Activity和业务逻辑 2.在使用业务的时候,不需要重复编写new代码. 3.当业务变化的时候,不需要 ...

  8. Collection接口【集合】和Iterator迭代器类

    1.1集合的概述 前面基础学习并使用过集合ArrayList<E>,那么集合究竟是什么呢? 集合:集合是Java中提供的一种容器,可以用来存储多个数据. 那么意思就是说集合是容器,但是容器 ...

  9. Day_09【常用API】扩展案例6_将用户给定的字符串首个字符大写，并分别加上"set"和"get"输出

    定义如下方法public static String getPropertyGetMethodName(String property) (1)该方法的参数为String类型,表示用户给定的成员变量的 ...

  10. 一文教你快速修改ubuntu终端显示的主机名和用户名

    为了让终端的显示更加简洁,清爽,改掉显示的用户名和主机名,改成你喜欢的名字. 创作不易,如果本文帮到了您: 如果本文帮到了您,请帮忙点个赞