CSS是什么？跟SEO有相关吗？和HTML、JavaScript的关联？不只是前后端需要了解CSS，除了工程师，就连SEO从业人员也一定要稍微了解CSS。所以本篇文章主要想来分享一下CSS的一些简易基础知识，欢迎继续阅读跟我一起了解CSS是什么，以及CSS有哪些样式可以设定吧！
〈延伸阅读：好的SEO网站架构是什么？这样做SEO成功率才会高！〉
CSS是什么？做网站为什么一定会碰到CSS？
CSS全名为「Cascading Style Sheets」，中文称为「层叠样式表」或「串接样式表」。是网页设计中很重要的核心技术之一，另外两者是HTML、JavaScript。HTML是网站的「骨架」，用来设定标题、段落、图片位置等；而CSS则是网站的「皮肤」，用来设定版面间距、文字颜色大小等各种样式；JavaScript就是「肌肉」，是让画面可以改变、移动、互动的存在，而不是死死的一张网页。
所以其实三者缺一不可，只有浏览器预设的HTML样式，网站将会极为简陋且不适合阅读，讲直白一点，就是不会符合现代人的美感。若是缺乏 CSS样式的设计，所有网站看起来将会大同小异，无法建立品牌形象。
〈延伸阅读：什么是XML? 跟HTML有什么不一样？〉
〈延伸阅读：什么是 Javascript? 网站设计常用哪些 JavaScript 功能？〉
开始写CSS前要准备什么？
想要开始写CSS，不需要准备太复杂的设备，只要有电脑与正确的软件工具即可。但同时也要了解CSS的运作逻辑：「后写的会盖掉先写的，越贴近元素本身的设定优先权越高。」
浏览器读取程序码是从第一行往下读到最后一行，如果针对同一个标题，前面写红色、后面写蓝色，最后显示的一定是蓝色。另外，同一个元素上，写在标签里面的 style=""（行内样式），会盖掉写在 <style> 里或外部 CSS 档案的设定，样式写在哪、先后顺序如何，会直接决定网页最后的长相。
编辑器（Code Editor）
只要能编辑文字的编辑器都可以用，像是电脑内建的记事本也可以，但为了效率与除错的方便性，建议使用专业的程序码编辑器，像是Visual Studio Code (VS Code)，VS Code会有语法颜色标示，打错字还会变色提醒，也会自动带出属性建议，能够大幅减少写错程序码的机率，是专业工程师的必备工具。
浏览器（Browser）
推荐使用Google Chrome，Chrome内建了非常强大的「开发者工具（DevTools）」，按一下F12就能打开。这个工具可以直接看到网页上的每一个元素是用什么CSS写的，甚至可以直接在上面试改样式、调整大小，是解决版面跑版问题的神器。
一段CSS长什么样子？CSS基础语法入门
一段标准的CSS规则（Rule Set）结构如下：
选择器 {
属性: 值;
属性: 值;
}
-
选择器：要改的那个东西（例如：标题 h2、p）。
-
属性：要改什么特征（例如：颜色 color、字体大小font-size）。
-
值：改成什么样子（例如： red、16px）。
记得使用｛｝包住，并且在每一行写完都要加上分号「 ; 」，这是最容易忘记的地方，少了一个分号，后面的样式可能就会全部失效。
最常见的三种选择器：标签、class、id
想要精准控制网页元素，得先学会这三种抓取元素的方式：
-
标签选择器：直接抓 HTML 标签。例如写 p { color: black; }，网页里所有的段落文字都会变黑色。这范围太大，通常只用来设定全站最基础的样式。
-
class 选择器（类别）：是CSS最常用的选择器，在 HTML 里帮元素取个分类名 class="title"，CSS 里就写 .title，一个 class 可以重复用在很多不同元素上，方便管理，程序码也比较干净。
-
id 选择器：在 HTML 里写 id="header"，CSS 里写 #header，id 就像身份证字号，一个页面里只能出现一次，不能重复，id选择器限制多，通常只会用在独一无二的区块，像是最上方的选单列。
写好的CSS放哪里？一开始就要决定好！
写好的CSS 有三个位置可以放，放哪里很关键，不但会影响后续好不好修改，也会直接影响网站开启的速度，以下是CSS的主要有三种放置方式，搭配范例说明让你可以更清楚。
CSS写法1：外部样式表（External Stylesheet）
这是最标准也最推荐的做法，将所有样式规则写在一个副档名为 .css 的档案里（例如 style.css），再透过 HTML 的 <link> 标签带入这个档案。
这样做的好处是浏览器会把这个档案「存起来」（快取），当使用者点阅网站的其他页面时，不需要重新下载样式档，网站速度会变快，网站载入速度快、效能比较高分，Google 给的SEO分数自然就会比较高。
CSS写法示范： 在 HTML 的 <head> 里面加上这一行
<link rel="stylesheet" href="style.css">
在 style.css 档案里写：
H2 {
color: blue;
font-size: 24px;
}
CSS写法2：内嵌样式（Internal Stylesheet）
内嵌样式写法是将CSS写在 HTML 档案的 <head> 区块内，使用<style> 标签把样式码起来，这种写法通常用在「只有这一个页面需要样式」，不需要跟其他页面共用的情况，这种写法具备弹性与灵活，根据不同页面进行不同的微调。
CSS写法示范： 直接写在 HTML 档案里
<head>
<style>
body {
background-color: #f0f0f0;
}
.main-content {
width: 80%;
}
</style>
</head>
CSS写法3：行内样式（Inline Styles）
直接写在 HTML 的标签上面，透过 style 属性来控制。这种写法的方式比较繁琐且复杂，需要针对每一段进行设定，也因为样式跟结构混在一起，日后如果想要修改会非常麻烦，也会让 HTML 档案看起来没有那么干净。对 SEO 来说，过多的程序码会让爬虫读起来比较费力，除非是 JavaScript 动态控制或万不得已的情况，建议可以尽量避免，个人推荐可以使用第二种内嵌方式，统一写在一起，也比较方便修改。
CSS写法示范：直接写在标签
<p style="color: red; font-weight: bold;">
这是一段红色文字的CSS示范
</p>
如何写CSS？先了解CSS的网页样式
开始写CSS程序码之前，建议先熟悉「网页样式架构」的基本元素，其中包含了控制版面结构的「盒模型」，以及决定视觉呈现的「文字与颜色设定」…，下面会介绍常见的样式元素。
什么是盒模型？
什么是盒模型？就是让区块不要挤在一起的模组(模型)，网页上的每一个图片，每一段文字，在浏览器的逻辑里都是长方形的盒子(模型)，要排版就要先搞懂这个「盒子」的构造，就是「盒模型（Box Model）」，一个标准的CSS从内到外分为四层。
第一层Content（内容）
内容是CSS最重要的部分，用来显示文字、图片。
第二层：Padding（内距）
可以设定内容跟边框之间的留白，希望按钮大一点，文字不要贴边框可以调整这里。
第三层Border（边框）
边框可以设定粗细与颜色，是盒子的边缘线条。
第四层Margin (外距)
定义盒子跟其他元素之间的距离。想让两个区块分开，不要黏在一起，就是使用这个属性。
Margin与Padding的使用时机
很多时候版面看起来很挤，或是位置不对劲，通常是这两个属性混淆了。这里有一个简单的判断原则：「自己内部的空间用 padding，跟别人的距离用 margin」。设定得宜，版面才会清爽，使用者的阅读体验才会舒服。
文字与颜色：让网页看起来舒服又美观的关键
网站如果字太小、颜色太淡，使用者看得不舒服，看不了太久就会离开，网站的高跳出率对SEO是很大的伤害，如果有好的CSS设定美观、整体的文字与颜色，网站质感与使用者体验就会不一样，对网站的整体印象绝对是加分的。
-
font-size（字体大小）：font-size就是在设定字体的大小，不同标题的文字要有固定的大小字体之分，大小字要设定良好的字距，阅读起来会比较舒适且明确。
-
line-height（行高）：设定行与行之间的距离。这是让长篇文章变好读的关键，通常设定在字体大小的 1.5 倍左右最刚好，避免字与字上下黏在一起。
-
letter-spacing（字元间距）：设定字与字左右的距离。在标题或大字设计时，稍微把字拉开一点，视觉质感会立刻提升。
常用单位速解有哪些？px、rem与%的差异
写CSS的时候，数值单位跟属性名称一样关键。先弄清楚px、%还有rem的差别，才能精准还原设计稿，不会写出跑版的网页。
px（像素）
px是绝对单位，最直观也最死板。 写下16px就是16像素，不会因为萤幕解析度不同而改变。 这特性适合设定边框粗细，或是固定的装饰图案。 但在手机浏览时px常常会显得太小，也无法跟随浏览器设定自动缩放，阅读体验比较差。
rem（相对单位）：相对于根元素
rem是目前的主流，数值跟着网页根元素跑。 根元素html设定多少，rem就以那个数字为基准倍数。这种做法让网页能配合使用者的浏览器设定自动调整大小，符合无障碍网页规范，SEO分数也比较高。 文字大小跟间距很适合用rem。
%（百分比）：相对于父元素
%是相对单位，比例依照上一层容器的大小来决定。 要做RWD响应式网页一定会用到。 设定宽度50%，区块就会占容器的一半，不管萤幕变宽变窄都一样。 流动版面Fluid Layout主要就是靠百分比在控制。
CSS 常用样式功能总表
上述介绍了几种常见的CSS撰写会用到的资讯，那以下是整理出来的关键属性，方便你快速查询、对照使用的比较表：
CSS样式大全表格
| CSS属性/概念 | 中文名称 | 功能描述 |
|---|---|---|
| padding | 内距 | 内容与边框之间的空间 |
| margin | 外距 | 区块与区块之间的距离 |
| border | 边框 | 盒子的外框线条 |
| display | 显示模式 | 决定元素是区块、行内或弹性盒 |
| font-size | 字体大小 | 决定文字显示的大小 |
| font-weight | 字体粗细 | 设定文字粗体 |
| width / height | 宽度/高度 | 决定盒子的大小 |
| text-align | 文字对齐 | 靠左、置中或靠右 |
| line-height | 行高 | 文字行与行之间的垂直距离 |
| color | 文字颜色 | 设定文字的颜色 |
| background | 背景 | 设定背景色或图片 |
| width / height | 宽度 / 高度 | 设定元素的尺寸 |
| max-width | 最大宽度 | 限制元素最宽不能超过多少 |
| float | 浮动 | 让元素靠左或靠右，文字会绕着它 |
| clear | 清除浮动 | 解除 float 造成的影响 |
| border-radius | 圆角 | 让方块变成圆角或圆形 |
| box-shadow | 阴影 | 替元素加上阴影 |
（手机版表格可左右滑动）
RWD响应式设计入门
网站的行动装置流量比桌机高很多，RWD（Responsive Web Design，响应式网页设计）可以子适应载体大小，RWD早就是网站设计的标准配置，Google早就宣布没有RWD的网站，将会严重影响SEO排名。
〈延伸阅读：RWD响应式设计的制作特点〉
〈延伸阅读：RWD网页设计是什么意思？〉
RWD为什么可以自动调整网站大小？
RWD 网站设计可以做到「一个网站，适应所有装置」，就是因为透过使用CSS 技术，CSS 让网页能侦测使用者的萤幕宽度，自动调整图片大小、文字级距与版面配置。举例来说：RWD三个栏位的网站内容在桌机看是左右三格，但换到手机看网站时，RWD就会自动排列成「单栏式由上而下的布局」，RWD会自动重新排列网页资料。
RWD实作: 媒体查询(Media Queries)
语法如下：
@media (max-width: 768px) {
.column {
width: 100%;
}
}
程序码说明：
「当萤幕宽度小于或等于 768px（平板、大银幕手机），将 .column 类别宽度设定为 100%」就可以将不同尺寸的装置调整到「最佳化大小显示」。
养成写CSS的好习惯，从一开始就帮自己省麻烦
CSS程序码写得有点乱，当下可能会觉得没差，但如果过了两个月要修改时就会非常痛苦。建议你养成两个简单的写CSS好习惯，如此一来可以大幅降低维护成本，也能避免网站因为程序码太脏乱而变慢。
CSS好习惯1：命名要可以看名字就要知道它是做什么的
命名最忌讳用 .box1、.div2 这种毫无意义的代号，或是直接用颜色来命名（如 .red-button）。
可以思考看看为什么不建议用颜色？如果哪天设计改版要变成「蓝色」，结果程序码还叫 .red-button，这样将会造成维护上的大混乱，后续在使用时，也会有疑虑。
因此最好的方式是根据「功能」来命名。例如使用.btn-submit（送出按钮）。不管外观颜色怎么变，它的功能永远不会变。这不仅方便团队接手，也让搜寻引擎爬虫在理解网页结构时，可以透过有意义的class名称稍作辅助判断。
CSS好习惯２：善用注解分区，把几千行的程序码变成「有目录的书」
随着网站功能增加，CSS 档案很容易就会突破上千行。如果没有整理，要找一个按钮样式可能得花上好几分钟滑鼠滚轮。
建议多善用 CSS 的注解功能： /* 这里是页首 */。
把 Header、Footer、关于我们、产品列表等不同区块的程序码分开标示，就像帮书本加上目录一样，要找哪一区直接跳过去，在找寻时更快速方便，省下找寻的时间，结构清晰的程序码，未来比较容易维护，也可以避免写出重复语法，让档案可以轻量化，让网站载入速度（PageSpeed）更快，拿到更高的分数。
CSS跟SEO的关系！看得懂的版面，才有机会排得前面
别以为操作SEO只是塞塞关键字就可以排上搜寻引擎的前几名，网站的「体质、架构」好不好更是重要，而其中CSS就占了很大的因素。搜寻引擎的目标是提供使用者「最佳的搜寻体验」，而CSS正是打造优质体验的关键。
排版清楚、内容易读，搜寻引擎也比较喜欢
CSS 排版混乱，导致文字重叠、按钮太小无法点击、广告遮挡主要内容，都会被google演算法判定为「使用者体验不佳」进而影响排名。 透过 CSS 可以建立明确的标题 H1、H2、H3...，易于辨识的标题能帮助搜寻引擎快速理解网页内容的重点。
RWD、行动版体验与基本速度观念
搜寻引擎最重视的就是「手机版」的表现，网站没有针对手机的CSS 进行响应式优化(RWD)，像是「版面跑版」、「字体过小」、「点击位移」，对网站都会有结构上的扣分， CSS 写法也会影响 Google 「网站核心指标（Core Web Vitals）」：
-
LCP（最大内容绘制）：载入顺序错误，造成网站第一个最大档案拖慢显示速度， LCP 分数就会很低。
-
CLS（累积版面位移）：若图片或区块未设定好宽高，载入时画面会跳动，这会严重扣分。
〈延伸阅读：RWD网页设计并没有都一样！〉
〈延伸阅读：PageSpeed Insights (PSI) 是什么？ 对SEO有影响？〉
用CSS补强，不要用CSS把重要内容「藏」起来
在 SEO 操作中，绝对要避开一种被视为作弊的「黑帽手法」：利用 CSS 将关键字文字设定为 display: none（隐藏）或将文字颜色设定为与背景相同。这种试图欺骗爬虫的行为，一旦被演算法侦测到，网站将面临严重的惩罚甚至被从搜寻结果中除名。
正确的SEO策略，是利用CSS让重要资讯在视觉上更吸引人，引导使用者阅读与互动，进而提升停留时间与转换率，这才是运用CSS技术提升排名的正途。而达文西数位科技只做正确的SEO策略、经营，我们绝不操作黑帽SEO来获取短暂的流量与排名。
〈延伸阅读：黑帽SEO不可行，被Google抓到很严重啊〉
让专业能力，成为你经营SEO的强力助攻！
一个优秀的网站必须兼具「好看」与「好用」，CSS决定了网站的视觉高度，SEO决定了网站的市场能见度。如果说CSS是网站完美的「皮肤」，那么专业的SEO策略与经营就是让这层皮肤在市场聚光灯下被看见的关键。
如果你有网站设计的需求，欢迎与达文西数位科技联系，我们有丰富的网站设计经验、极具美感的风格设计、专业的SEO策略规划，可以帮助你从网站规划设计到上线经营，让你排上在竞争激烈的市场，保有一席之地。
〈延伸阅读：SEO是什么？SEO怎么做？教您如何过滤SEO公司，保证有用〉
〈延伸阅读：网站设计最重要的10件事，网页设计公司不会告诉你实话〉
(本文为达文西数位科技所有，严禁转载图文)
