css样式以及常用的标签

如履灬薄冰丿

于 2024-06-13 23:29:27 发布

阅读量787

点赞数 22

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_64417283/article/details/139666591

版权

HTML 标签：`<div>` 和 `<span>`

在 HTML 中，<div> 和 <span> 是两个非常常用的标签，它们的主要区别在于它们的显示方式和用例。

1. `<div>` 标签

<div> 标签是一个块级元素（block-level element），常用于分割和布局网页内容的大块区域。

特点

块级元素: <div> 是块级元素，这意味着它会占据一整行的宽度，并且其后面的元素会被自动放置在新的一行上。
布局和容器: 常用来创建网页布局、分隔页面的不同部分或作为容器将多个元素包裹在一起。
可嵌套: 可以在 <div> 内嵌套其他块级或内联元素。
无语义: <div> 本身没有特定的语义，仅作为一个通用容器。

用法示例

<div>
    <h1>网站标题</h1>
    <p>这是一个段落。</p>
</div>

在这个例子中，<div> 标签用于包裹一个标题和一个段落，将它们作为一个整体来处理。

常见用途

网页布局: 用于创建网页的主要结构和布局部分，例如页眉、页脚、侧栏等。
样式和脚本: 配合 CSS 和 JavaScript 对特定部分应用样式或添加交互行为。

示例：创建一个简单的网页布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单网页布局</title>
    <style>
        .header, .footer {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .sidebar {
            background-color: #f4f4f4;
            padding: 15px;
            width: 200px;
            float: left;
        }
        .content {
            margin-left: 220px; /* 为了避开侧栏 */
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的网站</h1>
    </div>
    <div class="sidebar">
        <h2>侧栏</h2>
        <p>这里是侧栏内容。</p>
    </div>
    <div class="content">
        <h2>主要内容</h2>
        <p>这里是主要内容区域。</p>
    </div>
    <div class="footer">
        <p>页脚</p>
    </div>
</body>
</html>

在这个示例中，<span> 标签被用来高亮显示部分文本，使得 "编程" 这个词具有黄色背景和加粗的样式。

总结

<div> 标签:
- 块级元素。
- 用于分割和布局大的内容区域。
- 占据整行，后续元素会换行。
- 常用作网页结构和布局的容器。
<span> 标签:
- 内联元素。
- 用于局部样式和操作内联文本或其他内联元素。
- 不会换行，多个 span 可以在同一行显示。
- 适合小范围的样式应用和文本操作。

两者在网页开发中都有重要的作用，<div> 主要用于布局和结构化页面，而 <span> 主要用于细粒度的文本样式和操作。根据需要选择合适的标签可以帮助更好地组织和管理页面内容。

在 CSS 中，定义和应用样式主要有三种方式：

内联样式（Inline CSS）：直接在 HTML 元素的 style 属性中定义样式。
内部样式表（Internal CSS）：在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。
外部样式表（External CSS）：在一个独立的 CSS 文件中定义样式，然后通过 <link> 标签将该文件链接到 HTML 文档中。

每种方式都有其适用的场景和优缺点，下面我们来详细介绍和对比这些方式。

1. 内联样式（Inline CSS）

内联样式是将 CSS 样式直接写在 HTML 元素的 style 属性中。这种方式适用于对单个元素进行简单的样式调整，不需要维护一个复杂的样式表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式示例</title>
</head>
<body>
    <p style="color: red; font-size: 20px;">这是一个有红色字体和 20px 字号的段落。</p>
</body>
</html>

在这个例子中，样式直接应用于 <p> 元素。

优点

方便快速: 适用于对单个元素进行快速样式修改。
局部控制: 可以在不影响其他元素的情况下改变特定元素的样式。

缺点

可维护性差: 样式嵌入在 HTML 中，代码不易维护和管理。
重复繁琐: 如果有多个相似的元素需要相同的样式，需要重复书写样式代码。
不推荐用于复杂样式: 对于大型项目或复杂的样式，内联样式不利于统一管理和更新。

2. 内部样式表（Internal CSS）

内部样式表是将 CSS 样式放在 HTML 文档的 <head> 部分的 <style> 标签中。适用于单个页面中使用的样式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>这是一个有蓝色字体和 18px 字号的段落。</p>
</body>
</html>

在这个例子中，所有的 <p> 元素都将应用蓝色字体和 18px 字号的样式。

优点

集中管理: 样式集中在文档的 <head> 中，易于查看和管理。
作用域限制: 样式只在该页面内生效，不会影响其他页面。

缺点

不适合多个页面共享样式: 如果多个页面需要相同的样式，需要在每个页面中重复定义。
较少的代码复用: 在不同的页面中不能复用同一个样式定义。

3. 外部样式表（External CSS）

外部样式表是将 CSS 样式定义在一个独立的 .css 文件中，然后通过 <link> 标签将该文件链接到 HTML 文档中。适用于需要跨多个页面共享样式的大型项目。

示例

HTML 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个有外部样式的段落。</p>
</body>
</html>

CSS 文件（styles.css）：

p {
    color: green;
    font-size: 16px;
}

在这个例子中，所有的 <p> 元素都将应用绿色字体和 16px 字号的样式。

优点

高可维护性: 样式集中在一个或多个 CSS 文件中，易于维护和管理。
代码复用: 同一个样式表可以被多个页面引用，便于复用。
清洁的 HTML: HTML 和 CSS 分离，保持代码的清晰和整洁。

缺点

依赖外部文件: 页面加载时需要额外的 HTTP 请求来获取样式文件，可能影响加载速度。
适用场景要求较高: 对于非常小的项目或单页面应用，可能显得复杂和过度设计。

比较和选择

特性	内联样式	内部样式表	外部样式表
应用场景	单个元素的临时样式修改	单个页面的样式	多个页面共享的样式
维护性	低	中	高
代码复用	无	低	高
HTML 清洁度	低（样式混杂在 HTML 中）	中	高（样式与结构分离）
加载性能	快	中	可能稍慢（依赖外部文件）