首页 前端知识 html5 标签的分类及样式的分类和优先级

html5 标签的分类及样式的分类和优先级

2024-06-22 01:06:04 前端知识 前端哥 634 566 我要收藏
一 、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样式可以分为以下几类:
  1. 标签样式:针对HTML标签进行样式定义,常见的如p、h1、h2、a等。

  2. 类样式:通过class属性定义,可以对多个不同标签进行同样的样式定义。

  3. ID样式:通过id属性定义,对应HTML页面中唯一的元素。

  4. 内联样式:在HTML标签中使用style属性,直接定义该标签的样式。

  5. 继承样式:子元素可以继承父元素的样式特性。

  6. 伪类样式:用于为元素添加一些特殊的效果,如:hover、:active、:focus等伪类。

  7. 导入样式:可以使用@import语法引入外部样式表。

  8. 媒体查询样式:根据不同的屏幕尺寸、设备类型等条件来定义不同的样式规则。

六、样式的优先级

在 CSS 中,样式的优先级是指当多个样式应用于同一个元素时,哪个样式将被应用。优先级由高到低的顺序如下:

  1. !important声明的样式具有最高优先级,即使该声明位于规则集的末尾,也会覆盖其他样式。

  2. 内联样式具有比在 &lt;head> 标签中的样式表中的选择器具有更高的优先级。

  3. 选择器中指定的 ID 具有高于选择器中指定的类、属性和元素的优先级。

  4. 选择器中指定的类、属性和元素具有相同的优先级,且比继承自父元素的样式具有更高的优先级。

  5. 同一选择器中的后面规则会覆盖前面的规则。

例如,如果一个元素同时应用了以下三个样式:

#element {
  color: red;
}
.element {
  color: green;
}

则最终其颜色为红色,因为 ID 选择器具有更高的优先级。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13278.html
标签
评论
发布的文章

Java操作读取JSON文件

2024-07-21 00:07:04

Vue3.0环境搭建之npm的安装

2024-07-21 00:07:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!