从零开始学前端 | 第五章：CSS 入门与选择器基础

本章定位前面四章里我们一直在做一件事把网页的结构搭起来。到现在为止你已经会理解前端开发的大致分工。写出一个基础 HTML 页面。使用常见内容标签组织页面内容。用语义化标签把页面骨架搭清楚。但如果你回头看前面写过的页面会很容易发现一个共同问题页面有内容了也有结构了但看起来还很“素”。比如标题没有视觉重点文字颜色都一样页面背景很单调各个区域之间没有明显区分这时候CSS 就要出场了。这一章的目标不是让你一下子变成会做漂亮页面的人而是先建立一个最关键的基础知道怎么给页面加样式并知道怎么准确选中你想修改的元素。本章学习目标学完这一章后你应该能做到理解 CSS 的作用以及它和 HTML 的分工。认识 CSS 的基本语法结构。理解 CSS 的三种引入方式行内样式、内部样式、外部样式表。掌握标签选择器、类选择器、ID 选择器、后代选择器的基础用法。使用常见样式属性修改颜色、字体、背景和边框。能为前面写过的 HTML 页面补上基础样式。一、CSS 是什么CSS 的全称是Cascading Style Sheets中文通常叫“层叠样式表”。这个名字你现在不用深究先把它理解成一句话CSS 是用来控制网页外观和样式的。如果说HTML 负责“页面上有什么”CSS 就负责“这些内容长什么样”例如CSS 可以控制文字颜色字体大小背景颜色边框样式元素之间的排布方式这也是为什么前端通常会说HTML 负责结构CSS 负责样式JavaScript 负责交互1. 为什么 HTML 不直接负责样式很多初学者一开始会觉得“既然 HTML 里本来就有内容为什么还要单独学一个 CSS”因为网页开发里结构和样式最好分开处理。这样做的好处很明显HTML 更专注于表达内容和结构。CSS 更专注于控制视觉表现。后面想改样式时不用把结构一起改乱。同一套样式可以复用到多个页面。你可以先把这种思路理解成HTML 负责搭骨架CSS 负责穿衣服。2. 没有 CSS 的页面会怎么样如果一个页面只有 HTML没有 CSS它通常还是能显示出来。但这个页面往往会很朴素缺少层次不够美观重点不突出所以 CSS 不是“可有可无的装饰品”而是让页面真正具备视觉表现力的基础工具。二、CSS 的基本写法在正式写样式之前我们先看 CSS 最基础的语法结构。p{color:blue;}这段代码的意思是让页面里的所有p标签文字变成蓝色。你可以把它拆成三个部分来理解。1. 选择器最上面的p叫选择器。它的作用是告诉浏览器我要改哪一类元素。在这个例子里p表示选中所有段落标签。2. 属性花括号里的color叫属性。它表示我要改的是哪个样式方面。这里改的是文字颜色。3. 值blue是属性值。它表示要把这个样式改成什么。所以整句话连起来就是选中所有p元素把文字颜色改成蓝色。4. 一个更完整的例子h1{color:#1677ff;font-size:32px;background-color:#f0f7ff;border:1px solid #b7d4ff;}这段代码表示标题文字颜色改成蓝色字体大小改成32px背景色改成浅蓝色加上一圈边框5. CSS 注释CSS 里也可以写注释格式是/* 这里是注释内容 */例如/* 让页面主标题更醒目 */h1{color:#1677ff;}注释不会影响页面显示但可以帮助你理解代码意图。三、CSS 的三种引入方式CSS 写出来之后还需要“挂到页面上”浏览器才能生效。初学阶段你需要认识三种常见引入方式行内样式内部样式外部样式表四、行内样式直接写在标签上行内样式是把 CSS 直接写在 HTML 标签的style属性里。例如h1stylecolor:blue;我的第一个标题/h1这段代码表示选中的不是一类元素而是这个具体的h1它的文字颜色直接被设置成蓝色1. 行内样式的优点它最直接写完马上就能看到效果。对完全零基础的新手来说第一次感受“样式能改页面”时行内样式是最容易理解的。2. 行内样式的缺点它的问题也很明显样式和结构混在一起。同样的样式不好复用。页面一复杂就很难维护。例如下面这种写法后期就会很痛苦h1stylecolor:blue;标题 1/h1h1stylecolor:blue;标题 2/h1h1stylecolor:blue;标题 3/h1如果以后想把蓝色改掉就要一个个改。所以你可以先记住行内样式适合临时演示不适合作为主要写法。五、内部样式写在style标签里内部样式是把 CSS 写在 HTML 文件里的style标签中通常放在head里。例如!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title内部样式示例/titlestyleh1{color:blue;}/style/headbodyh1你好CSS/h1/body/html这种方式比行内样式好一些因为样式不再直接塞到每个标签里同一个文件里的多个元素可以共用一套规则1. 内部样式适合什么场景它比较适合学习阶段做小例子单页练习快速实验某个样式效果2. 内部样式的局限如果一个网站有多个页面内部样式就不太方便复用了。因为你可能得把同样的样式重复写到很多 HTML 文件里。六、外部样式表最推荐的基础写法外部样式表是把 CSS 单独写到.css文件里再让 HTML 文件引入它。例如先创建一个style.css文件h1{color:blue;}然后在 HTML 里这样引入linkrelstylesheethref./style.css/完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title外部样式表示例/titlelinkrelstylesheethref./style.css//headbodyh1你好CSS/h1/body/html1. 为什么更推荐外部样式表这是实际开发中最常见、也最值得你从入门阶段养成的方式。它的好处有HTML 和 CSS 分开结构更清楚。一个 CSS 文件可以给多个页面共用。后面修改样式更方便。代码组织更像真实项目。2. 初学阶段怎么选你可以先这样记行内样式最直接但不推荐大量使用内部样式适合单文件练习外部样式表最推荐的长期写法如果你准备认真写一个页面练习建议尽量开始使用外部样式表。七、什么是选择器现在我们已经知道 CSS 可以写样式了但还有一个关键问题浏览器怎么知道你到底想改谁答案就是通过选择器。选择器的作用可以理解成从页面中找到你想要修改的元素。这一章你先掌握四种最常用的基础选择器标签选择器类选择器ID 选择器后代选择器八、标签选择器按标签名选中元素标签选择器就是直接写标签名。例如p{color:#333333;}这表示选中页面里所有的p标签。再比如h1{color:#1677ff;}表示选中所有h1。1. 标签选择器的优点它写法简单很适合入门。2. 标签选择器的局限它会影响这一类所有标签。例如如果你页面里有很多p但你只想改其中一部分标签选择器就不够精确了。所以标签选择器适合做一些基础统一设置但不适合处理太多局部差异。九、类选择器最推荐的新手基础选择器类选择器是非常重要的一种写法也是实际开发里最常用的基础方式之一。1. HTML 里先写类名sectionclasscardh2关于我/h2p我正在学习前端开发。/p/section这里的classcard表示这个元素有一个类名叫card。2. CSS 里用点号选中类名.card{background-color:#f7f9fc;border:1px solid #d9e2f2;}注意这里最容易写错的地方HTML 里写的是classcardCSS 里写的是.card前面的点号不能漏。3. 为什么类选择器特别重要因为类名可以复用。例如sectionclasscard第一块内容/sectionsectionclasscard第二块内容/sectionsectionclasscard第三块内容/section只要 CSS 里写一次.card{border:1px solid #d9e2f2;}这三块内容就都能拥有同样的样式。4. 为什么推荐优先使用类选择器因为它有几个非常明显的优点复用方便语义清楚比标签选择器更灵活比 ID 选择器更适合做大多数样式控制你可以从这一章开始养成一个基础习惯大多数局部样式优先考虑类选择器。十、ID 选择器给某个唯一元素使用ID 选择器适合选中某一个唯一元素。1. HTML 里写idh1idpageTitle我的个人主页/h12. CSS 里用#选中#pageTitle{color:#1677ff;}注意HTML 里写idpageTitleCSS 里写#pageTitle前面是井号不是点号。3. ID 和类有什么区别你现在可以先做一个很实用的基础区分class更适合一类元素共享样式id更适合某个唯一元素例如多个内容卡片都可以叫card页面主标题可以有自己的id4. 初学阶段怎么看待 ID 选择器你需要认识它也要会写它。但在页面样式开发里不建议一上来什么都用 ID 选择器。因为很多场景其实用类选择器更灵活。所以你可以先记住ID 选择器知道就够了日常样式优先还是类选择器。十一、后代选择器选中某个区域里面的元素后代选择器非常实用它可以表示只修改某个容器内部的某类元素。例如.card p{color:#555555;}它的意思是先找到类名为card的元素再找到它里面的所有p只修改这些p这就比直接写p{color:#555555;}更精准。1. 后代选择器为什么好用因为很多时候你不是想改“全站所有段落”而是只想改“某个区域里的段落”。例如卡片里的文字页头里的链接页脚里的说明这类场景后代选择器就很自然。2. 一个更直观的例子HTMLsectionclasscardh2学习计划/h2p先学 HTML再学 CSS。/p/sectionfooterp这是底部说明。/p/footerCSS.card p{color:#1677ff;}结果是卡片里的段落会变蓝footer里的段落不会变蓝这就是“局部控制”的价值。十二、常见样式属性先学最有用的几类CSS 属性很多但初学阶段千万不要想着一次全学完。这一章先掌握四类最常见、最容易立刻看到效果的属性颜色字体背景边框十三、颜色相关colorcolor用来设置文字颜色。例如h1{color:#1677ff;}1. 颜色可以怎么写初学阶段你先认识两种常见写法就够了颜色英文单词p{color:red;}十六进制颜色值p{color:#333333;}通常来说十六进制写法更常见也更灵活。2. 初学者怎么选颜色如果你现在还没有设计经验完全没关系。一开始只要做到主要标题颜色和正文颜色有区分不要用过多颜色页面配色尽量简单就已经很好了。十四、字体相关font-size、font-family字体相关属性会直接影响页面阅读体验。1.font-size字体大小h1{font-size:32px;}这表示把标题字号设置成32px。2.font-family字体body{font-family:Arial,sans-serif;}这表示页面优先使用Arial如果没有再退回到通用无衬线字体。初学阶段你先知道它能控制字体风格就够了。3. 为什么字体也很重要因为页面好不好读和字体大小、字形风格有直接关系。如果字号过小、字体不合适即使内容写得很好阅读体验也会变差。十五、背景相关background-colorbackground-color用来设置背景色。例如body{background-color:#f5f7fb;}或者.card{background-color:#ffffff;}背景色很适合用来做页面整体底色卡片区块区分头部区域强调只要颜色别太重背景色通常是最容易让页面立刻“看起来更像网页”的方式之一。十六、边框相关borderborder用来给元素加边框。例如.card{border:1px solid #d9e2f2;}这句代码可以拆成三部分理解1px边框粗细solid边框样式表示实线#d9e2f2边框颜色边框很适合用来帮助区分不同区域比如内容卡片表单区域头部模块对初学者来说边框是让页面层次更清楚的一个非常实用的工具。十七、动手把“自我介绍”页面变好看一点现在我们把前面章节写过的 HTML 页面配上一份最基础的 CSS。这里我推荐你使用“外部样式表”的方式因为它更接近真实开发习惯。1. 先准备 HTML你可以把index.html写成这样!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title我的自我介绍/titlelinkrelstylesheethref./style.css//headbodyheaderclasspage-headerh1idpageTitle我的自我介绍/h1pclassintro-text你好我是一名前端初学者。/p/headermain!-- 给内容区加类名后面可以重复复用同一套样式 --sectionclasscardh2关于我/h2p我正在系统学习 HTML 和 CSS希望能做出自己的第一个完整网页。/p/sectionsectionclasscardh2我的学习目标/h2p先学会网页结构和基础样式再逐步进入 JavaScript 和框架开发。/p/section/main/body/html2. 再准备 CSS创建一个style.css文件写入下面内容body{font-family:Arial,sans-serif;background-color:#f5f7fb;color:#333333;}/* 先让页面头部和内容区在视觉上分开方便新手观察结构和样式的对应关系 */.page-header{background-color:#eaf2ff;border:1px solid #b7d4ff;}#pageTitle{color:#1677ff;font-size:32px;}.intro-text{color:#555555;}/* 优先使用类选择器承接可复用样式后面新增卡片时不需要重复写规则 */.card{background-color:#ffffff;border:1px solid #d9e2f2;}/* 后代选择器只影响卡片里的段落不会误伤页面其他区域 */.card p{color:#444444;}这份样式虽然还很简单但已经覆盖了本章重点外部样式表标签结构和类名配合类选择器ID 选择器后代选择器颜色、字体、背景、边框十八、写 CSS 时的基础思路从这一章开始你可以慢慢养成一个简单但非常实用的写样式顺序。1. 先看页面整体先问自己页面整体背景是什么正文默认文字颜色是什么页面默认字体是什么这一类设置通常会先写在body上。2. 再看大区域例如页头内容卡片底部区域这些通常适合用类名承接样式。3. 最后再看局部细节例如某个标题颜色某个段落颜色某个区域内部的文字这时可以再用更细一点的选择器去调整。你可以先把这个顺序记成一句话先整体再区域最后局部。十九、新手最容易踩的坑1. CSS 文件引入了但样式没生效这种情况非常常见优先检查href路径是否写对。文件名是不是style.css而不是别的名字。HTML 文件有没有保存。浏览器有没有刷新。很多时候不是 CSS 语法错了而是文件根本没连上。2. 类选择器忘了写点号HTMLsectionclasscard/sectionCSS 正确写法.card{border:1px solid #d9e2f2;}不是card{border:1px solid #d9e2f2;}3. ID 选择器忘了写井号HTMLh1idpageTitle我的标题/h1CSS 正确写法#pageTitle{color:#1677ff;}4. 样式全写在行内例如h1stylecolor:blue;标题/h1pstylecolor:gray;正文/psectionstyleborder:1px solid #ccc;内容区/section刚开始这样写也许会觉得“快”但后面会越来越乱。建议你尽快过渡到小练习可用内部样式正式练习尽量用外部样式表5. 一上来什么都用 ID 选择器这也很常见。如果你所有地方都写成唯一 ID后面复用样式会比较麻烦。对初学者来说更稳妥的习惯是认识 ID但大部分可复用样式优先写成类选择器。二十、本章实践练习这一章最适合做“加样式型练习”因为写完就能立刻看到变化。练习 1给自我介绍页面加基础样式至少完成下面几件事给页面设置一个背景色。给主标题设置颜色和字号。给正文设置文字颜色。给某个内容区域加边框。练习 2尝试三种引入方式请分别练习行内样式内部样式外部样式表做完后自己总结哪种方式最直接哪种方式最整洁哪种方式最适合后续继续扩展练习 3练习四种基础选择器至少写出下面四类规则h1{color:#1677ff;}.card{background-color:#ffffff;}#pageTitle{font-size:32px;}.card p{color:#444444;}写完后自己解释每一条规则分别选中了谁。练习 4提取公共样式到类名中如果你页面里有多个内容块样式差不多不要重复写很多行内样式。尝试把它们统一提取成一个类例如sectionclasscard内容块 1/sectionsectionclasscard内容块 2/sectionsectionclasscard内容块 3/section然后在 CSS 里只写一次.card{border:1px solid #d9e2f2;background-color:#ffffff;}这个练习很重要因为它会帮你真正理解“样式复用”。二十一、学习重点提示这一章你最需要抓住的不是属性数量而是 CSS 的基本工作方式。请重点记住CSS 负责控制网页样式不负责页面结构本身。CSS 规则由“选择器 属性 值”组成。行内样式、内部样式、外部样式表都要认识但长期最推荐外部样式表。标签选择器、类选择器、ID 选择器、后代选择器是最基础的四种选择器。大多数局部样式优先考虑类选择器。给页面加样式时先整体再区域最后局部。如果你只记一句话请记住CSS 的关键不是记住很多属性而是先学会“选中谁再改什么”。二十二、本章小结这一章我们正式从“只有结构的页面”进入了“开始有样式的页面”。你已经学习了CSS 是什么CSS 的基本语法三种引入方式四种基础选择器颜色、字体、背景、边框这些最常见样式属性如何给前面写过的 HTML 页面补上基础样式从现在开始你写的网页不再只是“能显示内容”而是开始有了视觉层次。这一步很关键因为后面你学布局、间距、盒模型时CSS 会越来越重要。二十三、课后思考题请你思考下面几个问题为什么说外部样式表通常比行内样式更适合实际开发类选择器和 ID 选择器的区别你现在会怎么解释为什么后代选择器比直接写标签选择器更适合某些局部场景如果你想给页面里三个风格相同的内容卡片加样式为什么类选择器通常比三个不同 ID 更合适建议你用自己的话把这些问题写下来。能说清楚这些区别说明你已经真正理解了 CSS 的基础工作方式。二十四、下一章预告下一章我们会继续学习从零开始学前端 | 第六章盒模型、尺寸与间距到那时你会真正开始理解“为什么元素会占空间”“为什么边框外还有距离”“为什么页面总是看起来挤在一起”这会是你进入 CSS 布局之前最重要的一步。