9 walker studio-9w個人設計工作室
Google
.網頁設計接案業務
.加入GForce手機娛樂聯盟

.基礎HTML教學
.CSS樣式表教學
.基礎JAVASCRIPT教學
.JAVASCRIPT收集
.自製ASP程式下載
.色彩英文名對照
.16進位色碼對照一
.16進位色碼對照二
.可愛包子動畫圖庫
.MSN表情小圖示下載
.9W2U-1024X768桌布下載

.GForce付費手機遊戲
.免費遊戲房
.免費線上遊戲房
.免費檔案報報
.免費資源報報
.網站漫遊報報
.多國語言字母發音表

因網友留言內容
含成人色情內容
討論區即時停止運作
不便之處敬請見諒
● LOGO交換登錄
● 和我們連絡

 友站及其它連結
刑事警察局網際網路資訊站
591租屋網站
反毒害大聯盟
台灣認養地圖
KTzone日記, 論壇
::S.H.E 青春組織國際後援會::
CSS教學
CASCADING STYLE SHEET

01 何謂CSS語法? 07 表單特效
02 CSS語法的定義及元素樣式? 08 圖片影像特效
03 樣式性質分類 09 捲軸特效
04 CSS的宣告方式 10 CSS動態存取、控制樣式(限IE)
05 CSS連結特效 11 CSS參數表
06 CSS文字特效  

CSS語法的定義及元素樣式?

■CSS語法的定義:

CSS 的語法定義基本上如以下的形式:

<style>
slector {property:value; property:value; ....}
</style>


第一種 selector 方式是以指定 HTML 元素樣式的方式定義,比如 FONT、BODY、 TD...等等
第二種 selector 方式是以 CLASS 元素樣式的方式定義
第三種
selector 方式則是以 ID 樣式的方式定義
第四種
selector 方式則是以 inline 樣式的方式定義
第五種
selector 方式則是以 Contextual 樣式的方式定義

property 則是指要修改的性質,如 boder、font-color、font-size...等性質
value 則是給予 property 的值,如:P {color: #FF0000; }P {color: red; }
通常編輯時會把所有的定義,如以下的方式全放置於在 STYLE堶情A再放到 HEAD 內:


<head>
<style>
<!--
#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:0px;
border:1.5px solid green;
background-color:skyblue;
layer-background-color:skyblue;
font:bold 12px Verdana;
line-height:20px;
}
-->

</style>
</head>

或先編輯一個CSS的外在樣式檔,再於網頁中以下列方式包含入網頁中:


<head>
<link rel=stylesheet type="text/css" href="樣式檔名稱.css">
</head>

■CSS語法的元素樣式:

HTML元素樣式
說明:
在<style></style>中做設定,當slector為HTML元素名稱時,瀏覽器會以HTML元素本身的特性為依據,再加上此部分之HTML元素樣式設定,以增加HTML元素本有的特性,來呼喚使用。
設定格式:
HTML元素名稱 {property:value; property:value; ....}
使用格式:
<HTML元素名稱></HTML元素名稱>
CLASS元素樣式
說明:
在<style></style>中做設定,針對群族做樣式處理,以達到使用同一個HTML元素名稱時,有多個不同樣式設定的選擇。
設定格式:
HTML元素名稱.CLASS樣式名稱 {property:value; property:value; ..}
使用格式:
<HTML元素名稱 class="CLASS樣式名稱"></HTML元素名稱>
ID樣式
說明:
在<style></style>中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。
設定格式:
#ID樣式名稱 {property:value; property:value; ..}
使用格式:
<HTML元素名稱  id=ID樣式名稱></HTML元素名稱>
inline樣式
說明:
直接在HTML元素在中做設定,針對單一元素做樣式設定,以配會不同HTML元素名稱,皆可使用此樣式設定。
設定格式:
style=" property:value; property:value; .."
使用格式:
<HTML元素名稱  style="property:value property:value; .."></HTML元素名稱>
Contextual樣式
說明:
在<style></style>中做設定,針對元素階層做樣式設定。
設定格式:
父HTML元素名稱 子HTML元素名稱 { property:value; property:value; ..}
使用格式:
<父HTML元素名稱><子HTML元素名稱></子HTML元素名稱></父HTML元素名稱> 



本站內容屬私人所有 請勿任易轉載 如須轉載 請通知本站
本站所鏈結標題及鍊結內容 皆歸原權利人所有
網站內容如有任何侵權 亦請通知本站刪除 謝謝!

Power by 9 Walker Studio
本站內容屬私人所有 請勿任易轉載 如須轉載請通知本站