HTML5 CSS 与样式详解

请叫我飞哥@2024-12-25 5:00

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

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

css 复制代码

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

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

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

html 复制代码

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

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

html 复制代码

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

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

html 复制代码

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

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

元素选择器：选择特定类型的元素。
css 复制代码
```
p {
    color: green;
}
```
类选择器 ：选择具有特定类的元素，以.开头。
css 复制代码
```
.highlight {
    background-color: yellow;
}
```
ID选择器 ：选择具有特定ID的元素，以#开头。
css 复制代码
```
#main-title {
    font-weight: bold;
}
```
组合选择器：结合多个选择器。
css 复制代码
```
h1, h2 {
    color: purple;
}
```

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

css 复制代码

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

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

css 复制代码

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

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