文本样式

Posted 2020-11-27 strongerpian

文本大小font-size
px 像素单位
9pt=12px
em 与父级的文本大小呈倍数关系
rem 与html(根元素)呈倍数关系
默认大小为16px
最小显示为12px

文本颜色color
#ff0000 十六进制a-f,0-9 aabbcc可以缩写成abc
rgb(0,0,0) 范围0-255
rgba(0,0,0,0-1) 颜色透明度 ——> opacity:0-1; 透明度
文本字体
font-family:"仿宋","楷体"; 多个字体用逗号隔开，汉字需加引号
font-family:; 只有一个英文单词不需要加引号；有空格时需加引号
文本加粗
font-weight:bold/bolder/normal; 加粗、更粗、常规
600-900加粗 500常规 100-400变细
文本倾斜
font-style:italic/oblique/normal; 斜体字、倾斜的文字、常规
行高
line-height:normal; 文本垂直对齐方式:正常
水平对齐方式
text-align:left/center/right/justify; 左、居中、右、两端对齐（当剩余空间不足时）。
文本修饰
text-decoration:none/underline/overline/line-through; 无修饰、下划线、上划线、删除线
首行缩进
text-indent:40px/2em; 首行缩进40px/2字符，可为负值
字符间距
letter-spacing:10px/1em; 字间距（汉字、英文字母）
word-spacing:10px/1em; 词间距（英文单词） 可为负值

列表修饰符
list-style-type:;
list-style:disc/circle/square/none;
list-style-img:url(./.png);
list-style-position:outside/inside; 图片在列表的位置：外部、内部

边框
border:边框宽度 边框样式 边框颜色;
边框样式：solid/dashed/dotted/double 实线、虚线、点状线、双线
border-width:;
border-style:;
border-color:transparent; 透明
小三角
border:30px solid transparent;
border-left-color:red;