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 的基础和进阶技巧,提升网页设计能力!

相关推荐
JarvanMo3 分钟前
救救我的Android app吧
前端
南岸月明5 分钟前
为什么你拼命做副业,却还是赚不到钱?
前端
帅夫帅夫7 分钟前
你真的知道怎么用CSS吗?
前端
蓝胖子的小叮当13 分钟前
JavaScript基础(十)对象方法总结
前端·javascript
艾小码1 小时前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥1 小时前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北1 小时前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel1 小时前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue1 小时前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny1 小时前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js