大家好，我是专栏作者XXX。昨天咱们用HTML搭建了"个人介绍页"的骨架，不少同学在评论区打卡时说"页面能显示但太朴素了，像毛坯房"------这就对了！HTML负责搭骨架，今天要学的CSS才是给网页"刷墙、铺地板、摆家具"的装修师。掌握今天的5大核心技巧，就能把昨天的毛坯房变成精装修，15分钟就能看到立竿见影的效果！
先回顾下咱们的"盖房理论"：HTML是钢筋骨架，CSS是装修设计，JS是水电系统。没有CSS的网页，就像没刷墙、没铺地板的房子，能住但不美观；而好的CSS能让网页颜值翻倍，甚至直接影响用户体验------这也是企业招前端时必看的核心能力之一。今天全程实操，不讲复杂理论，核心目标就是：用CSS给昨天的个人介绍页上色、调布局、改字体，让它美观又规整。
在开始实操前，先解决新手对CSS的3个常见疑问，搞懂这些再学，效率会翻倍。
一、新手必懂：CSS到底是什么？3个核心问题解答
很多新手刚接触CSS会被"选择器""样式表"这些词绕晕，其实CSS比HTML还简单，本质就是"给HTML标签设置样式"的工具。先花5分钟搞懂这3个问题，后续实操更顺畅。
1. CSS的核心作用：控制HTML的"外观"
CSS的全称是"层叠样式表"，核心作用就是定义HTML元素的外观：比如给标题设置红色字体、给段落设置16号字、给图片设置圆角、给页面设置背景色等。简单说，HTML负责"有什么"，CSS负责"长什么样"，两者分工明确，这也是前端开发的"关注点分离"原则------后续修改样式时，不用动HTML结构，直接改CSS就行。
举个例子：昨天用<h1>写的"我的个人主页"是默认的黑色大号加粗字，用CSS只需一行代码，就能把它改成蓝色、24号字、居中显示，这就是CSS的魔力。
2. CSS的3种引入方式：新手先掌握"内部样式表"
CSS要作用于HTML，必须通过"引入方式"关联起来，新手阶段先重点掌握"内部样式表"，其他两种后续再学。3种引入方式对比：
-
行内样式表：直接在HTML标签内写样式，格式为<标签 style="样式1:值1;样式2:值2;">。优点是见效快，缺点是样式和标签绑定，修改麻烦，适合临时测试。比如<h1 style="color:red;">我的标题</h1>。
-
内部样式表：在HTML的<head>标签内写<style>标签，所有样式都写在<style>里。优点是样式集中管理，只作用于当前页面，适合单页面开发，新手首选。
-
外部样式表：新建单独的.css文件写样式，再用<link>标签引入HTML。优点是样式可复用多个页面，适合多页面项目，后续学项目时会重点用。
新手建议：今天实操用"内部样式表"，把样式写在<head>里的<style>标签内，既能集中管理，又能快速看到效果，避免行内样式的混乱。
3. CSS的基本语法："选择器+样式声明"
CSS的语法非常固定，只有两部分："选择器"和"样式声明"，格式如下：
css
选择器 { 样式属性1: 属性值1; 样式属性2: 属性值2; /* 注释：样式之间用分号结尾，冒号后加空格更易读 */ }关键说明：
-
选择器：告诉CSS"要给哪个HTML标签设置样式"，比如"h1"就是选择所有<h1>标签，"p"就是选择所有<p>标签。
-
样式声明：放在大括号里，由"属性:值"组成，比如"color:red"表示"颜色为红色"，"font-size:16px"表示"字体大小为16像素"。
举个完整例子：给所有<h1>标签设置红色、24号字、居中显示，CSS代码就是：
css
h1 { color: red; font-size: 24px; text-align: center; }是不是很简单？接下来咱们学5个核心技巧，直接用到昨天的页面上。
二、第3天核心实操：5大CSS技巧美化个人介绍页
今天咱们重点掌握5个最常用的CSS技巧，覆盖"字体样式、颜色背景、边距间距、图片美化、布局对齐"，这些技巧能解决80%的基础美化需求。实操前，先打开昨天保存的"index.html"文件，在<head>标签里添加<style>标签（内部样式表），所有样式都写在这里面。
html
<head> <meta charset="UTF-8"> <title>我的个人主页</title> <style> /* 这里写今天的所有CSS样式 */ </style> </head>技巧1：字体样式控制------让文字更美观易读
网页的文字是用户最关注的内容，字体样式直接影响阅读体验。核心用到4个属性：font-family（字体）、font-size（字号）、font-weight（粗细）、color（颜色）。
实操目标：给页面所有文字统一设置字体，标题加粗居中，段落设置合适字号和颜色。
CSS代码及说明：
css
/* 选择所有body标签内的内容，统一字体（兼容性强） */ body { font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; /* 字体大小：16px是网页常用字号，line-height是行高（1.5倍字号更易读） */ font-size: 16px; line-height: 1.5; /* 文字颜色：用十六进制色值（#333是深灰色，比纯黑柔和） */ color: #333; } /* 选择所有h1标签（页面主标题） */ h1 { font-size: 28px; /* 比默认大一点 */ font-weight: 700; /* 700是加粗，400是正常 */ color: #2c3e50; /* 深蓝色，更醒目 */ text-align: center; /* 文字居中 */ margin-bottom: 10px; /* 底部留10px空白，和下面内容分开 */ } /* 选择所有h2标签（二级标题，如"个人信息""兴趣爱好"） */ h2 { font-size: 22px; color: #3498db; /* 浅蓝色 */ border-left: 4px solid #3498db; /* 左侧加蓝色竖线，更有设计感 */ padding-left: 10px; /* 文字和竖线之间留10px空白 */ margin-top: 20px; /* 顶部留20px空白 */ margin-bottom: 15px; /* 底部留15px空白 */ }效果预览：页面文字统一成微软雅黑，主标题居中加粗呈深蓝色，二级标题左侧有蓝色竖线，段落文字深灰易读，整体层次感更强。
新手踩坑：① 字体尽量选"微软雅黑、Arial"等系统自带字体，避免用户电脑没有该字体导致显示异常；② 颜色推荐用十六进制色值（如#333），可在"草料色值拾取器"网站取色；③ line-height行高建议设置为1.5-1.8倍，避免文字太挤。
技巧2：颜色与背景------给页面"刷墙铺地板"
单调的白色背景太乏味，给页面或区域加背景色/背景图，能瞬间提升颜值。核心用到background-color（背景色）、background（复合属性）。
实操目标：给页面整体加浅灰色背景，给头部和底部区域加深蓝色背景，文字变白。
CSS代码及说明：
css
/* 页面整体背景色（浅灰色，不刺眼） */ body { /* 之前的代码保留，新增背景色属性 */ background-color: #f5f7fa; /* 给页面加100px边距，让内容不贴边 */ padding: 0 100px; } /* 选择头部和底部的div（昨天用div划分了区域，今天给这些div加类名区分） */ /* 先给HTML中的头部和底部div加class属性：<div class="header"> 和 <div class="footer"> */ .header, .footer { background-color: #2c3e50; /* 深蓝色背景 */ color: #fff; /* 文字白色 */ padding: 20px; /* 内部留20px空白，内容不贴边 */ border-radius: 8px; /* 圆角，更柔和（默认是直角） */ } /* 底部文字居中 */ .footer { text-align: center; margin-top: 30px; /* 顶部留30px空白，和主体内容分开 */ }HTML修改提示：要给特定div设置样式，需要先给div加"类名"（class属性），比如头部div修改为：
html
<div class="header"> <h1>我的个人主页</h1> <p>前端学习者 | 100天拿offer实战课学员</p> <hr/> </div>效果预览：页面整体是浅灰色背景，头部和底部是深蓝色块，文字白色，圆角设计更显精致，不再是单调的白色页面。
技巧3：边距与间距------让页面布局更规整
新手做的页面常出现"内容挤在一起"的问题，这是因为没控制好"边距"。CSS的边距分两种：padding（内边距，标签内部内容和边框的距离）和margin（外边距，标签和其他标签的距离）。
实操目标：给主体内容区域加白色背景和内边距，控制各区域间距，避免拥挤。
CSS代码及说明：
css
/* 给主体内容的div加类名class="content"，统一设置样式 */ .content { background-color: #fff; /* 白色背景，和页面浅灰区分 */ padding: 30px; /* 内部上下左右都留30px空白 */ border-radius: 8px; /* 圆角 */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影，增加立体感 */ } /* 调整段落和列表的边距 */ p, ul, ol { margin-bottom: 15px; /* 底部留15px空白，和下一个元素分开 */ } /* 列表项间距 */ li { margin-bottom: 8px; }HTML修改提示：给昨天的"个人信息""兴趣爱好""学习计划"这三个div外面，再套一个大的div，加class="content"，比如：
html
<div class="content"> <div>/* 个人信息区域 */</div> <div>/* 兴趣爱好区域 */</div> <div>/* 学习计划区域 */</div> </div>效果预览：主体内容区域是白色卡片，带有轻微阴影，内部内容有足够空白，不再拥挤，布局更规整，有层次感。
记忆技巧：padding是"内边距"，像给盒子内部垫泡沫；margin是"外边距"，像给盒子之间留空隙。两者都能控制间距，根据需求选择。
技巧4：图片美化------让图片更有设计感
昨天插入的图片是直角，比较生硬，用CSS能快速实现圆角、边框、阴影等效果，让图片更精致。
实操目标：给个人照片加圆角、边框和阴影，控制图片位置。
CSS代码及说明：
html
/* 给图片加类名class="avatar" */ .avatar { width: 180px; /* 固定宽度 */ height: 180px; /* 固定高度 */ border-radius: 50%; /* 50%是圆形，30px是圆角矩形 */ border: 4px solid #fff; /* 白色边框 */ box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); /* 阴影，更立体 */ display: block; /* 把图片变成块级元素，方便居中 */ margin: 0 auto 20px; /* 上下留20px空白，左右自动（实现居中） */ object-fit: cover; /* 图片按比例缩放，避免变形（重要！） */ }HTML修改提示：给图片标签加class="avatar"，比如：
html
<img src="photo.jpg" alt="我的个人照片" class="avatar">效果预览：个人照片变成圆形，带有白色边框和阴影，居中显示，不再是生硬的直角矩形，设计感十足。
新手踩坑：设置固定宽高后图片容易变形，必须加"object-fit: cover;"，它会让图片按比例缩放并填充容器，只裁剪多余部分，保持图片不变形。
技巧5：链接样式优化------提升交互体验
默认的链接是蓝色下划线，比较单调，而且点击后颜色会变，用CSS能优化链接的"常态、 hover（鼠标悬停）、访问后"三种状态。
实操目标：去掉链接下划线，修改颜色，鼠标悬停时变色并加下划线。
CSS代码及说明：
css
/* 链接常态样式 */ a { color: #3498db; /* 浅蓝色 */ text-decoration: none; /* 去掉下划线 */ font-weight: 500; /* 稍微加粗 */ } /* 鼠标悬停时样式（hover是伪类，必须写在a后面） */ a:hover { color: #2980b9; /* 深一点的蓝色 */ text-decoration: underline; /* 显示下划线，提示可点击 */ } /* 访问过的链接样式 */ a:visited { color: #9b59b6; /* 紫色，区分已访问和未访问 */ }效果预览：链接常态是浅蓝色无下划线，鼠标放上去变成深蓝色并显示下划线，访问过的链接变成紫色，交互体验更清晰。
三、实战：整合所有样式，完成"精装修"个人介绍页
现在咱们把上面的5个技巧整合起来，完整的代码如下，直接替换昨天的index.html文件即可，跟着做一遍，感受从"毛坯"到"精装"的变化！
完整HTML代码（含CSS）
html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的个人主页</title> <style> /* 1. 全局样式 */ body { font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #f5f7fa; padding: 0 100px; margin: 0; /* 清除浏览器默认边距 */ } /* 2. 标题样式 */ h1 { font-size: 28px; font-weight: 700; color: #2c3e50; text-align: center; margin-bottom: 10px; margin-top: 0; /* 清除默认边距 */ } h2 { font-size: 22px; color: #3498db; border-left: 4px solid #3498db; padding-left: 10px; margin-top: 20px; margin-bottom: 15px; } /* 3. 头部和底部样式 */ .header, .footer { background-color: #2c3e50; color: #fff; padding: 20px; border-radius: 8px; margin-top: 20px; } .footer { text-align: center; margin-top: 30px; margin-bottom: 20px; } /* 4. 主体内容样式 */ .content { background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); margin-top: 10px; } p, ul, ol { margin-bottom: 15px; margin-top: 0; } li { margin-bottom: 8px; } /* 5. 图片样式 */ .avatar { width: 180px; height: 180px; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); display: block; margin: 0 auto 20px; object-fit: cover; } /* 6. 链接样式 */ a { color: #3498db; text-decoration: none; font-weight: 500; } a:hover { color: #2980b9; text-decoration: underline; } a:visited { color: #9b59b6; } </style> </head> <body> <div class="header"> <h1>我的个人主页</h1> <p style="text-align: center;">前端学习者 | 100天拿offer实战课学员</p> </div> <div class="content"> <div> <h2>个人信息</h2> <img src="photo.jpg" alt="我的个人照片" class="avatar"> <p><strong>姓名：</strong>张三</p> <p><strong>年龄：</strong>25岁</p> <p><strong>简介：</strong>大家好，我是一名零基础前端学习者，正在跟着专栏系统学习前端技术。我坚信"实操为王"，每天坚持练习，希望100天后能具备企业入门能力，成功转行前端开发。<br/>我擅长沟通和团队协作，之前的工作经历让我养成了严谨的做事风格，相信能快速适应前端开发岗位。</p> </div> <div> <h2>我的兴趣爱好</h2> <ul> <li><strong>编程：</strong>每天练习HTML、CSS，目标掌握前端全栈技能</li> <li><strong>电影：</strong>喜欢科幻片和剧情片，比如《星际穿越》《肖申克的救赎》</li> <li><strong>运动：</strong>每周跑步3次，每次5公里，保持良好的学习状态</li> <li><strong>阅读：</strong>阅读技术书籍和散文，拓宽知识面</li> </ul> </div> <div> <h2>我的100天学习计划</h2> <ol> <li><strong>基础阶段（1-30天）：</strong>掌握HTML、CSS核心标签和样式，能独立搭建静态网页骨架并美化</li> <li><strong>进阶阶段（31-60天）：</strong>学习JavaScript核心语法，掌握DOM操作、事件处理等交互技能</li> <li><strong>实战阶段（61-100天）：</strong>学习Vue框架，完成2-3个企业级项目（比如电商首页、博客系统），整理简历准备面试</li> </ol> </div> <div> <h2>联系我</h2> <p>如果想和我交流学习经验，可以通过以下方式联系：</p> <ul> <li>微信：zhangsan123（备注：前端学习）</li> <li>CSDN博客：<a href="https://blog.csdn.net/zhangsan" target="_blank">张三的前端学习博客</a></li> <li>GitHub：<a href="https://github.com/zhangsan" target="_blank">查看我的学习代码</a></li> <li>邮箱：<a href="mailto:zhangsan@example.com">zhangsan@example.com</a></li> </ul> </div> </div> <div class="footer"> <p>© 2024 我的个人主页 | 100天前端拿offer实战课</p> <p>坚持实操，终将上岸！</p> </div> </body> </html>最终效果说明
用浏览器打开后，你会看到一个高颜值的个人介绍页：浅灰色页面背景，深蓝色头部和底部，白色主体卡片带有阴影，圆形个人照片居中显示，标题有层次感，链接有交互效果------这已经达到了简单静态网页的美化水平，比昨天的"毛坯房"提升了不止一个档次！
四、第3天作业：自定义美化，打造专属个人主页（20分钟）
今天的作业是"自定义修改样式"，目的是让大家熟练掌握CSS属性的调整方法，不要直接复制上面的代码，自己动手改，才能真正学会！
作业要求：
-
修改颜色方案：把页面的主色调从"蓝色"改成自己喜欢的颜色（比如绿色、橙色），需要修改的地方：h2标签的颜色和左边竖线、头部底部背景色、链接颜色等，用"草料色值拾取器"选色。
-
调整图片样式：把个人照片从"圆形"改成"圆角矩形"（border-radius改成30px），并调整边框颜色，使其和主色调匹配。
-
修改布局边距：调整主体内容的padding（比如改成20px或40px）、标题的margin，让页面布局更符合自己的审美。
-
添加背景图：给头部区域加一张浅色调的背景图（比如渐变图、抽象图），CSS属性为"background: url("bg.jpg") no-repeat center; background-size: cover;"，注意把图片放在和HTML同一文件夹，命名为bg.jpg。
-
预览并打卡：用浏览器预览修改后的页面，确保所有样式正常显示，截图发评论区打卡，说明自己修改了哪些样式（比如"我把主色调改成了绿色，图片改成了圆角矩形，头部加了背景图"）。
五、写在最后：CSS学习的3个关键思维
今天咱们用5个技巧就让网页颜值翻倍，很多同学可能会发现：CSS的核心不是死记属性，而是"观察效果、调整属性"的思维。最后分享3个CSS学习的关键思维，帮大家少走弯路：
-
思维1："试错式"学习，不要怕改。CSS属性很多，记不住没关系，比如想调整文字大小，就试"font-size: 18px;""font-size: 20px;"，看浏览器实时变化；想改颜色，就换不同的色值。Chrome开发者工具可以"实时修改样式"（右键元素→检查→Styles面板），改完直接看效果，比死记手册高效10倍。
-
思维2："模块化"样式，分类管理。写CSS时按"全局样式（body）→标题样式（h1、h2）→区域样式（header、content）→元素样式（img、a）"分类，像今天的代码一样，每部分加注释，后续修改时能快速找到对应代码，避免混乱。
-
思维3："参考式"学习，模仿优秀案例。看到喜欢的网页样式，比如某网站的按钮、卡片，用Chrome开发者工具"检查"它的CSS代码，模仿着写一遍，慢慢就积累了自己的样式库。前端开发不需要从零创造，模仿+修改是最快的成长方式。
今天的内容就到这里，咱们完成了从"骨架"到"精装修"的跨越，这是前端学习中非常有成就感的一步！很多同学刚开始改样式会觉得"怎么改都不好看"，这很正常，审美和技巧都是练出来的，多改几次就有感觉了。
明天咱们要学CSS的"进阶技巧"------Flex布局，它是前端最常用的布局方式，能轻松实现"居中对齐、左右布局、上下布局"，解决90%的布局问题，让你的网页布局更灵活！记得完成今天的作业并打卡，有任何样式问题（比如背景图不显示、颜色改了没效果）都可以留言，我会逐个回复。觉得有用的同学点个关注，咱们明天见！