何謂 CSS 呢?從維基百科偷一點點介紹給大家看看
層疊樣式表(英語:Cascading Style Sheets,縮寫:CSS;又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表)是一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言,由W3C定義和維護。目前最新版本是CSS2.1,為W3C的推薦標準。CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發中。
說白一點,就是替你的 HTML 的這張素顏的臉化點妝,加些變化。
使用 CSS 前先跟大家說明<div>
</div>
標籤,DIV 可以解釋為區塊
,用 DIV 標籤包起來的東西,瀏覽器會視為一個區塊,你可以將你的畫面分成很多區塊,並用 div 包起來,接著對各個區塊做 CSS 排版。
用條列方式整理出幾個重點給大家
不可以單獨使用,需與 HTML 共同協作。
<head>
</head>
之間用<style>
</style>
來寫 CSS,可對 HTML 做樣式的設定。
會使用 CSS 選取器(CSS Selector)來選取想做樣式的區塊。
<head>
<meta charset="UTF-8">
<title>no.11</title>
<style>
h1{
color: red;
}
</style>
</head>
以上語法在瀏覽器的畫面如下圖
除了寫在 head 裡,也可以 寫在另外檔案, 再用標籤嵌入 css 檔案
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
h1{
color: red;
}
h1
: 選取器。決定 HTML 裡什麼標籤會被影響接下來的設定(在這個範例中 h1 就是被改變的元素)color: red;
: 宣告(Declaration),就是要告訴 CSS 你要對 h1 做變紅色的改變。color
:屬性 (Properties),指定了這個原色的呈現樣貌red
:值(value),在冒號(:)之後,從眾多的可能樣式指定出一個出來。下回就來看更多 HTML+CSS 的搭配使用:)