CSS - 快速指南

歡迎，有志於網頁開發的您！今天，我們將深入探索CSS的多彩世界。請繫好安全帶，因為我們即將踏上一段將永久改變您對網站看法的旅程！

CSS - Quick Guide

什麼是CSS？

CSS，或稱為層叠樣式表（Cascading Style Sheets），就像是網絡世界的時尚設計師。如果將HTML視為網站的骨架，那麼CSS就是皮膚、衣服和化妝。它讓網站看起來美麗且獨特。

想像您正在建造一個房子。HTML會是磚頭和灰泥，而CSS則是油漆、壁紙和家具。它將一個平淡的結構轉變成了一個家。

讓我們從一個簡單的例子開始：

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

這段CSS代碼告訴瀏覽器將整個頁面塗上淺灰色（#f0f0f0），並使用Arial作為默認字體。如果Arial不可用，它將使用任何無襯線字體。

CSS - 語法

CSS語法就像是一個食譜。它主要有兩部分：選擇器和聲明塊。

selector {
property: value;
}

選擇器指向您想要樣式化的HTML元素。聲明塊包含一個或多個用分號分隔的聲明。每個聲明包括一個CSS屬性名和一個值，用冒號分隔。

讓我們看一個更複雜的例子：

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

在這裡，我們 targeting 所有 <h1> 元素。我們將文字顏色設為藍色，將其大小設為24像素，並將其居中於頁面上。

CSS - 引入

將CSS引入您的HTML有三種方法：

內聯CSS
內部CSS
外部CSS

內聯CSS

內聯CSS直接通過 style 屬性應用於HTML元素。這就像給一個人提供時尚建議。

<p style="color: red; font-size: 16px;">這是一個紅色段落。</p>

內部CSS

內部CSS放置在HTML頁面的 <head> 部分中，位於 <style> 標籤內。這就像為派對上的每個人設定著裝規範。

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

外部CSS

外部CSS存儲在一個具有.css擴展名的單獨文件中。它通過 <link> 標籤與HTML文件鏈接。這就像創造一本每個人都可以參考的時尚雜誌。

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - 計量單位

CSS有幾種表示長度的單位。讓我們看看最常見的一些：

單位	描述
px	像素（1px = 1/96英寸）
%	百分比
em	相對於元素的font-size（2em意味著當前字體大小的兩倍）
rem	相對於根元素的font-size
vw	相對於視口寬度的1%
vh	相對於視口高度的1%

以下是一個使用不同單位的例子：

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - 顏色

CSS中的顏色可以通過以下幾種方式指定：

按名稱：red、blue、green等
按RGB值：rgb(255, 0, 0)代表紅色
按十六進制代碼：#FF0000代表紅色

讓我們看看這些是如何使用的：

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - 背景圖

背景可以讓您的網站更加突出。您可以設置背景顏色、圖像，或者兩者皆可！

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

這段CSS設置了一個淺灰色背景，添加了一個居中的圖像，確保圖像不重複，並讓它覆蓋整個視口。

CSS - 字體

字體對於可讀性和風格至關重要。以下是如何設置字體的方法：

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

這將Helvetica設為首選字體，Arial和任何無襯線字體為備選。它還將大小設為16像素，重量設為正常，風格設為斜體。

CSS - 文本

文本屬性控制文本的顯示方式：

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

這段CSS將文本顏色設為深灰色，對齊方式設為對齊，文本裝飾設為下劃線，文本轉換設為大寫，行高設為正常行高的1.5倍。

CSS - 使用圖像

圖像可以像樣式化任何其他元素一樣樣式化：

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

這會使圖像響應式（最多100%寬度，最高500px），保持其縱橫比，並給它一個圓形的外觀。

CSS - 链接

链接可以根據其狀態進行不同的樣式化：

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

這會將鏈接顏色設為藍色，移除下劃線，將其在滑鼠悬停時顏色設為紅色並添加下劃線，並將已訪問的鏈接顏色設為紫色。

記住，CSS是關於創造力和實驗的。不要害怕嘗試不同的屬性和值。您練習得越多，就越擅長創建有吸引力且響應式的網頁設計。快樂編程！

Credits: Image by storyset