CSS 从入门到精通

CSS 从入门到精通

1. CSS 简介

CSS(Cascading Style Sheets,层叠样式表)是一种用于控制网页样式和布局的语言。它可以用于设置颜色、字体、间距、布局等,使网页更加美观和用户友好。

2. CSS 语法

CSS 由 选择器声明块 组成。

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

示例:

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

3. CSS 选择器

3.1 基本选择器

  • 元素选择器p { color: blue; }
  • 类选择器.class-name { color: green; }
  • ID 选择器#id-name { font-size: 20px; }

3.2 组合选择器

  • 后代选择器div p {}
  • 子选择器div > p {}
  • 相邻兄弟选择器h1 + p {}
  • 通用兄弟选择器h1 ~ p {}

4. CSS 盒模型

盒模型包括:

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

示例:

css 复制代码
div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

5. CSS 布局

5.1 Flexbox 布局

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

5.2 Grid 布局

css 复制代码
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

6. CSS 动画

css 复制代码
@keyframes move {
    0% { transform: translateX(0); }
    100% { transform: translateX(100px); }
}

.box {
    animation: move 2s infinite;
}

7. 响应式设计

css 复制代码
@media (max-width: 600px) {
    body {
        background-color: lightgray;
    }
}

8. 结语

通过本教程,你可以掌握 CSS 的基础和进阶技巧,提升网页设计能力!

相关推荐
Mintopia3 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农7 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye10 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤14 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子18 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367221 小时前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端