CSS入门学习2

学习内容：字体的设置，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	行高	控制行与行之间的距离