css文本外观属性大全（内附实例与图解）

letter-spaceing：字间距
Word-spacing：单词间距
line-height：行间距
text-decoration：文本修饰
text-align:水平对齐方式
text-indent：首行缩进
white-space：空白符处理
Word-break：自动换行
text-Shadow：文字阴影
overflow 文字溢出
text-overflow 文字溢出处理
letter-spaceing：字间距

Letter-space属性用于定义字间距

Word-spacing：单词间距

-Word-spacing属性用于定义英文单词之间的间距，对中文字符无效，和letter-spacing一样，其属性值可以为不同的单位数值，允许使用负值默认为normal

Word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母间的间距，而Word-spacing定义的为英文单词之间的间距

line-height：行间距

Line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称成为行高。Line-height常用的属性单位有三种，分别为像素px,相对值em，和百分比%，实际工作中使用最多的是像素px

行高：文本顶部 + 文本底部 + 一倍行距
Css定义的行高：两行文本之间的基线的距离就是行高（加上去其实就等于上面定义行高的距离）

行高可以跟单位，也可以不跟单位，但是意义不同
Font: 12px/1.5em ‘宋体’;
Font: 12px/150% ‘宋体’;
Font: 12px/1.5 ‘宋体’;
Font: 12px/20px ‘宋体’; （绝对）
继承特性：
加上单位先计算后继承是父类为基准
不加单位先继承后计算是孩子根据自己的文字为基准
Line-height: 可以让单行文本垂直居中
行高=盒子的高度的时候文本在盒子中垂直方向居中
行高>盒子高度：文本偏下
行高<盒子高度：文本偏上

通常设置行高来控制文本的垂直居中

text-decoration：文本修饰

Text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性如下：
-none：没有装饰（正常文本默认）
-underline：下划线
-overline：上划线
-line-through: 删除线

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

另外，text-decoraction后可以赋多个值，用于给文本添加多种显示效果，例如希望文字同时有下划线跟删除线效果，就可以将underline和line-through同时赋值给text-decoration。

清除a标签的默认样式

a {text-decoration: none;}

text-align:水平对齐方式

Text-align属性用于设置文本内容的水平对齐，相当于HTML中的align对齐属性，其可用属性值如下：
-left：左对齐（默认）
-right：右对齐
-center：居中对齐

常用的文字水平居中

text-align: center;

text-indent：首行缩进

Text-indent属性用于设置段落的文本缩进，只能设置于块级标签。其属性值可为不同单位的数值，em字符宽度的倍数，或相当于浏览器窗口宽度的百分比%，允许使用负值，建议用em作为设置单位

一般用于网站h1标题的SEO优化

h1 {
text-indent: -9999px;
}

P {Text-indent: 2em;
/*首行缩进*/
}

white-space：空白符处理

使用HTML制作网页时，不论源代码中多少空格，在浏览器中只会显示一个字符的空白。在css中，使用white-space属性可设置空白字符1的处理方式，其属性如下：

-normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行

-pre：预格式化，按文档的书写格式保留空格、空行原样显示

-nowrap：空格空行无效，强制文本不能换行，除非遇到换行标记
。内容超过元素边界也不换行，若超出浏览器页面则会自动增加滚动条。

Word-break：自动换行

-Normal：使用浏览器默认的换行规则，不打断单词完整
-break-all：允许在单词内进行换行
-keep-all：只能在半角空格或连字符处进行换行连字符“- ，。 .”

Normal：

Break-all：

Keep-all：

text-Shadow：文字阴影

格式：

text-shadow: 水平位置垂直位置模糊距离阴影颜色;

注意设置文字阴影时，水平位置与垂直位置一定不能省，其他可以省略

 text-shadow: 10px 10px 5px #1234;

文字多阴影

语法格式同多背景

text-shadow: 2px 2px 5px blue,5px 5px 5px red;

文字凹凸效果

利用文字多阴影设置两个方向相反的文字阴影实现

凹：text-shadow: 1px 1px #000,-1px -1px #fff;
凸： text-shadow: -1px -1px #000,1px 1px #fff;

overflow 文字溢出

取值：
visible：对溢出内容不做处理，内容可能会超出容器。（默认）
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

常用：

overflow: hidden;

text-overflow 文字溢出处理

取值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（…）

注意：text-overflow使用需要配合overflow：hidden；（超出部分隐藏）和white-space：nowrap；（单行显示）一起使用

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

css文本外观属性大全（内附实例与图解）相关推荐

Html5 css文本属性,html5常用文本标签、CSS文本外观属性，你了解多少？
一.HTML5中常用的文本标签 1.标题标签 (1)定义及用法: HTML中,定义了6级标题,分别为h1. h2.h3.h4. h5. h6,每级标题的字体大小依次递减,1级标题字号最大,6级标题字号 ...
css文本外观属性中设置字体,css 文本外观属性(text) 和字体样式属性(font)
css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距对中文无效 line ...
CSS基础(part8)--文本外观属性
学习笔记,仅供参考,有错必纠文章目录 CSS 文本外观属性 color:文本颜色 letter-spacing word-spacing line-height test-decoration te ...
字体样式及其属性、文本外观属性
字体样式属性 font-size:字号大小相对长度单位说明 em 相对于当前对象内文本的字体尺寸 px 像素绝对长度单位说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-famil ...
首行缩进2字符，CSS文本外观之文本缩进
text-indent属性 text-indent: 20px; --缩进20px text-indent: 2em; --2em 则是缩进当前元素 2个文字大小的距离代码: <!DOCTYP ...
01.HTML和CSS基础知识总结（内附思维导图）
1.网页的基础认知 1-1.网页由那些部分组成文字.图片.音频.视频.超链接 1-2.网页背后的本质是什么前端程序员写的代码 1-3.前端的代码是通过什么软件转换成用户眼中的页面通过 ...
【CSS3】CSS3文本相关属性大全
说明本文的"文本"相关属性控制的是整段.整个div内文本的显示效果,包括文本文字的缩进.段内文字的对齐方式.文本中空白字符的处理等等,需要掌握. 网页源码 <!DOCTYP ...
html css 文本字体属性详解
文本.字体属性文本属性 color 为字体颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-family ...
css字体样式属性大全（内附实例）
目录 font-size:字号大小 font-family:字体 font-weight:字体粗细 font-style:字体风格综合设置字体样式 font-size:字号大小 font-size ...
构想：中文文本标注工具（内附多个开源文本标注工具）
■ 项目地址 | https://github.com/crownpku/Chinese-Annotator 自然语言处理的大部分任务是监督学习问题.序列标注问题如中文分词.命名实体识别,分类问题如关 ...

css文本外观属性大全（内附实例与图解）

css文本外观属性大全（内附实例与图解）相关推荐

最新文章

热门文章