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 : 设置 字体 , 浏览器 默认采用 微软雅黑
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 显示省略号
/* 当内容超过了一行 、显示 省略号 */ 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 : 投影的颜色
- x y r color , […x y 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(…) : 自定义图片