本文介绍了HTML5中的行内元素与块级元素，如div、h1~h6等，并详细讲解了如何通过CSS的display属性将行内元素转换为块级元素。此外，文章还讨论了CSS样式的不同类别及其优先级规则。
一 、HTML5中的行内元素包括：
- a：链接
- em：强调文本
- strong：加粗文本
- span：无意义的文本容器
- img：图像
- input：表单输入元素
- button：按钮
- select：下拉选择框
- label：标签元素
- textarea：多行文本输入框
- small：小文本
- sub：下标文本
- sup：上标文本
- b：加粗文本
- i：斜体文本
- u：下划线文本
- strike：删除线文本
二、 HTML5 块元素是指在 HTML5 文档中常用的占据一整行的元素，与行内元素相对应。常见的 HTML5 块元素包括：
-
div：用于分组HTML元素，可用于布局和样式控制。
-
h1 ~ h6：用于定义不同级别的标题。
-
p：用于定义段落。
-
ul 和 ol：分别用于定义无序和有序列表。
-
li：用于定义列表项。
-
table：用于定义表格。
-
form：用于定义表单。
-
header：用于定义文档头部。
-
footer：用于定义文档底部。
-
section：用于定义文档中的节。
-
article：用于定义独立的文章。
-
aside：用于定义侧栏内容。
-
nav：用于定义导航链接。
-
figure 和 figcaption：分别用于定义图片和图片的标题。
三、 块元素通常具有以下特点：
-
默认情况下，块元素会占据一整行。
-
可以设置宽度、高度、内外边距等样式属性。
-
可以包含行内元素和其他块元素。
-
块元素可以嵌套，但是在严格的 HTML 解析过程中，必须符合层级关系。
四、CSS可以使用display属性来改变元素的显示方式，从而将两个行内元素变为块级元素。具体实现方法如下：
<span>行内元素1</span>
<span>行内元素2</span>
span {
display: block;
}
这样设置后，两个行内元素就变成了两个块级元素，它们会分别占据一整行，而不是一起在一行内显示。同时，块级元素具有更多的样式设置选项，如宽度、高度、内边距、外边距等，使得我们能够更加灵活地定制元素样式。
五、 CSS样式可以分为以下几类：
-
标签样式：针对HTML标签进行样式定义，常见的如p、h1、h2、a等。
-
类样式：通过class属性定义，可以对多个不同标签进行同样的样式定义。
-
ID样式：通过id属性定义，对应HTML页面中唯一的元素。
-
内联样式：在HTML标签中使用style属性，直接定义该标签的样式。
-
继承样式：子元素可以继承父元素的样式特性。
-
伪类样式：用于为元素添加一些特殊的效果，如:hover、:active、:focus等伪类。
-
导入样式：可以使用@import语法引入外部样式表。
-
媒体查询样式：根据不同的屏幕尺寸、设备类型等条件来定义不同的样式规则。
六、样式的优先级
在 CSS 中，样式的优先级是指当多个样式应用于同一个元素时，哪个样式将被应用。优先级由高到低的顺序如下：
-
!important声明的样式具有最高优先级，即使该声明位于规则集的末尾，也会覆盖其他样式。 -
内联样式具有比在
<head>标签中的样式表中的选择器具有更高的优先级。 -
选择器中指定的 ID 具有高于选择器中指定的类、属性和元素的优先级。
-
选择器中指定的类、属性和元素具有相同的优先级，且比继承自父元素的样式具有更高的优先级。
-
同一选择器中的后面规则会覆盖前面的规则。
例如，如果一个元素同时应用了以下三个样式：
#element {
color: red;
}
.element {
color: green;
}
则最终其颜色为红色，因为 ID 选择器具有更高的优先级。
扫一扫
1262
到【灌水乐园】发言
