《给所有人的权威 CSS 指南》中的掌握 CSS |第1部分-css教程-PHP中文网

首页

web前端

css教程

《给所有人的权威 CSS 指南》中的掌握 CSS |第1部分

Susan Sarandon

Jan 02, 2025 pm 09:30 PM

Mastering CSS in The Definitive CSS Guide for Everyone | Part-1

曾经看过一个设计精美的网站并想知道，“他们是如何做到的？”好吧，您即将踏上一段从 CSS 新手转变为造型超级英雄的旅程。

将 CSS 视为网络世界的时尚设计师 - HTML 提供结构，而 CSS 使其看起来更加美妙！

No.	Section	Link
1	Understanding CSS Fundamentals	Understanding CSS Fundamentals
2	Selectors and Specificity	Selectors and Specificity
3	The Box Model Explained	The Box Model Explained
4	Flexbox: Layout Made Easy	Flexbox: Layout Made Easy
5	CSS Grid: Two-Dimensional Layouts	CSS Grid: Two-Dimensional Layouts

了解 CSS 基础知识

让我们从基础开始。 CSS（层叠样式表）是一种为网络带来活力的语言。就像画家的调色板一样，它为您提供了向网页添加颜色、形状和视觉效果的工具。

语法基础知识

基本 CSS 语法包括：

选择器：目标 HTML 元素
属性：指定样式
值：定义如何设置样式

selector {
    property: value;
}

包含 CSS 的方法

可以通过三种方法将 CSS 添加到 HTML：

内联 CSS：直接在 HTML 元素中
内部 CSS：在
外部 CSS：在单独的 .css 文件中（推荐）

实践练习：设计博客文章的风格

尝试这个实践练习来练习基本的 CSS：

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

选择器和特异性

理解选择器对于定位正确的元素至关重要。将选择器视为您用于样式设置的 GPS 坐标 - 它们可以帮助您导航到您想要修改的正确元素。

高级选择器示例

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

实践练习：特异性挑战

创建具有不同状态和特定级别的导航菜单：

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

参考：

MDN Web Docs - CSS 语法和选择器 - 易于理解的 CSS 语法、结构和规则介绍。
W3Schools CSS Basic - 非常适合视觉学习者，提供简单的示例和实时代码编辑器来测试和练习。
CSS Diner - 一个有趣的互动游戏，用于学习 CSS 选择器。

盒子模型解释

网页设计中的每个元素都遵循 CSS 盒模型 - 将其视为元素如何占用页面空间的蓝图。就像物理包装有其内容、填充和外盒一样，网页元素也遵循相同的原则。

盒子模型的组成部分

Content：元素的实际内容区域
Padding：内容和边框之间的空间
边框：围绕填充的线
Margin：元素之间的空间

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

盒子大小属性

默认情况下，内边距和边框会添加到元素的宽度/高度中。使用 box-sizing: border-box 使宽度/高度包括内边距和边框，这通常更直观：

selector {
    property: value;
}

盒模型示例：文本卡

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

实践练习：创建轮廓框

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}

参考：

MDN Web 文档 - CSS 盒模型 - 用图表解释盒模型。涵盖边距、边框、内边距和内容。
W3Schools - CSS 盒子模型 - 初学者友好，具有简单的视觉效果。
Web Dev Simplified - 为初学者提供的盒子模型的简短、清晰、直观的解释。
CSS Tricks - 对盒子模型的详细记录和高级解释，以及实际用例和技巧。

Flexbox：布局变得简单

Flexbox 就像一个神奇的容器，可以以最有效的方式自动排列其内容。它非常适合以最少的努力创建响应式布局。

关键 Flexbox 属性

显示：flex：激活 Flexbox
flex-direction：确定主轴（行/列）
justify-content：沿主轴对齐项目
align-items：沿横轴对齐项目
flex-wrap：控制项目是否可以换行

<nav>





<pre class="brush:php;toolbar:false">/* Challenge: Style these with increasing specificity */
.nav-link { /* Base styles */ }
.nav-item .nav-link { /* More specific */ }
#main-nav .nav-list .nav-item .nav-link { /* Most specific */ }

复杂的 Flexbox 布局

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid #333;
    margin: 10px;
}

实践练习：灵活的仪表板

创建响应式仪表板布局：

* {
    box-sizing: border-box;
}

参考：

MDN Web Docs - Flexbox - 一个很好的起点，具有清晰的视觉效果和实际示例。逐步涵盖所有 Flexbox 属性。
W3Schools - CSS Flexbox - 带有现场演示和易于理解的 Flexbox 属性解释的简明指南。
Flexbox Froggy - 一款有趣的互动游戏，通过引导青蛙到睡莲叶来练习 Flexbox 概念。
CSS Tricks - Flexbox 完整指南 - 引用最广泛的指南之一，具有所有 Flexbox 属性的交互式视觉备忘单。
FreeCodeCamp - Flexbox 完整指南 - 为初学者全面解释 Flexbox，涵盖属性和实际应用程序。
Smashing Magazine - Understanding Flexbox - 详细解释 Flexbox，包括对齐、排序和响应式设计的实际示例。
Flexbox Playground - 在交互式环境中试验 Flexbox 属性。

CSS 网格：二维布局

CSS 网格通过提供二维系统将布局控制提升到一个新的水平。将其视为一个电子表格，您可以在其中精确地将元素放置在行和列中。
网格基础知识

显示：网格：激活网格
grid-template-columns：定义列大小
grid-template-rows：定义行大小
gap：设置网格项目之间的间距

selector {
    property: value;
}

高级 CSS 网格技术

CSS 网格模板区域允许您在网格容器内定义命名网格区域，从而通过使用描述性名称将元素分配到特定区域来更轻松地创建复杂布局。

<!-- HTML Structure -->
<article>





<pre class="brush:php;toolbar:false">/* Your task: Style this blog post */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Arial', sans-serif;
}

.title {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.meta {
    color: #666;
    font-style: italic;
}

.content p {
    line-height: 1.6;
    margin-bottom: 1.5em;
}

实践练习#4：杂志布局

使用 CSS 网格创建杂志风格的布局：

/* Attribute selector with partial match */
[class*="btn-"] {
    padding: 10px 20px;
    border-radius: 4px;
}

/* Nth-child selections */
li:nth-child(odd) {
    background-color: #f5f5f5;
}

/* Combining multiple selectors */
input[type="text"]:focus,
input[type="email"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
}