基本語法
CSS屬性名:屬性值;
CSS 樣式語法主要是在做樣式的設定, 每一個 CSS 屬性即代表一種樣式,
故主要的語法即是在指定 CSS 屬性的值, 不分大小寫, 但習慣上都是用小寫
最簡單的使用方法即是在 HTML 標籤的 style 屬性中撰寫 CSS 語法
<DIV style="CSS屬性名:屬性值;">任意內容</DIV>
例如
<DIV style="color:yellow;">任意內容</DIV>
上面所說的 CSS 語法, 其中 color 代表的是 DIV 標籤中所有內容的前景色(簡單說就是字的顏色), 而 yellow 即是它的值, 代表黃色, 所以執行結果會看到字變黃色了
若只是寫一個樣式的話, 分號也可以不寫, 但若要一次指定多個 CSS 樣式, 就一定要用分號來分隔各個 CSS 屬性, 例如
<DIV style="CSS屬性名A:屬性值;CSS屬性名B:屬性值;">任意內容</DIV>
使用樣式名
上面寫在 style 屬性中的寫法, 只會影響該標籤內的內容而已,
假設有多個標籤需要設定同樣的樣式, 那麼每個標籤都去設定一次樣式,
顯然不是一個好的方法, 所以 CSS 提供了幾個更方便的方法,
其中一個就是使用樣式名, 也就是我們可以先定義一個樣式名,
並且定義這個樣式名具有哪些樣式, 如此, 只要套用這個樣式名的標籤,
即會具有這些樣式設定, 若你熟悉 word 的樣式功能的話, 其道理是相同的
定義樣式名的語法如下
.樣式名{
CSS屬性名A:屬性值;
CSS屬性名B:屬性值;
}
樣式名前面的那個【.】符號是必要的, 它用來代表後面的文字即是一個樣式名, 而 { } 內即可定義這個樣式名所具有的樣式, 可以設定多個 CSS 屬性
上面的語法要寫在哪裡呢?
1.寫在 STYLE 標籤內
2.寫在獨立的 CSS 檔, 再利用 LINK 標籤載入使用
STYLE 標籤的語法即是如下
<STYLE>
<!--
.樣式名a{
CSS屬性名A:屬性值;
CSS屬性名B:屬性值;
}
.樣式名b{
CSS屬性名B:屬性值;
CSS屬性名C:屬性值;
CSS屬性名D:屬性值;
}
-->
</STYLE>
STYLE 標籤就是用來寫 CSS 的地方, 所以直接將 CSS 語法寫在標籤內即可
另外, 為了避免不支援 CSS 的瀏覽器將 CSS 語法當成是要呈現在網頁上的內容, 故一般都會在 STYLE 標籤內先寫上 HTML 的註解符號(<!-- -->), 再把 CSS 語法寫在註解內, 如此不支援 CSS 的瀏覽器就會將它視為註解, 而支援 CSS 的瀏覽器則仍然能正常解讀
在定義好樣式名及其樣式後, 我們就可以利用標籤的 class 屬性來套用定義好的樣式
<DIV class="樣式名">任意內容</DIV>
例如
<HTML>
<HEAD>
<STYLE>
<!--
.redWords{
color:red;
}
.blueWords{
color:blue;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV class="redWords">這裡的字會是紅色</DIV>
<DIV class="redWords">這裡的字也是紅色</DIV>
<DIV class="blueWords">這裡的字會是藍色</DIV>
</BODY>
</HTML>
一般而言, 我們會將 STYLE 標籤寫在 HEAD 標籤內, 而 HEAD 標籤一般會寫在 BODY 標籤之前, 如此即可保證在套用樣式時此樣式定義已被瀏覽器所載入
可以寫在HTML語法中，會像這樣，把CSS寫在style=''之中，別忘了屬性和屬性之間要加上; 分隔。
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p>
也可以在頁頭中寫出CSS，在HTML頁頭的方式就像是這樣，那麼此網頁所有<div>和<div>中的屬性和值都會被改變。
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
當然了，你想讓多個網頁共用一個CSS也可以寫出獨立的CSS文件，副檔名是.css，修改href=""中的連結。
<<link rel=stylesheet type="text/css" href="external-stylesheet.css">>
單獨一個CSS文件，然後再中鏈接。比如
<link rel="stylesheet" type="text/css" src="css.css">
link標籤 導入css文件
style標籤 包含css樣式
style屬性 包含css樣式
來源:CSS基礎教學(1)--CSS基本語法
http://enjoywebtech.blogspot.tw/2008/05/css1-css.html
iThome鐵人賽
看影片追技術