前端三大件---CSS

[一、CSS 概述](#一、CSS 概述)

[二、引入 CSS 的三种方式](#二、引入 CSS 的三种方式)

[2.1 内联样式](#2.1 内联样式)

[2.2 内部样式表](#2.2 内部样式表)

[2.3 外部样式表](#2.3 外部样式表)

[三、CSS 选择器](#三、CSS 选择器)

[3.1 ID 选择器](#3.1 ID 选择器)

[3.2 class 选择器](#3.2 class 选择器)

[3.3 标签选择器](#3.3 标签选择器)

[3.4 通配选择器](#3.4 通配选择器)

[3.5 分组选择器](#3.5 分组选择器)

[3.6 层级选择器](#3.6 层级选择器)

[3.7 属性选择器](#3.7 属性选择器)

[3.8 伪类选择器](#3.8 伪类选择器)

[3.9 同辈选择器](#3.9 同辈选择器)

[四、CSS 字体设置](#四、CSS 字体设置)

[五、CSS 布局](#五、CSS 布局)

[5.1 盒子模型](#5.1 盒子模型)

[5.2 行块元素](#5.2 行块元素)

[5.3 定位](#5.3 定位)

在网页开发领域，HTML 负责搭建网页结构，而 CSS 则是赋予网页美观样式的关键技术，它能让静态的网页变得丰富多彩、布局合理。下面将从多个维度深入剖析 CSS 的核心知识。

一、CSS 概述

CSS 即层叠样式表（Cascading Style Sheets），用于定义 HTML 或 XML 等文件的样式。随着 HTML 功能不断增加导致代码臃肿，CSS 应运而生，它不仅能静态修饰网页，还可配合脚本语言实现动态样式效果，极大提升了网页开发的效率与质量。

二、引入 CSS 的三种方式

2.1 内联样式

在 HTML 元素中直接使用style属性设置样式，适用于单独修改某一个标签的样式。

复制代码

<p style="color:red; font-size: 16px;">这是一段红色16px字体的文字</p>

2.2 内部样式表

在<head>标签中通过<style>标签定义样式，对当前页面内元素进行样式设置。

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.3 外部样式表

将 CSS 代码保存为单独的.css文件，通过<link>标签引入到 HTML 页面，适合多个页面共用样式。
styles.css文件内容：

复制代码

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

HTML 页面引入代码：

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
</body>
</html>

三、CSS 选择器

3.1 ID 选择器

通过元素的id属性选取唯一元素，在 CSS 中用#加id名定义，如：

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ID选择器示例</title>
    <style>
        #specialDiv {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <div id="specialDiv">具有特殊样式的div</div>
</body>
</html>

3.2 class 选择器

根据class属性选取一类元素，CSS 中用.加class名定义，支持一个元素多个类名：

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class选择器示例</title>
    <style>
       .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">高亮段落1</p>
    <span class="highlight">高亮文本</span>
</body>
</html>

3.3 标签选择器

直接通过 HTML 标签名称选取所有同类元素，如：

复制代码

p {
    text-align: justify;
    line-height: 1.6;
}

3.4 通配选择器

*可选取页面所有元素，常用于初始化样式：

复制代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

3.5 分组选择器

用逗号分隔多个选择器，对不同元素设置相同样式：

复制代码

h1, h2, h3 {
    color: purple;
}

3.6 层级选择器

后代选择器（空格）选取某元素的所有后代，子元素选择器（>）只选直接子元素：

复制代码

/* 后代选择器 */
nav ul li {
    list-style: none;
}
/* 子元素选择器 */
.container > p {
    font-weight: bold;
}

3.7 属性选择器

根据元素属性及属性值选取元素：

复制代码

a[target="_blank"] {
    text-decoration: underline;
}
input[type="text"] {
    border: 1px solid #ccc;
}

3.8 伪类选择器

用于选取特定状态元素，如链接的不同状态：

复制代码

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
}
a:active {
    color: orange;
}

3.9 同辈选择器

+选取相邻同辈元素，如：

复制代码

h2 + p {
    font-style: italic;
}

四、CSS 字体设置

复制代码

p {
    font-family: "微软雅黑", sans-serif; /* 字体类型 */
    font-size: 14px; /* 字体大小 */
    font-style: italic; /* 字体风格 */
    text-align: center; /* 水平居中 */
    line-height: 24px; /* 垂直居中 */
    text-decoration: underline; /* 下划线 */
}

五、CSS 布局

5.1 盒子模型

复制代码

.box {
    width: 200px;
    height: 150px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px auto;
    background-color: lightgray;
}

5.2 行块元素

行内元素如<span>，块级元素如<div>，可通过display转换：

复制代码

span {
    display: block; /* 行内转块级 */
}
div {
    display: inline; /* 块级转行内 */
}

5.3 定位

复制代码

/* 绝对定位 */
.absolute {
    position: absolute;
    top: 50px;
    left: 100px;
}
/* 相对定位 */
.relative {
    position: relative;
    left: 20px;
    top: 10px;
}

CSS 作为网页样式设计的核心技术，掌握这些基础与核心要点，能够帮助开发者打造出美观、实用且具有良好用户体验的网页。