CSS 基础概述

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页外观和布局的样式语言。通过将样式与内容分离，CSS 提供了更灵活和高效的方式来管理网页设计。

CSS 的主要功能

  1. 样式化内容：为 HTML 元素设置颜色、字体、背景、边距等样式。

  2. 布局控制：定义元素的显示位置和方式，如使用 Flexbox 或 Grid 布局。

  3. 响应式设计：适配不同设备和屏幕尺寸。

  4. 动画和过渡：添加动态效果，增强用户体验。

CSS 的引入方式

  1. 内联样式：通过 style 属性直接在 HTML 元素中定义样式。

  2. 内部样式表：在 HTML 文档的 <style> 标签中定义样式。

  3. 外部样式表：通过链接外部 .css 文件，实现样式的模块化管理。

示例：三种引入方式 

<!DOCTYPE html>
<html>
<head>
    <title>CSS 引入方式</title>
    <style>
        /* 内部样式表 */
        h1 {
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="styles.css"> <!-- 外部样式表 -->
</head>
<body>
    <h1 style="font-size: 24px;">CSS 引入方式示例</h1> <!-- 内联样式 -->
</body>
</html>

CSS 的基本语法

CSS 规则由选择器和声明块组成： 

选择器 {
    属性: 值;
}

示例： 

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

常用选择器

  1. 元素选择器：如 h1，匹配所有 <h1> 元素。

  2. 类选择器：如 .class，匹配指定类名的元素。

  3. ID 选择器：如 #id，匹配指定 ID 的元素。

  4. 组合选择器：如 div p，匹配 <div> 中的所有 <p> 元素。

示例：选择器用法 

<!DOCTYPE html>
<html>
<head>
    <title>CSS 选择器示例</title>
    <style>
        p {
            color: green;
        }
        .highlight {
            font-weight: bold;
        }
        #unique {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
    <p class="highlight">这是一个加粗的段落。</p>
    <p id="unique">这是一个带下划线的段落。</p>
</body>
</html>

CSS 布局示例

Flexbox 布局 

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox 示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #e0f7fa;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #00796b;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

通过学习 CSS 的基础知识和应用技巧，你可以设计出外观精美、布局合理的网页，为用户提供更好的视觉体验。