CSS 属性

和字体（font）相关的属性

font-size : 设置字体的大小，值支持像素、 em (相对自身px单位) 、 rem (相对根元素) 、 pt (打印) 、支持百分比
- 10px
- 80%
font-weight : 设置字体的粗细、支持数字和单词
- 100 ,200, 300, 400, 500, 600, 700, 800, 900 (其中 400是正常字体大小，小于 400 字体变细、大于 400 字体加粗)
- normal (正常) 、 bold (加粗) 、 bolder (较粗) 、 lighter (变细)
font-style : 设置字体的风格
- normal (正常字体) , italic （斜体、如果字体没有斜体、可以自动使用倾斜体）、 oblique (倾斜体)

font-family : 设置字体，浏览器默认采用微软雅黑

css 复制代码

pre {
	font-family: mzd;
}
			
@font-face {
	font-family: mzd;
	src: url(./ttf/mzd.ttf);
}

和文本(text) 相关的属性

text-align : 对块级元素中的文本内容设置水平对齐方式
left （左对齐，默认值）
right (右对齐)
center (居中)
text-indent : 对块级元素的第一行内容实现缩进 (正值) 或者悬挂 (负值) 效果、支持 px 和 em 等单位。
text-transform ：对文本内容进行大小写转换
- capitalize （每个单词的首字母转大写）
- lowercase ：全部转小写
- uppercase : 全部转大写
text-decoration ：对文本内容进行装饰，是 text-decoration-line, text-decoration-color , text-decoration-style 的简写
- underline ：添加下划线
- overline : 添加上划线
- line-through : 添加中划线
- none : 取消线。
text-decoration-line : 设置文件装饰的线条，值由 underline， overline， line-through， none
text-decoration-color : 设置文件装饰的线条颜色，默认颜色是 #000
text-decoration-style : 设置线条的类型，默认类型是 solid
- solid : 直线
- dotted : 点状线
- dashed : 虚线
- double : 双直线

text-overflow : 设置文本溢出的解决方案

clip : 剪切 (默认值)
ellipsis 显示省略号

css 复制代码

 /* 当内容超过了一行 、显示 省略号   */
white-space: nowrap; /* nowrap 强制内容不换行*/
text-overflow: ellipsis; /*默认值 clip , ellipsis 显示省略号 */
overflow: hidden;  /*当内容超出了盒子的大小 、 hidden 隐藏 */

/* 当内容超过了指定的行数、显示省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;

text-shadow : 设置文本的投影效果
- x y r color ， [...x y r color]
  - x : 投影在 x 轴的位置
  - y : 投影在 x 轴的位置
  - r ：投影的模糊的半径
  - color : 投影的颜色
line-height : 用来设置每一行文本内容占用的高度

如果一个盒子有且只有一行内容, 且希望内容垂直居中，则可以设置 line-height , 通常行高等于盒子的高度
color : 用来设置文本的颜色，颜色的表示方式主要有 3种，
- 英文单词表示颜色。支持的颜色单词比较少， red, green , blue , yellow , black , white ， lightblue ...
- 使用 rgb 模式， rgb(a, b, c) a , b , c 的取值范围均为 0 ~ 255， rgb(0, 0, 0) （黑色）, rgb(255, 255, 255) 白色， rgb(255, 0, 0) 红色， rgb(0, 255, 0) 绿色 rgb(0, 0, 255) 蓝色， rgb(255, 255, 0) 黄色， rgb(255, 0 , 255) 紫色
- 使用 16进制表示、使用 # 作为前缀，后跟面 6位 16进制数、后者 3位 16进制数
- rgba 模式 rgba(a, b, c , d) : d 是代表透明度，是一个小数，取值范围是 0 ~ 1 ， 0 代表完全透明、 1 代表不透明
overflow-x , overflow-y , overflow: 盒子内容溢出行为
- visible : 默认值，代表溢出的时候显示对应的内容
- hidden : 隐藏溢出的内容
- scroll : 无论是否溢出，均显示滚动条
- auto : 当溢出后自动产生滚动条。
white-space : 空白符保留策略
- nowrap : 不换行
- pre-wrap : 预设换行，效果和 pre 标签相同。
letter-spacing ：设置文本内容的字符间隙
word-spacing ：设置文本内容中的单词间隙
word-wrap : 设置文本内容是否强制进行单词换行
- normal : 正常行为
- break-word : 强制实现单词换行
list-style ：列表样式
- none : 去掉列表样式。
- disc : 实心圆
- circle : 空心圆
- url(...) : 自定义图片

CSS 属性

CSS 属性

和 字体（font） 相关的属性

和文本(text) 相关的属性

和字体（font）相关的属性