CSS 基础

CSS 是层叠样式表，负责决定页面长什么样，把颜色、字号、位置这些呈现规则从 HTML 里分出来^[1]。做 SEO 的人关心它，有两条理由：样式挡住页面渲染，就挡住爬虫看到内容的速度；用样式藏文字或造假内容，会被判作弊。

样式与内容的分工

HTML 管结构，说明每块是什么；CSS 管呈现，说明每块长什么样^[1]。同一份 HTML 换一套 CSS，内容不变，样子全变。

因此爬虫从 HTML 取内容，CSS 本身不会被当成正文收录。样式文件再大，也不进正文索引。

CSS 的加载方式

• 外链：<link rel="stylesheet" href="style.css">，可缓存、可复用；
• 内联块：写在 <style> 里，直接嵌在 head 中；
• 行内：写在元素的 style 属性里，只作用于该元素。

外链与内联块都会阻塞渲染，页面要等它加载完才开始画。行内样式随 HTML 一起到达，不额外发起请求。

写坏 CSS 会不会影响收录

语法错误会让部分规则失效，页面样式错乱，内容本身仍在 HTML 里，收录通常不受影响。真正伤收录的是另外三种情况。

其一，用 display: none 藏关键词，或者把文字设成与背景同色，属于作弊。其二，在 robots.txt 里屏蔽 CSS 文件，爬虫拿不到样式，会误判页面布局与内容可见性^[2]。其三，用 CSS 背景图承载正文图片，图片与替代文本都不进索引^[3]。

与抓取和收录的关系

收录从抓取开始，百度把抓取概括为从互联网抓取网页、建立索引数据库、把索引库中的数据展现给用户^[4]。

抓取回来之后还有渲染一步。Google 会把页面加入渲染队列，执行 JavaScript、应用样式，再按渲染结果编入索引^[2]。样式加载慢，这一步就慢。

常见误用

• 用零号字、全透明或画面外定位藏关键词。
• 用背景图承载正文，图片和文字都没了。
• 在 robots.txt 里 Disallow 掉 CSS 文件。
• 样式写得过重，首屏迟迟不出现。

附录

参见

• 媒体查询
• 隐藏内容与 CSS
• Web 字体

参考资料

官方（境外）

1. 《CSS：层叠样式表》，MDN Web 文档，2025-11-10 更新。
2. 《了解 JavaScript SEO 基础知识》，Google 搜索中心，2026-03-05 更新。
3. 《Google 图片 SEO 最佳实践》，Google 搜索中心，2026-03-03 更新。

官方（国内）

4. 《百度搜索的工作原理》，百度搜索资源平台，2023-12-21 更新。

外部链接

无。