老板让网页“穿件衣服”——CSS 到底是啥？

11-25 93 0 0

【总览】

阅读提示：800 字左右，厕所时间足够；读完还不会，你来打我，我躲。

一、给网页“套衣服”的三种姿势

姿势	写法	场景	吐槽
行内样式	`<p style="color:red;">`	临时救急	好比用马克笔在白衬衫上写“我很潮”，洗一次掉一次。
内部样式	`<style>p{color:red;}</style>`	单页 Demo	自家穿睡衣，出门就尴尬。
外部样式	`<link rel="stylesheet" href="cool.css">`	正规项目	集体宿舍统一制服，换主题一秒换装，老板都说好。

记住：
“行内”像泡面，快但伤身；
“内部”像外卖，凑合能吃；
“外部”像自己做饭，洗完锅你能吃一辈子。

二、人生第一个 CSS 例子

把“Hello World”染成社交牛逼症红：

<!-- index.html -->
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

/* style.css */
h1 {
  color: #ff0055;          /* 社交牛逼红 */
  font-size: 3rem;         /* 大到老板能看见 */
  text-align: center;      /* 居中是政治正确 */
  margin-top: 42vh;        /* 垂直居中，比 42 号鞋码还稳 */
}

两步走：

把两段代码分别存成 index.html 和 style.css 扔同一文件夹；
双击 index.html，看到一片红，说明你和 CSS 握手成功。

三、浏览器究竟干了啥？

它拿到 HTML 后，一边解析标签，一边翻 CSS 小抄：
“哦，h1 要涂成 #ff0055，字号 3rem……”
然后渲染引擎像刷墙一样瞬间给你上色。
整个过程比你关掉“广告跳过”还快。

四、常见坑先打预防针

文件路径写错：href="sytle.css"，多打少打一个字母，样式全军覆没。
缓存怪：改完 CSS 刷新没变化？Ctrl+F5 强制刷新，或者按住 Shift 点刷新，让缓存滚犊子。
拼写癌：colour 是英式英语，CSS 只认 color，少写个 u 能折腾半小时。

五、下集预告

恭喜你，衣服已经套上了，但目前还是“全员统一校服”。
下一篇《选择器：在 HTML 里精准点外卖》，教你只给“第二个段落”加辣，不给“第一个段落”放盐。
别走开，笑点与干货齐飞，系列文共长天一色。

彩蛋——读者作业

把今天的例子改成“原谅绿”，截图发评论区，让大伙见证你人生的第一顶绿帽（bushi）。
完成的小伙伴，下一篇文里我会把你的 ID 挂在“感谢墙”，信我，很拉风！

快来点个赞吧

编程知识