HTML5 CSS 与样式详解

HTML5 CSS 与样式详解

CSS（层叠样式表）是用于描述HTML文档外观和格式的语言。它允许开发者控制网页的布局、颜色、字体和其他视觉效果。以下是关于HTML5中CSS与样式的详细介绍。

1. CSS的基本语法

CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，声明块包含属性及其对应的值。

示例

h1 {
    color: blue; /* 字体颜色 */
    font-size: 2em; /* 字体大小 */
}

2. 引入CSS的方法

有三种主要的方法可以在HTML文档中引入CSS：

2.1 内联样式

直接在HTML元素中使用style属性。

<h1 style="color: red;">这是一个标题</h1>

2.2 内部样式表

在<head>部分使用<style>标签定义样式。

<head>
    <style>
        body {
            background-color: lightgray;
        }
    </style>
</head>

2.3 外部样式表

通过<link>标签引入外部CSS文件，这是推荐的做法。

<head>
    <link rel="stylesheet" href="styles.css">
</head>

3. CSS选择器

CSS提供了多种选择器，用于选择不同的HTML元素：

• 元素选择器：选择特定类型的元素。

  p {
      color: green;
  }

• 类选择器 ：选择具有特定类的元素，以.开头。

  .highlight {
      background-color: yellow;
  }

• ID选择器 ：选择具有特定ID的元素，以#开头。

  #main-title {
      font-weight: bold;
  }

• 组合选择器：结合多个选择器。

  h1, h2 {
      color: purple;
  }

4. CSS盒模型

CSS盒模型是网页布局的基础，定义了元素的宽度、高度、内边距（padding）、边框（border）和外边距（margin）。

示例

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}

5. 响应式设计

使用媒体查询（media queries）可以使网页在不同设备上自适应显示。

示例

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

总结

CSS是HTML5文档中不可或缺的一部分，通过使用CSS，开发者可以创建美观、响应式和用户友好的网页。掌握CSS的基本语法、选择器和布局模型对于前端开发至关重要。