CSS基础[编辑 | 编辑源代码]

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML文档样式的语言，它定义了网页元素的外观和布局。CSS与HTML和JavaScript并称为前端开发的三大核心技术。通过CSS，开发者可以控制字体、颜色、间距、布局等视觉表现，实现内容与样式的分离。

基本语法[编辑 | 编辑源代码]

CSS规则由选择器和声明块组成。声明块包含一个或多个属性-值对，用花括号包裹。语法结构如下：

选择器 {
    属性: 值;
    属性: 值;
}

示例：

/* 将所有段落文字设为蓝色 */
p {
    color: blue;
    font-size: 16px;
}

选择器类型[编辑 | 编辑源代码]

CSS提供多种选择器来定位HTML元素：

基础选择器[编辑 | 编辑源代码]

元素选择器：通过标签名选择（如 p、div）
类选择器：通过class属性选择（如 .header）
ID选择器：通过id属性选择（如 #main）
通配符选择器：匹配所有元素（*）

示例：

/* 元素选择器 */
h1 { color: red; }

/* 类选择器 */
.error { background: yellow; }

/* ID选择器 */
#sidebar { width: 300px; }

组合选择器[编辑 | 编辑源代码]

后代选择器（空格）：div p
子选择器（>）：ul > li
相邻兄弟选择器（+）：h2 + p
通用兄弟选择器（~）：h2 ~ p

示例：

/* 选择div内的所有p元素 */
div p { margin: 10px; }

/* 选择直接子元素 */
ul > li { list-style: none; }

盒模型[编辑 | 编辑源代码]

CSS盒模型描述元素在页面中的布局方式，包含以下部分：

盒模型计算公式： 解析失败 (语法错误): {\displaystyle 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right }

示例：

.box {
    width: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
}
/* 总宽度 = 100 + 20*2 + 5*2 + 10*2 = 170px */

布局技术[编辑 | 编辑源代码]

Flexbox[编辑 | 编辑源代码]

弹性布局模型，适合一维布局：

.container {
    display: flex;
    justify-content: center; /* 水平对齐 */
    align-items: center;    /* 垂直对齐 */
}

Grid[编辑 | 编辑源代码]

网格布局，适合二维布局：

.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 两列，比例1:2 */
    gap: 10px; /* 间距 */
}

响应式设计[编辑 | 编辑源代码]

使用媒体查询（Media Queries）适配不同设备：

/* 当屏幕宽度小于600px时应用此样式 */
@media (max-width: 600px) {
    .sidebar {
        display: none;
    }
}

实际案例[编辑 | 编辑源代码]

案例1：导航栏布局

.nav {
    display: flex;
    background: #333;
}
.nav a {
    color: white;
    padding: 15px;
    text-decoration: none;
}
.nav a:hover {
    background: #555;
}

案例2：卡片组件

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.card:hover {
    transform: translateY(-5px);
}

高级特性[编辑 | 编辑源代码]

CSS变量：定义可复用的值

:root {
    --primary-color: #4285f4;
}
.button {
    background: var(--primary-color);
}

动画：使用@keyframes

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 1s;
}

最佳实践[编辑 | 编辑源代码]

1. 使用外部样式表（而非内联样式） 2. 遵循BEM命名规范（如.block__element--modifier） 3. 优先使用Flexbox/Grid而非浮动布局 4. 使用CSS预处理器（如Sass/Less）提升可维护性

常见问题[编辑 | 编辑源代码]

Q：CSS优先级如何计算？ A：优先级由选择器特异性决定，计算规则为： 解析失败 (语法错误): {\displaystyle 特异性 = (内联样式) \times 1000 + (ID选择器) \times 100 + (类/伪类) \times 10 + (元素) \times 1 }

Q：如何垂直居中元素？ A：现代方案（Flexbox/Grid）：

.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}