你有没有想过一个完全没有CSS的网页长什么样我早期刚接触前端时做过一个实验把一个正常新闻页面的HTML文件保存下来手动删掉所有样式引用再在浏览器打开——标题和正文全部挤在一起没有字号对比没有间距图片一块块堆着内容顺序虽然没乱但整个页面像一份没排版过的纯文本。CSSCascading Style Sheets层叠样式表这门语言说白了就是负责网页的“化妆”字号、颜色、间距、位置、背景、边框凡是和视觉相关的都由它说了算。这篇part1我打算从零讲清楚三件事CSS怎么引入、选择器怎么用、盒子模型是什么。适合刚学完HTML准备正式接触样式的小伙伴也适合学过一阵子但总觉得地基不牢的人回头补课。1. 先搞清楚CSS在网页里扮演什么角色1.1 没有CSS的网页长什么样HTML负责结构CSS负责表现这句话几乎每个教程都会说但真正体会到差别最好是亲手看一看。HTML本身其实也支持一些样式属性比如早期标签里的font、bgcolor、align都能改颜色或对齐。那为什么还要单独学CSS两个理由一是HTML自带的样式能力极其有限做不出复杂布局和精致效果二是样式直接堆在HTML里10个页面就是10倍的维护成本改一个颜色要翻遍所有文件。CSS的核心价值是“一处定义、全站生效”。你通过一份外部样式表控制整个网站的字号、配色、间距改一个变量几十个页面跟着更新。这个能力是用好CSS的第一个思维转换把表现层面的东西从HTML结构中抽离出来让结构归结构、样式归样式。1.2 层叠、继承与优先级的最朴素理解CSS名字里的“Cascading”不是摆设它描述了浏览器处理多条样式规则冲突时的机制。初学者最容易困惑的就是我明明给p写了color: red为什么页面上显示蓝色答案通常就藏在“层叠”里。层叠的核心规则可以简化成三条样式来源优先级、选择器权重、同权重下后写的覆盖先写的。再往深了还有!important这种强制手段。入门阶段不需要把全部细节背下来但至少要理解一个朴素的结论越“接近”元素的样式越优先。内联样式写在元素身上最接近所以通常最优先然后是选择器权重更高的规则权重相同的情况下源代码靠后的获胜。这个结论能解决你在入门前两个月90%的“样式不生效”问题。后面遇到诡异情况我建议先别急着改代码打开浏览器开发者工具看Elements面板里到底哪条规则把你想应用的那条给覆盖了。带着这个习惯CSS学习会顺畅很多。1.3 浏览器解析CSS的基本流程还有一个概念能帮你理解后续所有内容浏览器读取HTML后构建出一个DOM树然后解析CSS规则把匹配的选择器和对应的声明块挂到元素上。这个匹配过程是“从右往左”进行的比如.card .title这条规则浏览器会先找所有.title元素再看它们的祖先里有没有.card。理解这一点你就明白为什么选择器层级写得太深会影响性能也明白了“后代选择器”到底是靠什么逻辑匹配的。2. 样式引入方式三种写法我都实际用过说说怎么选2.1 外部样式表项目里的绝对主力实际项目中最常用、也最推荐的方式是外部样式表。做法是在HTML的head里写一个link标签指向独立的.css文件!DOCTYPE html html langzh-CN head meta charsetUTF-8 title我的页面/title link relstylesheet hrefcss/style.css /head body h1这是一级标题/h1 /body /html对应的css/style.css里写h1 { color: #2c3e50; font-size: 24px; }外部样式表的好处是结构与表现彻底分离。做过一次全站改版的朋友都有体会只改一个CSS文件几十个页面的字体、配色、间距全部跟着更新这是任何其他方式都做不到的。另外浏览器会缓存CSS文件用户二次访问时样式文件不用重新下载页面加载速度会明显提升。2.2 内部样式表单页练习的好帮手如果只是给单个页面写少量特殊样式可以在head里用style标签。初学者做练习时经常这样写因为不用开两个文件改动所见即所得head style .highlight { background: #fff3cd; padding: 8px; } /style /head内部样式表在真实项目里也有应用场景比如单页面应用的路由级样式覆盖或者临时给某个页面加一点外部CSS里没有的特殊样式。但它不适合全站复用因为样式只对当前页面生效换了页面就得再写一遍。2.3 内联样式能不用就不用直接在标签上写style属性这是优先级最高的写法也是最不推荐入门阶段依赖的写法p stylecolor: red; font-size: 16px;这段文字是红色的/p它把样式重新塞回HTML又回到维护困难的老路。唯一的合理场景可能是静态邮件模板、邮件客户端大多不支持外部CSS或者你在用JavaScript动态控制某个元素的临时样式。日常项目里我会尽量避免为具体元素写内联样式尤其是团队协作时后面的人想覆盖这个样式会非常痛苦。2.4 三种方式的优先级对比我整理了一张实际工作中常用的对照表引入方式写法位置优先级典型场景内联样式元素style属性最高临时微调、动态样式、邮件模板内部样式表head里的style次之单页特殊样式、学习Demo外部样式表link引入独立CSS最低全站统一样式团队项目主力很多人把这个优先级理解反了以为是“后写的优先级高”。准确说法是引入方式不同时内联 内部 外部相同引入方式时才是“后面写的覆盖前面写的”。我的建议很简单日常项目全部用外部样式表学习Demo用内部样式表内联样式尽量别碰。等你后期配合构建工具打包外部CSS还会被合并、压缩、加哈希指纹优势会更明显。3. 选择器学CSS第一周最应该吃透的语法3.1 类选择器使用频率最高的一个选择器决定“这条规则作用于哪些元素”它本身不产生视觉效果视觉效果由声明块里的属性决定。类选择器用英文点号开头是实际开发中最常写的因为它最大的优势是可复用——同一个类名可以加到任意多个元素上一个页面里出现十次也没问题。.card { background: #fff; border-radius: 8px; padding: 16px; }类名语义化很重要。我见过有人写.class1、.red、.left这类命名短期看着省事三周后再回看代码谁也没法第一时间理解这个类到底负责什么。推荐用“描述用途”的命名方式.news-list、.nav-item、.error-message让类名自己说明结构含义。这个习惯越早养成越好后面接触BEM、原子化CSS时你会发现大家都建立在“类名可读”的基础上。3.2 id选择器与标签选择器知道特点别滥用id选择器用井号开头因为id在页面中必须唯一所以它的特异性非常高天然适合“唯一目标”的场景。但入门阶段容易犯的毛病是一股脑全用id写样式后来想复用样式才发现根本套不上。实务中的做法是id留给JavaScript操作元素、锚点定位等唯一目标场景样式层面优先考虑类选择器。标签选择器如div、p、a用于设置元素的基础默认样式做“重置”比较合适。但要注意作用范围比如给所有p设置margin-bottom: 20px页面上所有段落都会有下边距如果某天出现了一处不需要下边距的段落就必须再写一个类去覆盖等于给自己埋坑。所以我的习惯是标签选择器只用来定基础款特殊元素一律加类名。3.3 通配选择器、属性选择器与伪类入门通配选择器*会选中页面所有元素常配合margin: 0; padding: 0;做最朴素的样式重置。但注意在大型页面上用*统一设置属性属实不算高效现在主流方案是Normalize.css这类更克制的重置方式后面会再提。属性选择器按[attr]匹配元素比如input[typetext]只选中文本框比input单独用更精准。它还有几个变体写法入门阶段先掌握最基础的方括号写法就够用。伪类里最常用的是:hover、:first-child、:nth-child(n)。热搜词里有“css鼠标移入事件”很多新手以为鼠标移入效果必须写JavaScript其实:hover这一个伪类就能完成绝大多数交互反馈。我当时做导航菜单的下拉效果用的就是:hover配合display切换一行JS都没写。伪类的概念不要想得太玄它就是在元素的“特定状态”下施加样式。3.4 新手必踩的选择器优先级坑选择器特异性权重是CSS面试必问、项目必踩的环节。简单粗暴的计算方法id选择器权重是100类选择器、伪类、属性选择器都是10标签选择器、伪元素是1通配选择器是0。命中同一元素的多个规则依次比较权重。比如#app .card p就是100101111.a .b .c是30前者获胜。注意这不是简单的十进制加法而是按位比较的逻辑。平时遇到“样式没生效”先打开DevTools看Elements面板里哪条规则被划掉了再倒推权重很快就能定位。你还会遇到另一种情况两个类选择器权重相同但后者会覆盖前者这是同权重下的“后来居上”规则。我在项目里会刻意把基础样式写在前面、覆盖样式写在后面利用这个规则而不是绕开它。4. 字体与文本属性先把网页的“脸面”收拾利索4.1 字体家族的设置逻辑字体是CSS入门里最容易被忽略、又最容易出问题的一块。设置很简单就是font-family但坑点在“中文字体”和“字体回退”。比如你写body { font-family: PingFang SC, Microsoft YaHei, sans-serif; }这个列表的意义是优先用苹方用户没有苹方就自动切到微软雅黑再不行就落到系统默认的无衬线字体。字体之间用逗号分隔包含空格的字体名要加引号。不要把一长串字体名都塞进去写两三个常用字体加一个兜底即可。另外注意中文字体文件体积大网页很少直接通过font-face加载中文字体通常依赖用户系统自带的字体英文字体则可以打包成woff2格式来用后面做英文站时这一块会很有用。4.2 字号、行高与单位选择入门阶段字号直接font-size就完事。单位上我建议先用px或rem起步别急着上vw。px是绝对单位一个像素就是一个像素rem相对根元素html的字号默认情况下一根就是16px所以font-size: 1rem等于16pxem相对父元素字号多层嵌套时容易算乱vw是视口宽度的1%适合做响应式但字体用vw早期很容易出现过度缩放问题。行高line-height也很重要文字太小白间距太挤阅读很累行高过大整个页面又会显得松散。常见做法是line-height: 1.5到1.7之间。它有两种写法不带单位的1.5表示“行高是当前字号的1.5倍”这种写法在继承时更安全带px的写法在后续覆盖时容易忘记同步修改所以我更推荐无单位写法。4.3 文本对齐、装饰与换行省略文本对齐用text-align项目里最常见的就是center。热搜词里“css换行省略”值得专门说一嘴单行省略的三件套是.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }三行代码缺一不可white-space: nowrap禁止换行overflow: hidden藏住溢出内容text-overflow: ellipsis在截断处显示省略号。多行省略在WebKit内核浏览器可以配合-webkit-line-clamp实现需要组合display: -webkit-box这个旧属性。它不是标准属性但实际项目里兼容性够用我在文章列表场景经常这样写。text-decoration最常见的用途是去掉链接下划线a { text-decoration: none; }。热搜词里“css删除线”的写法是text-decoration: line-through;非常适合电商场景的“原价划线价”。4.4 颜色与背景几种写法对比颜色有hex、rgb/rgba、hsl/hsla等写法。16进制#ff6600、rgb(255, 102, 0)、rgba多一个透明度参数。日常写页面纯色用hex最直观需要透明度时用rgbahsl理解起来相对绕一些但做颜色渐变时很好用。热搜里的“css字体渐变”是background: linear-gradient配合background-clip: text实现属于进阶内容放到part2再展开。背景属性background是简写可以叠加背景色、背景图、平铺模式、位置、尺寸。典型的写法.banner { background: #f5f5f5 url(bg.jpg) no-repeat center / cover; }注意center / cover中间有空格center是位置cover是尺寸。很多人写背景图铺不满整块多半就是漏了background-size: cover。移动端还常用background-attachment: fixed做背景固定效果但它在iOS上有不少兼容问题这个有机会单独写一篇。5. 盒子模型理解网页布局的第一道坎5.1 每个元素都是一个盒子CSS里每一个元素在渲染时都被当作一个矩形盒子由内容区content、内边距padding、边框border、外边距margin四部分组成。这是理解整个CSS布局的基础因为宽度、高度、间距、对齐这些概念几乎全都在盒子模型上展开。我最喜欢用一个生活类比内容区是房间本身padding是房间墙壁的厚度border是墙上的装饰涂料层margin就是两栋房子之间的间距。调节padding能改变“室内”空间调节margin调整房子之间的距离改变border则会影响整个盒子的最终占位。房间大了墙厚了或者外墙漆厚了一圈都会影响这栋房子到底占了多少地。5.2 标准盒模型与border-box的切换标准盒模型下width和height只代表内容区的尺寸不包含padding和border。假设一个div设了width: 200px再加padding: 20px和border: 5px最终占据的宽度是200 202 52 250px。这个算术不算难但问题在于你写布局时经常需要心算实际占位尤其在并列多个盒子时一个几像素的偏差就可能把布局挤破。解决方式是把全局切换为border-box让width和height包含padding和border*, *::before, *::after { box-sizing: border-box; }这一行几乎是现代项目的标配。好处是你写width: 200px那么真实占位就是200px含padding和bordermargin另算。我在实际开发中很少看到哪套代码还在用标准盒模型做全局设置除非是老项目改造。5.3 margin与padding的核心区别与合并问题入门最常见的问题是分不清margin和padding。记住一句话padding是盒子内部的填充会把背景色和边框撑开margin是盒子外的间距透明且只影响位置。调间距时怎么选如果需要让元素与相邻元素分开用margin如果想增加内容和元素边缘之间的距离用padding。另一个必须知道的坑是margin合并margin collapsing垂直方向上相邻两个元素的margin不会相加而是取较大值。比如上面元素margin-bottom: 40px下面元素margin-top: 30px最终间距是40px而不是70px。很多新手调半天发现间距跟预期不一致多半就是这个原因。解决办法也很简单只在一边设置margin别上下都加或者用父元素的padding、Flex/Grid的gap替代。水平方向上则没有合并问题。5.4 用DevTools把盒子模型“看穿”学盒子模型最有效的工具不是背概念而是打开浏览器的开发者工具F12在Elements面板里选中一个元素右侧Computed区域基本会显示盒模型示意图中心是内容区往外依次是padding、border、margin鼠标悬停还能看到对应的色块。我教新手时一直强调遇到布局问题先按F12去看盒模型把这个图看明白了90%的间距问题都能自己找到原因。页面复杂时还可以在选中元素的布局面板里看到每个区域实际占了多少空间比自己反复改数值瞎猜可靠得多。提示如果DevTools里盒模型图显示某些区域是灰色说明对应属性没有被设置而不是值变成零。比如一个元素没有margin盒模型区域外圈会直接看不到。这个细节能帮你快速判断“没写”和“写了但值无效”的区别。6. 入门实战一个典型卡片样式从零搭建6.1 实际需求与完整代码前面讲了不少概念这一节把它们串成一个完整小案例。假设现在要做一个文章列表页的卡片卡片包含缩略图、标题、摘要、一个“”的链接。要求页面看起来干净、舒适响应式先不追求。先写HTML结构结构本身只描述内容article classcard div classcard-thumb img srcthumb.jpg alt文章缩略图 /div div classcard-body h2 classcard-title这是一篇示例文章的标题/h2 p classcard-desc这里是文章摘要控制在两行以内超出部分用省略号表示这样列表看起来更工整。/p a classcard-link href#/a /div /article然后写CSS用类选择器控制细节.card { width: 360px; margin: 20px auto; background: #fff; border: 1px solid #eaecef; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .card-thumb img { width: 100%; display: block; } .card-body { padding: 16px; } .card-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin: 0 0 8px; } .card-desc { font-size: 14px; line-height: 1.6; color: #7f8c8d; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-link { font-size: 14px; color: #3498db; text-decoration: none; }这里面几乎包含了前几节讲过的所有知识点类选择器、盒模型padding、边框、背景与颜色、文本装饰、多行省略。你完全可以自己加一个:hover效果比如让链接变色、让卡片轻微上移体会一下伪类带来的交互反馈。6.2 为什么这个结构算“优雅”类名与样式分离的思路很多初学者写完效果会把class命名得乱七八糟或者把样式写成一大串内联。这个案例想传达一个思路HTML负责内容结构类名描述“这是什么”CSS负责“长什么样”。card-title、card-desc这类名字即使过两三个月再维护也能一眼看出哪个类管什么。实际开发中还会有“局部状态”的需求。比如某张卡片需要特殊底色我会加一个修饰类classcard card--featured然后在CSS里追加.card--featured { background: #f0f8ff; border-left: 4px solid #3498db; }类名上双连字符是BEM命名法的一种约定。好处是不需要为简单需求写重复代码也避免用内联样式救急。这不是高深技巧就是“语义化命名加状态修饰”的组合但对后期维护的帮助非常大。6.3 入门期最常踩的6个坑我几乎每个都见过带过几轮新人的经验告诉我入门期最容易反复踩的坑就下面这几个有些我当年也踩过明明写了CSS页面却完全没变化。先按F12看Elements检查样式是否真的被加载再看link路径是不是写错了。文件路径错误是最常见的原因特别是CSS文件放在子目录时要用相对路径仔细核对。类选择器写成.news-list但HTML里写的是news-list漏了一个点。这类小错误靠代码编辑器的语法高亮一般能很快发现。修改了CSS文件浏览器刷新没生效。开发阶段直接用CtrlF5强刷文件修改频繁的话可以用Live Server这类工具保存即自动刷新。不要用id做样式。id的特异性太高后面写类想覆盖会很痛苦除非你真的需要高优先级特殊规则。全局重置不要直接写* { margin: 0; padding: 0; }在复杂项目里会影响第三方组件的内部间距。建议用Normalize.css或者更克制的重置写法只重置你没打算留默认值的标签。不要过早引入CSS自动化和工程化工具。先把原生CSS写熟你才能理解工具到底在解决什么问题否则遇到坑都不知道是自己写错了还是工具配置错了。7. 从part1到part2接下来该学什么这一篇里我把CSS的定位、三种引入方式、核心选择器、字体文本属性和盒子模型捋了一遍。这些都是地基中的地基。接下来的part2我打算写布局相关的知识点浮动与清除浮动、Flex布局的常用套路、Grid网格的基础用法以及热门搜索里提到的“css变形梯形”、“css涟漪光圈扩散”、“css动态相册纯代码”这类特效背后的原理。特效看起来炫但它们的底层都是盒模型、选择器、背景和变换属性的组合基础不牢特效只会抄而不会改。先想清楚一件事再往深学CSS不是一个需要“背”的语言它是需要“用”的语言。你花一天把选择器和盒模型读熟了不如花一下午写出三五个带样式的页面遇到问题再回过头查。学习节奏上我建议把本篇的每个代码例子都手动敲一遍先不要直接复制敲错一次再改对比连续看十遍文档都记得牢。这个道理听着朴素但真的管用。等你把布局和Flex练熟再回头看今天这些基础会感觉一切都变得顺理成章。现在去写一个属于你自己的小页面吧。