html+css第三天

多类名选择器

一个标签内可以拥有多个类名
样式显示效果与html元素的类名先后无关，与css样式书写上下顺序有关

类选择器： 可以多次使用
id选择器： 只允许出现一次

---

font-size：字号

相对长度单位	说明
em	相当于当前对象内文本的字体尺寸
px	像素
绝对长度单位	说明
in	英寸
cm	厘米
mm	毫米
pt	点

---

font-family：字体

font-weight：字体加粗

类型	说明	number
normal	正常	400
bold	加粗	700
bolder	特加粗
lighter	细体

font-style：字体风格

参数	说明
normal	正常字体
italic	倾斜字体

font：综合字体样式

选择器：font: font-style font-weight font-size/line-height font-family;

字体外观颜色

color：文本颜色

1. 预定义颜色值
2. 十六进制
3. RGB代码

line-height：行间距

text-align：水平对齐方式

参数	说明
left	文字往左对齐
center	文字居中
right	文字往右对齐

text-indent：首行缩进

em 字体的大小，与px不同

text-decoration：

参数	说明
none	无装饰
blink	闪烁
underline	下划线
line-through	贯穿线（同删除线）
overline	上划线

复合选择器

后代选择器

外层标签 内层标签 ｛
	// 样式
｝

子代选择器

外层标签 > 内层标签 {
	// 样式
}

交集选择器

外层标签类选择器（div.class） ｛
	// 样式
｝

并集选择器

标签，标签，标签，……｛
	// 样式
｝

伪类选择器

链接伪类选择器

参数	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标移动到链接上
:active	选定的链接

必须按照顺序

显示模式

块级元素（block）

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点：

1. 总是从新行开始
2. 高度，行高、外边距以及内边距都可控
3. 宽度默认100%
4. 可以容纳内联元素和其他块元素

行级元素（inline）

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

特点：

1. 和相邻的行内元素在同一行
2. 高、宽无效，水平方向上的padding与margin可控，垂直方向无效
3. 默认宽度及本身内容的宽度
4. 行内元素只能容纳文本或其他行内元素

行内块元素（inline-block）

、、
特点

1. 和相邻行内元素（行内块）在同一行上，但是之间会有空白缝隙
2. 默认宽度为本身内容的宽度
3. 高度，行高、外边距以及内边距都可控

显示模式转换（display）

参数	说明
inline	转换为行内元素
block	转换为块级元素
inline-block	转换为行内块元素