文本的样式
文本样式
- text-align 文本的水平对齐方式
- 可选值：
- left 默认值 左对齐
- center 居中对齐
- right 左对齐
- justify 两端对齐
- 网页中，图片 行内块 都可以使用文本对齐的方式
- 可选值：
- text-indent 首行缩进
- 可以设置负值
- 负值文字向左移动，可以利用负值隐藏网页中的一些文字
- 可以设置负值
- text-decoration 文本修饰
- 可选值：
- none 默认值 没有修饰
- underline 下划线
- overline 上划线
- line-through 删除线
- 可选值：
提示
p{
background-color: #bbffaa;
width: 200px;
/*禁止文字的自动换行*/
white-space: nowrap;
/*禁止文字的溢出*/
overflow: hidden;
/*溢出文字设置为省略号*/
text-overflow: ellipsis;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur nam possimus! Ad animi culpa, dolor dolorem dolores eum illo neque, nisi quibusdam quo sed velit voluptate! Doloribus, quibusdam, quidem?</p>
效果如下：
行高
- line-height 用来设置元素的行高
- 行就是用来放文字的，行高就是文字所在行的高度
- 文字默认是在行高中垂直居中
- 行间距 = 行高 - 字体大小
- 行高可以设置一个数字，那么行高将会是字体大小对应的倍数
基线
- 在网页中，每个文字被显示时都会有一个文本框与之对应
- 当我们设置元素的font-size时，实际上就是在设置文本框的大小
- 在文本框存在一个位置叫做基线（baseline）
- 文字的垂直对齐：默认每个文字和父元素在垂直方向都是沿着基线对齐的
- vertical-align
- 设置元素垂直对齐的方式
- 可选值：
- baseline 默认值 子元素和父元素的基线对齐
- top 子元素文本框的顶部和父元素文本框的顶部对齐
- bottom 子元素文本框的底部和父元素文本框的底部对齐
- middle 将元素的中线和父元素基线高度+x高度一般的位置对齐
- 开发中经常通过vertical-align来消除图片下边的空白
字体
font-size 字体的大小
font-weight 字重
- 可选值：
- normal 默认值 正常的粗细
- bold 加粗
- lighter 细的
- 可选值：
font-style 字体的样式
- 可选值：
- normal 默认值 正常的
- italic 斜体
- 可选值：
font-family 字体族，指定使用什么字体
- 字体的分类：
- serif 衬线字体
- sans-serif 非衬线字体
- monospace 等宽字体
- ...
- 当我们将字体设置为上述类型时，浏览器会自动选择相应的字体来显示
- 字体的分类：
font
简写属性
可以同时设置字体相关的所有样式
语法：
font: 任意 font-size/line-height font-family
font: bold italic 40px/1.5 Arial,"Microsoft YaHei,sans-serif";
图标字体
- 图标字体（iconfont）
- 所谓的图标字体，指将小图标制作为字体文件
- 可以使用一些第三方库
- 使用步骤
- 下载
- 复制css和webfonts目录到项目下
- 在页面中引入all.css
- 在页面中添加标签