CSS常用属性之文本属性（四）

CSS常用文本属性主要有：text-decoration、text-indent、line-height、font、text-align、word-spacing、letter-spacing等等。。

文本属性

1、text-decoration 修饰线
2、text-indent 首行缩进
3、line-height 行高
4、font属性复合写法
5、text-align 行内内容水平位置
6、word-spacing 字间距
7、letter-spacing 字符间距

1、text-decoration 修饰线

用于设置文本的修饰线外观的（下划线，上划线，贯穿线/删除线或闪烁）。

常用属性值：

none：去掉下划线

underline：添加下划线

line-through：添加删除线

扩展：
/* text-decoration它是以下四个属性的简写 */
text-decoration-line: /* 文本修饰的位置，如underline，line-through */
text-decoration-color: /* 文本修饰的颜色 */
text-decoration-style: /* 文本修饰的样式，如wary,solid,dashed */
text-decoration-thickness: /* 文本修饰的粗细 */
/* 同时设置 波浪线 下划线 红色 粗细 */
text-decoration: wary underline red 5px;

2、text-indent 首行缩进

一段文本的首行向内缩的距离，一般缩进2个字符的间距。

常用单位是em，|1em是一个字符的宽度，2em则是2个字符的宽度。
/* p首行缩进为2个字符大小 */
p {text-indent: 2em;
}扩展
p span {/* 如果父元素p的字体大小为20px，则span字体大小为40px，因为父元素一个字符是20px，sapn是2个字符 */font-size: 2em;
}

3、line-height 行高

行高就是指一段文字所占的空间高度总高，然后文字在这个高度的垂直方向居中显示。

行高值的4种写法：

单位实例说明

px line-height:30px; 行高为30px

数值表示法 line-height:2; 行高为字体大小的两倍（推荐使用）

百分比表示法 line-height:200%; 行高为字体大小的200%

normal line-height:normal; 取决于用户端，桌面浏览器使用默认值约为1.2，也取决于元素的font-family

注意：

主段落内容的line-height至少应为1.5

如果文字大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放

单位	实例	说明
px	line-height:30px;	行高为30px
数值表示法	line-height:2;	行高为字体大小的两倍（推荐使用）
百分比表示法	line-height:200%;	行高为字体大小的200%
normal	line-height:normal;	取决于用户端，桌面浏览器使用默认值约为`1.2`，也取决于元素的`font-family`

4、font属性复合写法

font属性可以用来作为font-style, font-weight, font-size, line-height, font-family属性的合写。
/* 字体大小20px 行高为字体的2倍 字体类型微软雅黑，后备字体Arial */
font:20px/2 "微软雅黑",Arial;
/* 字体倾斜 加粗 字体大小20px 行高为字体的2倍 字体类型微软雅黑，后备字体Arial */
font:italic bold 20px/2 "微软雅黑",Arial
font属性连写注意事项：

font属性连写时，必须设置font-size和font-family才能生效

font-style和font-weight必须在font-size之前

任何未指定的值都将设置为其对应的初始值
p {border: 1px solid red;/* 此行高不生效，因为font连写时，30px/行高，这里默认有行高了 *//* line-height: 40px; */font: bold 30px "宋体";/* line-height 写在font下边，即可生效，此时时覆盖了font默认的行高 */line-height: 40px;注意：连写时，即使没有写行高，本质上它也是采用了默认的行高
}

5、text-align 行内内容水平位置

定义行内内容（例如文字，图片，行内块级元素）相对它的块级父元素的对齐方式。

常用的三个属性值：

left：水平居左

right：水平居右

center：水平居中

6、word-spacing 字间距

word-spacing 用于设置英文单词之间的间距。

属性值：

normal：正常的单词间距，由当前字体或/浏览器定义

长度：通过指定具体的间距来增加英文的单词间距
/* 英文单词之间的间距 */
word-spacing: 50px;

7、letter-spacing 字符间距

letter-sapcing属性用于设置文本字符的间距。

属性值：

normal：此间距是按照当前字体的正常间距确定的

长度：指定文字间的间距以替代默认间距，可以是负值，如-10px
/* 字间距 */
letter-spacing: 30px;

CSS常用属性之文本属性（四）相关推荐

从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
CSS属性【文本属性】or【列表属性】
CSS属性 1.文本属性 font-size 字体大小单位是px,浏览器默认是16px,设计图常用字号是12px font-family 字体多个字体中间用逗号连接,先解析第一个字体,如果没有解析 ...
CSS引入方式与文本属性
CSS引入方式与文本属性引入方式内部样式表行内样式表外部样式表文本属性文本对齐文本缩进文本颜色行间距装饰文本引入方式内部样式表 <!DOCTYPE html> &l ...
css文字向右对齐_web前端入门到实战：css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
CSS的基础选择器、字体属性、文本属性和引入方式
目录一.css的语法规范二.css的基础选择器 (一)基础选择器总结 (二)标签选择器 (三)类选择器 (四)id选择器 (五)通配符选择器三.CSS字体属性 (一)字体属性总结 (二)font ...
css的基本操作学习--css样式，选择器，hover，文字属性，文本属性，背景
什么是css? 通配符选择器 <head>/* *通配符选择器匹配任何元素 */*{margin: 0;padding: 0;} </head> css样式有三种一种是内嵌 ...
css文本行高是哪个属性_CSS字体属性和文本属性总结
1.CSS字体属性 1.1 字体 font-family 1.2 字号 font-size 1.3 字体粗细 font-weight font-weight : bold; font-weight ...
CSS属性：字体属性和文本属性
本文重要内容 CSS的单位字体属性文本属性定位属性:position.float.overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中 ...
css文本行高是哪个属性_CSS样式----CSS属性：字体属性和文本属性（图文详解）...
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位字体属性文本属性定 ...

CSS常用属性之文本属性（四）

文本属性

1、text-decoration 修饰线

2、text-indent 首行缩进

3、line-height 行高

4、font属性复合写法

5、text-align 行内内容水平位置

6、word-spacing 字间距

7、letter-spacing 字符间距

CSS常用属性之文本属性（四）相关推荐

最新文章

热门文章