iT邦幫忙

DAY 27
2

只是路過 HTML5 系列 第 27

●CSS使用方法

css
  • 分享至 

  • xImage
  •  

基本語法
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


上一篇
CSS組成
下一篇
●筆記關於值的相對單位
系列文
只是路過 HTML5 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言