CSS 全面教程 - 从入门到实战-CSDN博客

本文链接：https://blog.csdn.net/2401_85751940/article/details/147630688

一、CSS 简介

CSS (Cascading Style Sheets) 是用来描述 HTML 文档样式的样式表语言，控制网页的外观和布局。

核心概念：

层叠性：多个样式规则可以应用于同一元素
继承性：某些样式属性会传递给子元素
优先级：不同选择器有不同的权重

二、基础语法

1. 基本结构

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

示例：

h1 {
  color: blue;
  font-size: 24px;
}

2. 三种引入方式

<!-- 1. 内联样式 -->
<p style="color: red;">红色文字</p>

<!-- 2. 内部样式表 -->
<head>
  <style>
    body { background: #f5f5f5; }
  </style>
</head>

<!-- 3. 外部样式表 -->
<link rel="stylesheet" href="styles.css">

三、选择器详解

1. 基本选择器

/* 元素选择器 */
p { color: #333; }

/* 类选择器 */
.title { font-weight: bold; }

/* ID选择器 */
#header { height: 60px; }

/* 通配符选择器 */
* { margin: 0; padding: 0; }

2. 组合选择器

/* 后代选择器 */
div p { line-height: 1.5; }

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

/* 相邻兄弟选择器 */
h1 + p { margin-top: 0; }

/* 通用兄弟选择器 */
h2 ~ p { color: #666; }

3. 属性选择器

/* 存在属性 */
a[target] { color: purple; }

/* 精确匹配 */
input[type="text"] { width: 200px; }

/* 包含字符串 */
a[href*="example"] { text-decoration: none; }

/* 开头匹配 */
a[href^="https"] { color: green; }

/* 结尾匹配 */
a[href$=".pdf"]::after { content: " (PDF)"; }

4. 伪类与伪元素

/* 伪类 */
a:hover { color: red; }
li:nth-child(odd) { background: #eee; }

/* 伪元素 */
p::first-line { font-weight: bold; }
p::after { content: " - 结束"; }

四、盒模型

1. 盒模型组成

内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)

2. 标准盒模型 vs 怪异盒模型

.box {
  box-sizing: content-box; /* 默认，width仅指内容宽度 */
  box-sizing: border-box;  /* width包含padding和border */
}

3. 常用属性

div {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
  background: #fff;
}

五、布局系统

1. Flex 布局

.container {
  display: flex;
  justify-content: center; /* 主轴对齐 */
  align-items: center;    /* 交叉轴对齐 */
  flex-wrap: wrap;        /* 换行 */
}

.item {
  flex: 1;                /* 弹性比例 */
  order: 2;               /* 排序 */
  align-self: flex-start; /* 单独对齐 */
}

2. Grid 布局

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 列宽 */
  grid-template-rows: 100px auto;      /* 行高 */
  gap: 10px;                          /* 间距 */
}

.item {
  grid-column: 1 / 3;  /* 跨越列 */
  grid-row: 1;         /* 行位置 */
}

3. 传统布局

/* 浮动布局 */
.left { float: left; width: 200px; }
.right { margin-left: 220px; }

/* 定位布局 */
.parent { position: relative; }
.child { position: absolute; top: 0; right: 0; }

六、响应式设计

1. 媒体查询

/* 小屏幕 */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .content { width: 100%; }
}

/* 打印样式 */
@media print {
  nav, footer { display: none; }
}

2. 响应式单位

h1 { font-size: 2rem; }    /* 相对于根元素 */
p { font-size: 16px; }     /* 固定像素 */
.container { width: 90%; } /* 百分比 */
img { max-width: 100%; }   /* 自适应 */

七、动画与过渡

1. 过渡效果

.button {
  transition: all 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
  background: #4CAF50;
}

2. 关键帧动画

@keyframes slidein {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.banner {
  animation: slidein 1s forwards;
}

八、CSS 变量

:root {
  --primary-color: #4285f4;
  --spacing: 8px;
}

.header {
  color: var(--primary-color);
  padding: var(--spacing);
}

九、最佳实践

命名规范：使用 BEM 等命名约定

.block__element--modifier { ... }

预处理器：使用 Sass/Less

$primary-color: #333;
.header { 
  background: lighten($primary-color, 20%);
}

性能优化：

避免过度嵌套
使用简写属性
减少重绘和回流

十、学习资源

这篇 CSS 教程涵盖了从基础到进阶的核心知识点，建议边学边实践，通过实际项目加深理解。随着 CSS3 的不断发展，建议持续关注新特性如容器查询、层叠布局等前沿技术。