设计字体样式
font_size: 12px; //设置字体大小
可以使用相对长度单位,也可以使用绝对长度单位。
通常使用em(相对当前对象内文本字体尺寸)px(像素)
font-family: xxxx; //定义字体类型
可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体, 如果都没有,则以我们电脑默认的字体为准。
font-weight: 600; //定义字体粗细
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold 我们重点记住这句话 |
font-style :normal|italic;
定义字体倾斜效果,normal为默认值,表示正常的字体,
italic表示斜体;oblique表示倾斜的字体
font:综合设置字体样式
选择器 { font: font-style font-weight font-size/line-height font-family;}
CSS文本属性
color: red; //定义文本颜色
表示表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,还有我们的御用色 pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
text-align: left; //文本水平对齐方式
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
line-height: 24px; //行高
- 如果 行高=高度 文字会 垂直居中
- 如果行高>高度 文字会 偏下
- 如果行高<高度 文字会 偏上
text-indent:2em; //定义文本首行缩进
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
text-decoration:none; //文本的装饰
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
text-overflow:clip //控制文本溢出
- clip:当内联内容溢出块容器时,将溢出部分裁切掉,为默认值。
- ellipsis:当内联内容溢出块容器时,将溢出部分替换为(…)。