学习内容:字体的设置,CSS文本属性
学习笔记:
属性 | 描述 |
---|---|
font | 简写属性。在一条声明中设置所有字体属性。 |
font-family | 规定文本的字体系列(字体族)。 |
font-size | 规定文本的字体大小。 |
font-style | 规定文本的字体样式。 |
font-weight | 规定字体的粗细。 |
font-family设置字体系列:
基本语法:
font-family:字体1,字体2,字体3,......;
语法说明:应用font-family属性可以一次定义多个字体,各种字体之间必须用英文状态下的逗号隔开,而在浏览器读取字体时,会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第种字体,则自动读取第二种字体,第二种找不到就读取第三种字体,依次类推。如果定义的所有字体都找不到,则选用计算机系统的默认字体。
在定义英文字体时,若字体名是由多个单词组成,且单词之间由空格,则要将单词用引号引起来。
例子:
效果:
font-size字号大小设置:
语法:
font-size: 15px;
px(像素)大小是我们网页最常用的单位。字体大小设置可以用绝对尺寸,关键字,相对尺寸和百分比。
在网页设计中,能够管理文本大小很重要。但是,不应使用调整字体大小来使段落看起来像标题,或是使标题看起来像段落。
请始终使用正确的 HTML 标签,例如 <h1> - <h6> 用于标题,而 <p> 仅用于段落。
font-size 值可以是绝对或相对大小。
绝对尺寸:
- 将文本设置为指定大小
- 不允许用户在所有浏览器中更改文本大小(可访问性不佳)
- 当输出的物理尺寸已知时,绝对尺寸很有用
相对尺寸:
- 设置相对于周围元素的大小
- 允许用户在浏览器中更改文本大小
注释:如果您没有指定字体大小,则普通文本(如段落)的默认大小为 16px(16px = 1em)。
效果:
font-weight:
基本语法:
font-weight:normal|bold|bolder|lighter|number
实际开发中常用数字来设置粗细。
font属性取值说明:
属性的取值 | 说明 |
normal | 正常粗细(默认显示,约为数字400) |
bold | 粗体(粗细约为数字700) |
bolder | 加粗体 |
lighter | 细体(比正常字体还细) |
number | 数字一般是整百,有九个级别(100~900), 数字越大字体越粗 |
实例:
效果:
字体样式font——style:
font-style 属性主要用于指定斜体文本。
此属性可设置三个值:
- normal - 文字正常显示
- italic - 文本以斜体显示
- oblique - 文本为“倾斜”(倾斜与斜体非常相似,但支持较少)
注意:平时我们很少给字体加斜体,一般是让斜体不倾斜
语法:
font-style: normal;
实例:
效果:
字体复合属性:
语法:
font:font-style font-weight font-size/line-height font-family
顺序不能调换,必须严格按照语法格式上面的顺序写
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性不起作用
实例:
效果:
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定:
- 颜色名 - 比如 "red"
- 十六进制值 - 比如 "#ff0000"
- RGB 值 - 比如 "rgb(255,0,0)"
开发中最常用的是十六进制
页面的默认文本颜色是在 body 选择器中定义的。
语法:
color: red;
实例:
对齐文本:
text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐,或居中对齐。
下例展示了居中对齐以及左右对齐的文本(如果文本方向是从左到右,则默认为左对齐;如果文本方向是从右到左,则默认是右对齐):
语法:
text-align: left | center | right;
left 左对齐;center 居中对齐;right 右对齐
实例:
效果:
文字装饰
text-decoration 属性用于设置或删除文本装饰。
text-decoration: none; 通常用于从链接上删除下划线:
其他 text-decoration 值用于装饰文本:
h1 { text-decoration: overline;上划线 } h2 { text-decoration: line-through;删除线 } h3 { text-decoration: underline;下划线 }
实例:
效果:
文本缩进:
语法:
text-indent: 20px;
文本第一行进行缩进。
text-indent: 2em;
em是一个相对单位,是当前元素一个文字的大小,如果当前元素没有设置大小,则会按照父元素一个文字的大小。
实例:
效果:
行间距:
line-height 属性用于指定行之间的间距;
行高:文本高度加上间距和下间距。
语法:
line-height:25px;
实例:
效果:
文本属性总结:
属性 | 表示 | 注意点 |
color | 文本颜色 | 通常使用十六进制 如:#fff |
text-align | 文本对齐 | 可以设置文本水平的对齐方式 |
text-indent | 文本缩进 | 通常用于缩进两个字的距离 text-indent:2em; |
text-decoration | 文本装饰 | 添加下划线 underline 取消下划线 none |
line-height | 行高 | 控制行与行之间的距离 |