网页设计，仰赖HTML 和CSS 两种不同的语言。HTML 处理内容，CSS 则定义内容呈现，各司其职。而在现代网页设计工作、如一个大型开发专案中，我们通常也会看到有工程师专注处理网站内容与结构、设计师则处理网站的设计与呈现。本文将协助你开始使用CSS、理解CSS 怎么连结HTML 文件、认识CSS 语法规则；也了解怎么开始练基本功，踏出网页设计的第一步。
1
在CSS 和HTML 分工前
CSS 问世前（-1996），网页开发者其实偏好用HTML 标签的属性来指派样式。例如：
<p><font size="+3" color="red"><b>一段文字</b></font></p>这样做衍生不少问题，例如让网页内容包覆过多的标签、程式码变得不好阅读。这对人或搜寻引擎都不友善，但其中最大的影响，是让网站维护变得非常困难。
试想想以下这个例子：我们的网页里有10 个<h4></h4>大小的副标题。
<h4><font size="+3" color="blue"><b>副标题一</b></font></h4><h4><font size="+3" color="blue"><b>副标题二</b></font></h4>………<h4><font size="+3" color="blue"><b>副标题十</b></font></h4>
但若我们有天觉得副标题用蓝色（blue）不够抢眼，想改成橘色，那我们就要把那10 个副标题一个个找出来修改。这种反覆的修改工作，容易出错，也会严重影响到工程师的生活水平。
2
CSS 和HTML 的分工
CSS 是专为定义网页版面设计（layout）而发明，透过CSS，我们能指定文件中各项HTML 元件的视觉样式。CSS 全名是Cascading Style Sheets，阶层样式表。阶层式（cascading）指的是，我们可在同一个元件上套用不同样式，而样式与样式间则存在相对的阶层关系。
由于CSS 专注在外貌的设定，使得HTML 能专注于文件结构，最能让网页原始码文件干净俐落。CSS 和HTML 的分工，是现代网路开发流行的设计原则（Separation of presentation and content）之一。
你可以想像一下HTML、CSS 和浏览器之间的对话。HTML 会说：「这是一个标题。」而CSS 会和浏览器则会补充：「这个标题很大，请放在正中间、请使用显眼的黑色。」
3
CSS 语法规则
以这段CSS 为例：
h1 {color: #ff6600;}
这段是一个CSS 宣告的长相：
选择器(selector)定义你的样式对谁有作用，它对应的可能是HTML 标签名称或者是class 和id 属性，我们在后面会再介绍选择器。 { }：大括号包围了一个宣告区域，任何写在这个区域里的设定，会对文件里所有的<h1></h1> 标签起作用。 属性与值：在图例中，我们宣告选择器，也就是<h1></h1> 的「文字颜色」(color) 属性的值是#ff6600。请注意CSS 是用冒号( : ) 而非等号(=) 来设定。 每条宣告用分号( ; )隔开
那这段CSS 宣告要放在哪里呢？
最好的方式，是独立在另一个叫「style.css」的档案里，再将档案引入HTML 文件，我们建议你总是使用这种方式来处理你的样式表，但在这里我们还是和你做完整的介绍：
内嵌于style 属性
<p style="color: red; font-size: 10pt;">一段文字</p>这种宣告方式只会影响到这一个标签，而不是所有的<p></p>。这是一个很简便的作法，但CSS 宣告混合在HTML 结构中，无法进行管理。你可能会在写blog 时偶尔不得不这么做(因为你无法在别人家的平台上开新档案)。
在HTML 内嵌STYLE 标签，其效果比较可以从下图看得出来，左边是用Sublime 编辑器在HTML 里先写好，文字是红色与文字30pt 大。
标头里的style 标签
<head><title> CSS 宣告</title><style>p { color: black; font-size: 10pt;}</style></head>
这样做会让你影响到这份HTML 文件里所有的<p></p>，如果你的网站真的只有一张，这不失为一个快速的方法。然而，这样做同样有让语法变得冗长，以及在档案变多时维护困难的问题。当前的趋势是将HTML 和CSS 分开维护，因此，请你习惯建立外部档案来管理你的CSS 样式表。
外部档案(建议方法)
透过这个作法，你可以将整个网站的样式，统合到style.css这份文件里。然后在所有的HTML 文件标头里加上<link rel="stylesheet" href="style.css">。再次强调，这种作法是业界的当前趋势。
让我们来认识一下引入外部档案的HTML 标签：
-
<link>是一种「后设元素」(meta element)只能放在标头里，他可以载入外部档案。所以浏览器读取到这一行时，就会自动载入CSS 文件的全部内容。
-
rel='stylesheet'告诉文件载入的资源是样式表，所以浏览器就知道要用读CSS 的方式去处理载入的内容。
-
href='style.css' href属性和<a></a> 标签时的用法一样，描述路径，让浏览器找得到档案。
多重选择
你可以连结宣告多个CSS 设定：
h1 {font-family: "Helvetica", "Arial", sans-serif; /* 指定字型*/color: green;}h2 {font-family: "Helvetica", "Arial", sans-serif;color: blue;}
font-family 指定字型的意思，这边设定的字型要以大多浏览器都相容支援的字型为主。
但在这里，有没有发现字型(font) 那一行重覆在h1 和h2 出现？也就是说，<h1></h1> 与<h2></h2> 的字型其实是一样，只有文字颜色(font color) 不一样。如果你总是这样写，当我们需要改变<h1></h1> 与<h2></h2> 的字型是，很容易就会改了这边、漏了那边。所以，你需要学习做整理和合并：
h1, h2 {font-family: "Helvetica", "Arial", sans-serif;}h1 {color: green;}h2 {color: blue;}
如此一来你就能统一管理h1 和h2 的字型了！
4
CSS 基本功：理解浏览器预设样式
很多人会觉得学CSS 就是要写出很多厉害的样式。但其实，每家浏览器都有提供的预设样式，所以也不用太过担心。只是，基础简朴的网页早已不能满足现在人的需求，所以我们会需要渐渐开发更多的CSS 属性和撰写技巧。
我们写的HTML/CSS 是在浏览器里，在你撰写任何样式表之前，Blink、 Gecko、 WebKit 等各大浏览器引擎都有在W3C 定义的标准 之上，提供预设样式( 下图截取自Browser Default Styles网站)。
故在钻研更多切版技巧前，一定要先理解浏览器的预设样式。例如，认识各HTML 元素在浏览器里的预设行为，了解：div 会占掉一整列、 span 乖乖包覆内容、ul 前面会有一个黑圆点等等。这才能更加理解，我们正学习的属性是在修改什么、前端工程师为什么需要面对跨浏览器兼容性问题。
5
CSS 基本功：「由大到小，由外而内」的架构
「看一招、学一招」是CSS 能力养成中普遍的路径，然而这也会让部分学习者感受到学习似乎有些零碎、松散或容易迷失在玲琅满目的属性里。以下归纳出CSS 的学习与实作架构。
此框架的核心理念是将页面「由大而小、由外而内」地降维拆分，并基本上将页面拆分成四个层级：
-
排版层级
-
区块层级
-
内容层级
-
动画层级
虽然动画层级的特效往往令人更目眩神迷，不过扎实的CSS 学习应从基本的元素排版定位开始掌握。这四个层级基本上可以涵盖一个页面样式所需要的所有CSS 属性类型。
如果你有与本文相关问题可以后台发消息，欢迎点分享、收藏、点赞、在看。
发表评论