CSS 入门全解析

CSS 入门全解析:从选择器到布局的全面教学

  • [一、CSS 是什么?](#一、CSS 是什么?)
  • [二、CSS 的基本语法结构](#二、CSS 的基本语法结构)
  • 三、常见选择器讲解
  • 四、盒模型讲解(重点)
  • 五、字体与颜色样式
  • 六、布局方式
    • [6.1 浮动布局(了解)](#6.1 浮动布局(了解))
    • [6.2 Flex 弹性布局(推荐)](#6.2 Flex 弹性布局(推荐))
    • [6.3 Grid 网格布局(进阶)](#6.3 Grid 网格布局(进阶))
  • 七、过渡与动画
    • [7.1 过渡 transition](#7.1 过渡 transition)
    • [7.2 动画 animation](#7.2 动画 animation)
  • 八、实战示例:卡片组件样式
  • [九、常见问题 Q&A](#九、常见问题 Q&A)
    • [Q: 为什么设置宽度了还不生效?](#Q: 为什么设置宽度了还不生效?)
    • [Q: `px` 和 `rem` 有啥区别?](#Q: pxrem 有啥区别?)
    • [Q: CSS 怎么引入?](#Q: CSS 怎么引入?)

一、CSS 是什么?

CSS(Cascading Style Sheets,层叠样式表)用于控制网页的样式与布局。如果说 HTML 构建网页的"骨架",那 CSS 就是给这具骨架"穿衣服"。

它能定义:

  • 字体颜色 / 背景颜色
  • 宽高 / 边距 / 内边距
  • 布局方式(flex/grid)
  • 动画 / 过渡 等动态效果

二、CSS 的基本语法结构

css 复制代码
选择器 {
  属性名: 属性值;
}

✅ 例如:

css 复制代码
p {
  color: red;
  font-size: 16px;
}

含义是:把所有 <p> 段落标签的字体颜色设置为红色,字体大小为 16px。


三、常见选择器讲解

选择器 含义 示例
元素选择器 选择某个标签 div
类选择器 选择 class .box
id选择器 选择 id #header
组合选择器 多个元素 div, p
后代选择器 某元素内的子级 .menu li
属性选择器 根据属性值选择 input[type="text"]

✅ 示例:

css 复制代码
/* 所有 class 为 box 的元素 */
.box {
  border: 1px solid #333;
  }

四、盒模型讲解(重点)

CSS 中的每个元素都像一个盒子,由以下部分构成:

  • content:内容区域
  • padding:内边距
  • border:边框
  • margin:外边距
    📦 可视图示结构:
区域 说明
margin 元素与外部之间的距离
border 元素的边框
padding 内容与边框之间的内边距
content 元素的实际内容区域

✅ 示例:

css 复制代码
.box {
  width: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 20px;
}

五、字体与颜色样式

css 复制代码
h1 {
  font-size: 24px;
  font-weight: bold;
  color: #3498db;
  font-family: "Arial", sans-serif;
}

常用单位:

  • px:像素(绝对单位)
  • em / rem:相对单位
  • %:相对于父元素的百分比

六、布局方式

6.1 浮动布局(了解)

css 复制代码
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

6.2 Flex 弹性布局(推荐)

css 复制代码
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

常用属性说明:

  • justify-content: 主轴对齐(如 space-between)
  • align-items: 交叉轴对齐
  • flex-direction: 主轴方向(row/column)

6.3 Grid 网格布局(进阶)

css 复制代码
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

七、过渡与动画

7.1 过渡 transition

css 复制代码
.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

7.2 动画 animation

css 复制代码
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fade-in 1s ease-in-out;
}

八、实战示例:卡片组件样式

html 复制代码
<div class="card">
  <h2>标题</h2>
  <p>这里是内容区域</p>
</div>
css 复制代码
.card {
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.card:hover {
  transform: scale(1.05);
}

九、常见问题 Q&A

Q: 为什么设置宽度了还不生效?

A: 可能是 padding 或 border 撑大了盒子,需设置 box-sizing: border-box;

Q: pxrem 有啥区别?

A: rem 是相对根元素(html)的单位,更适合响应式布局。

Q: CSS 怎么引入?

A:

  • 内联样式:<div style="color:red">
  • 内部样式:放在 <style> 标签中
  • 外部样式:通过 <link rel="stylesheet" href="style.css"> 引入

到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~

创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:

点个赞❤️ 让更多人看到优质内容

关注「前端极客探险家」🚀 每周解锁新技巧

收藏文章⭐️ 方便随时查阅

📢 特别提醒:

转载请注明原文链接,商业合作请私信联系

感谢你的阅读!我们下篇文章再见~ 💕

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20207 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作