一、行高

 行高(line height)行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小（ex pm）也可以设置一个整数如果是一个整数行高将会是字体的指定的倍数默认行高是1.33行高经常用来设置文字的行间距行间距等于行高减去字体大小字体框：设置字体框就是字体存在的格子，设置font-size实际上设置我们字体框的高度行高会在字体框的上下平均分配可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中font-size: 50px;line-height: 200px;

二、字体

 /* font-face可以将服务器中的字体直接提供给用户去使用 */@font-face {/* 指定字体的名字 */font-family: 'myfont';/* 服务器字体的路径 */src: url('./xx/xxxx.ttf');}p{和font-size相关的单位em 相当于当前元素的一个font-sizerem 相当于根元素的font-sizefont-family 字体族(字体的格式)可选值:serif  :衬线字体 sans-serif:非衬线字体monospace:等宽字体cursive:草书字体fantasy:虚幻字体指定字体的类别 浏览器会自动使用该类别下的字体font-family可以指定多个字体 使用逗号隔开，优先使用第一个 第一个无法使用则使用第二个 以此类推。/*font-family: 'Courier New', Courier, monospace;*/font可以设置字体相关所有属性 语法：字体大小/指定行高 字体族 行高可以省略不写 如果不写它会使用默认值简写属性省略用的是默认值font: 50px/2 'Courier New', Courier, monospace ;font-weight设置字体加粗效果 可选值:normal 默认值 不加粗bold 加粗100-900级别(没什么用)font-style :normal正常italic斜体

二、文本样式

          text-align 文本的水平对齐可选值：left左侧对齐right右侧对齐center居中对齐justify两端对齐vertical-align 垂直对齐可选值baseline 默认值 基线对齐top顶部对齐 bottom 底部对齐middle 居中对齐text-decoration设置文本修饰可选值：none什么都没有underline下划线line-through删除线overline上划线white-space  用来设置网页如何处理空白可选值：normal正常nowrap不换行pre保留空白 保留文本格式/* 设置省略号效果 */white-space:nowrap ;overflow: hidden;text-overflow: ellipsis;

CSS——行高、字体、文本的样式相关推荐

字体、图标字体、行高、文本样式（css）
字体.图标字体.行高.文本样式(css) 字体相关的样式 color 用来设置字体颜色 font-size (字体大小) 相关单位 em 相当于当前元素的一个font-size rem 相当于根元素的 ...
CSS行高、字体简写属性、文本样式学习笔记
目录一行高二字体的简写属性三文本的样式一行高行高:line-height,指的是文字占有的实际高度,可以通过line-height设置行高. 行高可以直接指定一个大小,单位可以是px ...
【CSS】字体、行高、文本对齐
一.字体字体相关的样式 color font-size font-size相关单位 em相对于当前元素的font-size rem相对于根元素的font-size font-face可以直接将服务器 ...
css行高（line-height）及文本垂直居中原理
css行高(line-height)及文本垂直居中原理一.行高的定义标准定义:两行文字基线之间的距离. 那么什么是基线? 基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有 ...
CSS学习笔记---字体文本
字体字体的样式 font-size(用来设置文字所占框的大小) 设置文字的大小,浏览器中一般默认的文字大小都是16px font-size设置的并不是文字本身的大小, 在页面中,每个文字都是处在一个 ...
CSS 行高与行对齐精解：line-height 和 vertical-align （图文）
7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语法 line-height属性的具体定义列表如下: 语 ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
css行高line-height的用法
一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...

CSS——行高、字体、文本的样式

一、行高

二、字体

二、文本样式

CSS——行高、字体、文本的样式相关推荐

最新文章

热门文章