学习HTML5和CSS（四）之样式表与标签显示

**

引入CSS样式表

**
**

1.内部样式表

**
内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

**

2.行内式（内联样式）

**
内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

**

3.外部样式表（外链式）

**
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

其中link标签需要放在head头部标签中，且必须指定link标签的三个属性：
1.href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
2.type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
3.rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
**

4.三种样式表的比较

**

**

标签显示模式（display）

**
标签的类型(显示模式)

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

**

1.块级元素(block-level)

**

常见的块元素有
~
、
、
、
、
、
等，其中
标签是最典型的块元素。

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

块级元素特点：
（1）总是从新行开始；
（2）高度，行高、外边距以及内边距都可以控制；
（3）宽度默认是容器的100%；
（4）可以容纳内联元素和其他块元素；

**

2.行内元素(inline-level)

**

常见的行内元素有、、、、、、、、、等，其中标签最典型的行内元素。

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

**

3.块级元素和行内元素区别

块级元素的特点:
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素

行内元素的特点:
1.和其他元素在一行中；
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素

**

4.行内块元素（inline-block）

**
在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

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