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

4.1文本颜色

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

div {

color: red;

}

颜色表示方法：

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

开发中最常用的是16进制

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>CSS文本外观属性之颜色</title>
  7.     <style>
  8.         div {
  9.             /* color: pink; */
  10.             /* color: #ff0000; */
  11.             color: rgb(200,0,0);
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div>听说喜欢pink色的男生，都喜欢男人</div>
  17. </body>
  18. </html>

4.2 对齐文本

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

div {

text-align: center;

}

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

right

 右对齐
center 居中对齐

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>文字对齐</title>
  7.     <style>
  8.         h1 {
  9.             /* 本质是让h1盒子里面的文字水平居中对齐 */
  10.             text-align: center;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <h1>文本对齐</h1>
  16. </body>
  17. </html>

4.3装饰文本

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

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

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>CSS文本装饰之装饰文本</title>
  7.     <style>
  8.         div {
  9.             /* 下划线 */
  10.             /* text-decoration: underline; */
  11.             /* 删除线 */
  12.             text-decoration: line-through;
  13.             /* 上划线 */
  14.             /* text-decoration: overline; */
  15.         }
  16.         a {
  17.             /* 取消a默认的下划线 */
  18.             text-decoration: none;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>
  24.         粉红色的回忆
  25.     </div>
  26.  
  27.     <a href="#">粉红色的回忆</a>
  28. </body>
  29. </html>

4.4文本缩进

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

div {

text-indent： 10px;

}

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

p{

text-indent: 2em;

}

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

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>文本缩进</title>
  7.     <style>
  8.         p {
  9.             /* 文本的第一行缩进多少距离 */
  10.             text-indent: 20px;
  11.         }
  12.         h4 {
  13.             /* 如果此时写了2em 则是当前元素 2个文字大小的距离 */
  14.             text-indent: 2em;
  15.         }
  16.  
  17.     </style>
  18. </head>
  19. <body>
  20.     <p>生活不易，但是千万不能放弃</p>
  21.     <p>一定不能颓废，要努力</p>
  22.     <p>还要自信</p>
  23.     <h4>just learn---------------------------------------------------------------------------------------------------</h4>
  24. </body>
  25. </html>

4.5行间距

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

p{

line-height: 26px;

}

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

代码示范

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>行间距</title>
  7.     <style>
  8.         div {
  9.             line-height: 26px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>中国人</div>
  15. </body>
  16. </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. 解决vue中BMap未定义问题

    原文链接: 点我 最近在项目中使用了百度地图来显示物流信息,实现方式有两种: 引用Vue Baidu Map引用BMap存在的问题:\color{red}{存在的问题:}存在的问题::使用BMap可以 ...

  2. 网络流中的图像转化为OpenCV中的Mat类型

    1,从网络中读取到的图像流,不支持查找,不能直接转化为Mat类型 2,例子如下: string Url = "http://192.168.0.110/cgi-bin/camera?reso ...

  3. 手写实现java栈结构，并实现简易的计算器（基于后缀算法）

    一.定义 栈是一种线性表结构,栈结构中有两端,对栈的操作都是对栈的一端进行操作的,那么被操作的一端称为栈顶,另一端则为栈底.对栈的操作其实就是只有两种,分别是入栈(也称为压栈)和出栈(也称为弹栈).入 ...

  4. 「译」JVM是如何使用那些你从未听过的x86魔幻指令实现String.compareTo的

    原文https://jcdav.is/2016/09/01/How-the-JVM-compares-your-strings/ 魔幻的String.compareTo 我们之前可能已经见过Java的 ...

  5. 如何使用Golang实现一个API网关

    你是否也存在过这样的需求,想要公开一个接口到网络上.但是还得加点权限,否则被人乱调用就不好了.这个权限验证的过程,最好越简单越好,可能只是对比两个字符串相等就够了.一般情况下我们遇到这种需要,就是在函 ...

  6. 【Hadoop离线基础总结】CDH版本的zookeeper环境搭建

    CDH版本的zookeeper环境搭建 下载 下载地址 http://archive.cloudera.com/cdh5/cdh/5/ 修改配置文件 创建ZooKeeper数据存放目录 mkdir - ...

  7. 一文教你快速搞懂速度曲线规划之T形曲线（超详细+图文+推导+附件代码）

    运动控制中常用的T速度曲线规划的原理和程序实现,最后给出了测试结果: 如果本文帮到了您,请帮忙点个赞

  8. 错误 在应用程序级别之外使用注册为 allowDefinition='MachineToApplic

    错误 在应用程序级别之外使用注册为 allowDefinition='MachineToApplication' 的节是错误的.如果在 IIS 中没有将虚拟目录配置为应用程序,则可能导致此错误. 如果 ...

  9. python --设置Python3 设置为机器默认

    echo alias python=python3 >> ~/.bashrc source ~/.bashrc 反之,如果仍然需要Python2.7 ,则改成2.7就行. update : ...

  10. Navicat15 for Mysql激活教程

    1.下载Navicat Premium Navicat15链接:http://www.navicat.com.cn/download/navicat-premium,选择相应版本,这里选择window ...