# 字体和文本样式
1.单位
(1)px 像素
(2)pt 磅
(3)% 代表参考父级相关属性的长度
(4)em 参考父级长度的倍数
(5)rem 参考根标签html的长度倍数
(6)vw、vh参考屏幕(视窗)宽度高度的比例(移动端的响应式尺寸)
(7)deg 角度
(8)时间 s 秒 ms 毫秒
2.字体和文本
字体大小(字体尺寸)font-size:尺寸;
大部分浏览器默认16ox(谷歌);
谷歌浏览器默认最小识别像素12px;
设置小于12px.以12px展示
使用移动端模拟显示，最低显示12px;(浏览器模拟测试和真机测试有区别)
字体大小有继承性
3.字体系列
指html中所有文字使用何种字体样式
字体系列按照产品要求书写,顺序从前往后,遇到有的字体则使用
一般情况下中文字体,多个英文字体需要加双引号
字体系列名字中英文都有的,一般英文写前面中文写后面
可以使用自定义字体(现在的字体注意版权)
字体系列具有继承性
font-family:字体系列列表:逗号连接多个
4.字体自重(粗细)
字体粗细,主要是在不同的浏览器以及设备中显示效果不同
font-weight:值;
取值 英文关键词：normal默认正常(400) bold 粗体 lighter 细体
数值 (整数 100的倍数)
100~300 表现为细体
400~500 表现为默认
600~900 表现为粗体
5.字体样式
(是否斜体)font-style:normal正常 italic 斜体
字体简写方式 font:字体样式(斜体) 字重 字号 字体系列;
不能调整顺序 最简形式 font: italic 500 20px "宋体"
6.文本
字体颜色 color:色值；
色值：英文色值
transparent 透明色
7.十六进制色值:#rrggbb 六位
rr 前两位代表红色范围
gg 中间两位代表绿色范围
bb 最后两位代表蓝色范围
取值范围 0~9 a~f
rr gg bb 的值相同可以使用三个值，如#ff0055 ->#f05
8.rgb()色值
rgb(x,x,x)
参数1:红色范围0~255
参数2:绿色范围0~255
参数3:蓝色范围0~255
rgba(红，绿，蓝，透明度)
当使用rgba()时a代表透明度
a的取值0-1之间的数字，0完全透明，1完全不透明
9.文本的水平对齐方式
块级元素内的文字
text-align: left;默认居左
text-align: right;居中
text-align: center;居右
块级元素内的内联元素 因为内联元素和文字在页面上是一个级别的
如需要把内联中的文字放在块级元素里居中属性应设置在上层元素中
有继承性
10.文本的行高(行距)
line-height:行距长度;
取值:长度单位,如：px pt rem em 等
没有单位的数字，代表倍数，如：1.5就是1.5倍(字体号的倍数)
内联元素会被外层的行间距挤到中间
块级元素会继承父级的行间距，撑到相同的行距高度
11.文本修饰线：可以使元素中的文字在某个位置加入一条线
(最多用法)
text-decoration: none;去除a元素默认下划线
text-decoration: underline;下划线
text-decoration: overline;上划线
text-decoration: line-through;删除线
12.文字的首行缩进
text-indent:值 指的是容器中的第一行文字进行缩进
text-indent:2em;代表缩进文字的两倍大小
13.文本换行
文字的背景:中文 遇到宽度不够时会自动换行显示
非亚洲文字,遇到单词不够展示宽度时换行
连续的非亚洲文字不换行
文本换行 white-space:normal;自动换行
文本不换行 white-space:nowrap;不换行
强制换行 word-wrap:break-word;强制换行
14.文本溢出
前提：文字外层元素一定限制了宽度
文字外层元素被超出部分不可以显示
文字超出外层元素的部分需要省略(或者加省略标记)
组合样式:
width: 200px; 限宽
overflow: hidden; 溢出隐藏(后面还学)
text-overflow: ellipsis; 超出部分的省略 ...
15.文字阴影
在文字后增加阴影效果 在元素或页面中原点为元素左上角，因此坐标轴
text-shadow:x轴位移 y轴位移 羽化值 阴影颜色
x轴和y轴位移的位置必写
羽化值代表虚化程度,值越大越虚(可选)
颜色，不写就是字体颜色
多阴影,多组数据,用逗号连接
16.垂直对齐方式
条件：针对于内联元素,和自己标签内的文字无关
针对自己内联元素前后紧挨着的内联元素与自己对齐方式
取值：
vertical-align:middle 默认
vertical-align:top 顶部对齐
vertical-align:bottom 底部对齐
vertical-align:baseline 基线对齐,是图片元素默认的
# 元素的修饰
1.圆角
元素的四个角
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
使用简写的方式
border-radius: 10px; 四角相同
border-radius: 5px 30px; 左上和右下一样、左下和右上一样
border-radius: 5px 20px 30px; 值1左上角 值2 右上角和左下角 值3右下角
border-radius: 10px 10px 10px 10px; 左上角开始顺时针依次
普通有弧度圆角矩形 四个角的弧度一致,使用像素
胶囊型圆角矩形 四个角的弧度是高度的一半 (常用)
圆角可以单独指定某角的x边和y边 x/y x1 x2 x3 x4 /y1 y2 y3 y4
圆形 width: 100px;
height: 100px;
background-color: rgb(95, 4, 4);
border-radius: 50%;
椭圆 width: 200px;
height: 100px;
background-color: rgb(116, 116, 116);
border-radius: 50%;
2.盒子的阴影
盒子阴影的作用在元素周围创建阴影效果
box-shadow:x轴偏移 y轴偏移 羽化 扩展+/缩小-颜色 内阴影(in)
不可省：x轴和轴偏移
注意顺序，改变无效 因此不占位置 可以写多阴影，用逗号相连
3.光标设置
光标不属于浏览器渲染，根据系统展示样式
常用样式:
.a{cursor: default;}箭头
.b{cursor: pointer;}手型(用得最多)
.c{cursor: wait;}等待
.d{cursor: text;}文本
4.轮廓线
轮廓线在边框的外边,input的部分标签含有获取焦点的默认伪类,激活轮廓线
去掉轮廓线处理
outline: none; 无轮廓线
outline: 0; 轮廓线的宽度
5.列表样式
列表项前面的符号ul、ul、li
可以通过清除列表的标识符去掉
清除列表的标识符 list-style: none;
自定义标识符 list-style-type:'❤';
修改标识符定位
list-style-position: outside; 默认的外部
list-style-position: inside; li内部
