认识 CSS
CSS ( Cascading Style Sheets ) 是一种用于网页设计的样式语言，可以控制网页的外观和版面，让网页呈现出美观且结构清晰的效果，这篇教学里将会探讨什么是 CSS、相关发展历程、特色以及对响应式设计的影响。最后还会用一个简单的范例，实际撰写第一支 CSS 程序。
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
CSS 是什么？
CSS 是 Cascading Style Sheets 的缩写，又称作层叠样式表、阶层式样式表，是一种用于“控制网页外观和布局的样式表语言”，透过 CSS，可以控制网页的字体、颜色、边框、背景等设计风格，并且将样式套用到网页的不同元素，进而精准控制网页的视觉呈现，使网页更具吸引力和互动性。
虽然 CSS 扮演着网页视觉风格和排版的重要角色，但 CSS 无法独立使用，必须与 HTML 搭配，才能发挥最大的功能。
CSS 的发展历程、版本演进
CSS 的发展历程可以追溯到 1994 年，由哈肯·维姆·莱 ( Håkon Wium Lie ) 提出了 CSS 的最初规划，虽然当时已经有一些样式表语言的架构，但 CSS 是第一个含有“层叠”概念的样式语言，随着时间的推移，CSS 不断发展并推出了多个版本，以下是 CSS 的版本演进：
- CSS1 ( 1996 )：CSS 的第一个正式版本，定义了基本的样式属性和选择器，能够对网页进行基本的样式设定。
- CSS2 ( 1998 )：进一步扩展样式的功能，支援更多的版面设计技巧，并加入了更多的属性、选择器和媒体查询 ( Media Queries ) 概念，使网页能够根据不同的输出设备进行适应性调整。
- CSS3 ( 2001 年至今 )：目前最新的 CSS 版本，进一步扩展样式的功能和选择器的范围，引入许多新的模块，如弹性盒子 ( Flexbox )、方格布局 ( Grid Layout )、动画 ( Animation ) 等，使得网页设计更加灵活和丰富。
- CSS4 ( 开发中 )：尚未正式推出，预计将继续扩展 CSS 的功能和选择器，并加强对响应式设计的支援。
CSS 和 HTML、JavaScript 的关系
CSS、HTML 和 JavaScript 是网页开发的三大核心技术，各自负责不同的任务，并相互协作以实现完整的网页功能：
- HTML：负责“定义网页的结构和内容”，使用标签来描述网页中的不同元素，可想像成静止的“全裸人体”。
- CSS：负责“控制网页的外观和版面”，使用选择器和属性来定义 HTML 里元素的样式，如颜色、字体、边框等，可想像成替全裸的人体加上“肤色、发色、化妆、衣物...等”装扮。
- JavaScript：负责“实现网页的动态效果和互动性”，透过操作 HTML 和 CSS，实现网页的互动功能或改变网页元素的外观和行为，可想像成赋予人体“认知、社交、互动”等能力。
CSS 的特色
CSS 有下列几个特色：
- 分离性：CSS 可以将网页的样式和内容分离，使得网页设计更加模组化和可维护。
- 阶层性：CSS 使用层叠样式表的概念，允许开发者为不同的元素定义不同的样式，并透过嵌套和继承的方式来控制样式的层级。
- 可重用性：CSS 提供样式的重用机制，可以将相同的样式套用到多个元素上，减少程序码的重复性。
- 灵活性：CSS 提供丰富的样式属性和选择器，可以实现各种不同的设计效果。
CSS 对于响应式设计的影响
响应式设计是一种能够“适应不同设备和屏幕尺寸”的网页设计方法。CSS 在响应式设计中有着非常着重要的作用，透过媒体查询 ( Media Queries ) 和弹性布局 ( Flexbox ) 等技术，就能根据不同的设备和屏幕尺寸，自动调整网页的外观和排版，以提供更好的用户体验。
浏览器对 CSS 支援度
大多数现代浏览器 ( Chrome、Safari、Edge、Firefox 等 ) 都支援最新的 CSS3 标准，并提供广泛的功能和属性支援，但旧版的浏览器 ( IE 等 ) 可能不完全支援最新的 CSS 功能，这也常导致在不同浏览器上显示的外观有所差异，下方网站可以详细查询浏览器对于 CSS 各个功能的支援度：
点击或出入要查询的功能名称，就能看见浏览器对于该功能的支援度，下方查询“CSS Flexible Box Layout Module”，可以看到大多数的浏览器都支援 ( 呈现绿色 )，只有少数旧版浏览器不支援 ( 呈现红色或黄绿色 )。
撰写第一个 CSS 程序
以下是一个简单的 CSS 程序范例，程序里使用了 CSS 的选择器 h1 和 p，分别设定标题和段落元素的颜色和字体大小。
HTML 教学参考：HTML 教学
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS 區塊 */
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h1>STEAM 教育學習網 CSS 測試</h1>
<p>這是一個測試的網頁。</p>
</body>
</html>
将范例程序码复制，贴到线上网页编辑器里 ( 例如 JSBin )，就会看见蓝色标题和红色的段落文字。
小结
CSS 是网页开发的三大核心技术之一，举凡所有的网页设计或网页开发，一定会需要使用 CSS 进行开发，希望这篇文章可以让大家初步认识 CSS 的重要性和应用，并激发大家对 CSS 的兴趣和探索的欲望。
微信扫码关注
抖音扫码关注