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. JAVA大数--POJ 1715 大菲波数

    Problem Description Fibonacci数列,定义如下: f(1)=f(2)=1 f(n)=f(n-1)+f(n-2) n>=3. 计算第n项Fibonacci数值.  Inp ...

  2. codeforce 225B Code Parsing

      Little Vitaly loves different algorithms. Today he has invented a new algorithm just for you. Vita ...

  3. 疯子的算法总结14--ST算法（区间最值）

    借助倍增和动态规划可以实现O(1)的时间复杂度的查询 预处理: ①区间DP   转移方程  f[i][j] = min(MAX同理)(f[i][j - 1],f[i + ][j - 1])  f[i] ...

  4. shell之路 shell核心语法【第一篇】shell初识

    shell简介 1.Shell是Unix的脚本语言,是与 Unix/Linux 交互的工具,shell使用的熟练程度反映了用户对Unix/Linux使用的熟练程度 2.Shell是系统命令+程序逻辑的 ...

  5. andorid jar/库源码解析之okio

    目录:andorid jar/库源码解析 Okio: 作用: 说白了,就是一个IO库,基于java原生io.来进行操作,内部做了优化,简洁,高效.所以受到了一部分人的喜欢和使用 栗子: 读写文件. p ...

  6. MODIS系列之NDVI（MOD13Q1）七：时间序列S-G滤波之Python

    时间序列S-G滤波之Python 根据上上篇博文(MODIS系列之NDVI(MOD13Q1)五:NDVI处理流程)做出的NDVI.我们求NDVI时间序列图,但该NDVI时序图为地表各土地类型综合的ND ...

  7. Java——Java代码的执行顺序

    该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.构造方法 构造方 ...

  8. H - Food HDU - 4292 网络流

    题目   You, a part-time dining service worker in your college’s dining hall, are now confused with a n ...

  9. Re模块练习题

    import re s = "1 -2*(60+(-40.35/5)-(-4*3))" # 获取所有数字 ret = re.findall(r"\d+", s) ...

  10. spring boot中使用AJAX请求，并将回调函数赋值给input输入框

    HTML: <script>/* $(document).ready(function(){} 页面加载事件,加载完页面之后执行 */ $(document).ready(function ...