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. Spring源码学习——自定义标签

    2019独角兽企业重金招聘Python工程师标准>>> 1.自定义标签步骤 创建一个需要扩展的组件 定义xsd文件描述组件内容 创建一个文件,实现BeanDefinitionPars ...

  2. vue 搭建框架到安装插件依赖，Element、axios、qs等

    一.使用vue 单页面开发,首先要安装好本地环境 步骤如下: 1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --reg ...

  3. Xenia and Colorful Gems(二分--思维)

    给定三个数组a,b,c. 要求从每个数字取一个数,使得两两之差和最小. 求出这个数. \(我又懵逼了.我是会O(n^3)的暴力啊,怎么办.\) \(\color{Red}{从结果看,选出来的三个数必定 ...

  4. git&&SourceTree使用总结

    git&&sourceTree操作学习 基本操作 commit 提交 pull 更新代码 push 推送代码 fetch 抓取代码 Branch 新建分支 merge 合并代码 Sta ...

  5. basicRF双向灯光控制

    题目: 实现基于BasicRF无线点对点通信的双向灯光控制,具体要求如下: 1> 节点A 和节点B 的PANID设置为0x1234,通道号设置为17,节点地址自定义.<2> 按下节点 ...

  6. js 调用webservice及nigix解决跨域问题

    前言 我们写一些简单的爬虫的时候会遇到跨域问题,难道我们一定要用后台代理去解决吗? 答案是否定的.python之所以适应爬虫,是因为库真的很好用. 好吧python不是今天的主角,今天的主角是js. ...

  7. HMM-前向后向算法理解与实现（python）

    目录 基本要素 HMM三大问题 概率计算问题 前向算法 后向算法 前向-后向算法 基本要素 状态 \(N\)个 状态序列 \(S = s_1,s_2,...\) 观测序列 \(O=O_1,O_2,.. ...

  8. [hdu5216]排序

    题意:给定两个长度为M的数组a,b,对于一个1-M的排列,不妨设为P,如果对任意0<=i<M,都有a[i] <= b[P[i]],那么称为一种合法情况,对于一种合法情况,对所有0&l ...

  9. TC SRM498 Div1 1000PT（容斥原理+DP）

    [\(Description\)] 网格中每步可以走\((0,\cdots M_x,0\cdots M_y)\)中任意非零向量,有\(K\)种向量不能走,分别是\((r_1,r_1),(r_2,r_2 ...

  10. Lottery

    0x01 修改金币到8位,才能买东西 robots.txt中发现.git泄露 下载附件,得到源码 审计api.php 我们传入的值与随机生成的值进行比较, 按照相同的个数,得到不同的钱 if($num ...