一 、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 选择器具有更高的优先级。