CSS基礎認識
 
 

CSS由來
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。
所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。
很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。

CSS的作用
CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。

需要的工具
編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。

 


　


插 入 c s s

 

插入CSS語法
<style type="text/css"></style> 是告訴瀏覽器，從此段開始都為CSS語法，而要插入CSS語法，
都在網頁中的<head>..和..</head>之間
例如以下方式
<html>
<head>
<style type="text/css">
標籤{定義該內容}
</style>
</head>
<body>
.....網頁內容
</body>
</html>

外部呼叫指令
要在網頁插入CSS也可以用到外部呼叫的指令
<link href="檔名.css"rel="stylesheet"type="text/css">

匯入指令
以另外一種方式，也就是直接將CSS檔案匯入在網頁中。
<style>@import url(檔名.css);</style>

 


　


網 頁 標 籤

 

了解網頁標籤
所謂的標籤，其實是很簡單的，別想的太難，
網頁標籤中都含有 <html> <head> <body> <font> <b> <a>
而 html head body 這三種就是一般的網頁型態格式
當然也是常見的標籤
而 font 就是控制字體
b 為粗體 a 就是常用的超連結
以上大概簡略以上常見到網頁的標籤
CSS其實很簡單
只要你懂得網頁的標籤
你就可以靈活應用操作CSS
所謂標籤跟定義該標籤的內容...簡單的說就如下
<style>
網頁標籤{定義內容}
</style>

改變字體大小
今天若我想在我的網頁中所有的文字都為9pt
那麼當然都用到最常用到的幾種標籤
以 <body> 為例
若我要宣告 <body>和</body> 的字體都為9pt
那麼...我可以如以下寫法
<style>body{font-size:9pt}</style>

改變字體顏色
改變body標籤的字體顏色，寫法如下
<style>body{color:red}</style>

改變字型
改變body標籤的所有字型，寫法如下
<style>body{font-family:新細明體}</style>

 



　


應 用 連 結

一般超連結
此為一般超連結的顏色，色碼可依自己喜好調整。
<style>a:link{color:#色碼}</style>

碰觸超連結
碰觸超連結，也就是當你的滑鼠游標移動到超連結上以後，他會產生何種顏色，以下色碼可依自己喜好調整。
<style>a:hover{color:#色碼}</style>

執行超連結
執行超連結，就是你的滑鼠按下超連結以後，他會產生何種顏色，以下色碼可依自己喜好調整。
<style>a:visited{color:#色碼}</style>

執行後的超連結
執行後的超連結，一個已經按過的連結，他所產生的顏色，色碼可依自己喜好調整。
<style>a:visited{color:#色碼}</style>

 


　


宣 告 方 法

 

宣告方法
所謂的宣告方法，其實就是設定該標籤的定義內容，而宣告當然以網頁標籤來作宣告囉，
例如....我想要我的網頁中的文字大小為9pt 而顏色色碼要為 #000000
但是此時...我還沒有說明我要定義哪種標籤，
如果我選擇的標籤為 table
table ← 這是什麼呢？
table它是表格的開頭
如果我要宣告他所有文字大小都為 9pt 色碼為 #000000 的話
我可以如下方式寫
<style>table{font-size:9pt;color:#000000}</style>
第一次看到這個也許不知道是什麼意思
其實他的意思很簡單
也就是網頁中 <table>..之間..</table>中的文字
都為 9pt大小 而顏色代碼為 #000000 的意思
如果上述還不懂，就拿以下的簡單表格表單來作示範，

<table border=1>
<tr>
<td>歡迎光臨</td>
</tr>
</table>

上面這段簡單的表格表單就是再歡迎光臨的外圍會有一個邊框表格，
而若我用了上述的CSS定義宣告table的文字大小
簡單的說..就是歡迎光臨這四個字會變成大小9pt 顏色代碼為 #000000的意思
看到這裡如果懂了，那麼你對CSS的了解又更深一步囉。

 


　


多 項 定 義

 

多項定義
多項定義呢，也就是如果我有許多設定要再同一個標籤中，
例如我以 body 這標籤來作定義，
我要<body>和</body>包起來的文字大小.顏色.字型統一改變的話，
而我要的大小為9pt 色碼為 #333333 字型為 新細明體
那麼寫法如下方式：
<style>
body{font-size:9pt;color:#333333;font-family:新細明體}
</style>
在這裡要注意的是..!!
在CSS區分各種標籤定義時，都要以 ; 來作區分
而被定義的內容都要以{ 跟 }來作才行
簡單的說，就是這樣子：
<style>
網頁標籤{文字大小要為9pt;色碼要為#333333;字型要新細明體}
</style>

 


　


分 項 宣 告

 

分項宣告
分項宣告就是網頁中同一種標籤，但卻分成兩次來宣告，例如以下：
<style>
body{font-size:9pt}
body{color:#000000}
</style>
如果各位對前面的幾篇教學都有認真看的話
這裡應該都難不倒各位了
也就是被<body>和</body>包住的文字大小為9pt
而顏色色碼為#000000
那麼在這裡的分項宣告，其實就以上面的寫法，
他對了body標籤做了兩次的宣告
但其實所得到的結果還是跟以下的寫法一樣的：
<style>
body{font-size:9pt;color:#000000}
</style>
所謂的分項宣告
就是同一種網頁標籤分成兩次.或好幾次以上的宣告方式。

先後順序
若我有同樣的標籤，而宣告內容有重複的，或是不一樣的定義內容，例如以下：
<style>
body{color:#000000}
body{color:#999999}
</style>
以上寫法都是定義body標籤的文字顏色，但色碼卻不同，
那麼哪一宣告會被成立呢，答案為後者，
也就是 body{color:#999999} 會被成立
在CSS寫法中若有相同而設定值不同的都以後者來執行的。

 


　


單 向 定 義

 

單向定義
單項定義，也就是將CSS的定義內容直接寫在標籤裡頭，以下列為示範：
網頁標籤 <b>
這是一個文字粗體標籤，也就是被<b>和</b>包起來的文字
都會變成粗體文字，那麼如果我要定義他的大小為9pt
一般CSS的用法則為：
<style>
b{font-size:9pt}
</style>
這樣網頁中所有被<b>和</b>包起來的文字就都為粗體而且為9pt的大小了，
那麼..單項定義的寫法呢....？
單項定義的寫法很簡單，就如以下：
<b style="font-size:9pt">我是粗體文字大小為9pt</b>
所謂單項定義，就是你針對網頁中的標籤設定他的值，
而也只有被設定的標籤才會產生作用。

注意
如果網頁上有兩個定義，如下：
<style>
b{font-size:9pt}
</style>
<b style="font-size:12pt}</style>
那麼就上述定義，單項定義的則文字大小為12pt
而在網頁中其他的<b>沒被單項定義設定的
就都為9pt的文字大小，也就是被單獨定義的會被執行，
而其他的則不影響。

 


　


標 籤 定 義

 

標籤定義
多樣標籤定義意思就是，再網頁中有許多的標籤要定義為一種內容，
簡單來說就是把許多標籤設定為一種樣式的意思，
現在各位若懂了什麼是標籤，那這裡就難不倒你的，
在網頁中，要宣告五種標籤，要讓他都為同一種設定，
以下面五種標籤來說：
<body> <table> <tr> <td> <font>
要以上五種標籤將他設定為 9pt的大小文字 色碼 #666666 字型為新細明體
若以上方所需要的要球，可以如以下這樣寫：
<style>
body,table,tr,td,font{font-size:9pt;color:#666666;font-family:新細明體}
</style>

注意
要同時一次定義多種網頁標籤的時候，
各種標籤要以 , 來做區分哦！！
不然CSS是沒辦法執行的，以及各種內容定義也要以 ; 來區分才行
CSS寫法中是沒有 = " ' 這幾種設定html語法的代碼
在CSS中 = 要以 : 來寫才行
而 " ' 這種代碼出現在CSS中是不正確的寫法。

 



　


捲 軸 色 系

捲軸色系
必須 IE5.5 以上版本才能正確顯示，
<style>
body{
scrollbar-face-color:#色碼;
scrollbar-highlight-color:#色碼;
scrollbar-shadow-color:#色碼;
scrollbar-3dlight-color:#色碼;
scrollbar-arrow-color:#色碼;
scrollbar-track-color:#色碼;
scrollbar-darkshadow-color:#色碼}
</style>

屬性說明
scrollbar-face-color ： 捲軸表面的顏色。
scrollbar-highlight-color ： 捲軸邊界的顏色。
scrollbar-shadow-color ： 捲軸陰影的顏色。
scrollbar-3dlight-color ： 捲軸3D立體的顏色。
scrollbar-arrow-color ： 捲軸上下箭頭的顏色。
scrollbar-track-color ： 捲軸底部軌道的顏色。
scrollbar-darkshadow-color ： 捲軸第二層陰影的顏色。

 


　


網 頁 文 字

 

文字顏色
<style>body{color:#色碼}</style>

文字大小
<style>body{font-size:9pt}</style>

文字字型
<style>body{font-family:新細明體}</style>

文字粗體
<style>body{font-weight:bold}</style>

文字斜體
<style>body{body{font-style:italic}</style>

文字置中
<style>body{text-align:center}</style>

多項寫法技巧
以上面幾段語法來寫，如果要用很多種的話，要如何寫比較好呢，
有的人如果要改變文字顏色跟大小及文字置中
可能就如以下這樣貼吧：
<style>body{color:#000000}</style>
<style>body{font-size:9pt}</style>
<style>body{text-align:center}</style>
其實以上面這樣的效果，可以如以下寫法：
<style>
body{color:#000000;font-size:9pt;text-align:center}
</style>
看到哪裡不同了嗎？
原本長長的好幾段只要縮成這樣就能辦到了，
我們只要記住我們宣告的標籤
因為上述的CSS都是宣告body標籤，那麼我們就可以這樣寫，
而每項的定義內容，只要以 ; 就可以了，
而<style>跟</style>再網頁中只要出現一次，
就可以達到CSS的要求了，不需要如上面那段重複複製貼上了好幾次，
如果你懂得如何去改以後，CSS你就可以隨心所欲的寫囉，
只要記住屬性就行了。

 


　


指 標 圖 示

 

指標圖示
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:url(圖示位置.ani)
}
</style>

禁止指標
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:all-scroll
}
</style>
範例：把滑鼠移過來

全部選取指標
必須 IE6.0 以上版本才能正確顯示，
<style>
body{
cursor:all-scroll
}
</style>
範例：把滑鼠移過來

 


　


碰 觸 產 效

 

出現底線 <style>a:hover{text-decoration:underline}</style>
出現刪除線 <style>a:hover{text-decoration:line-through}</style>
出現頂線 <style>a:hover{text-decoration:overline}</style>
頂線及底線 <style>a:hover{text-decoration:underline overline}</style>
頂線.底線.刪除 <style>a:hover{text-decoration:line-through underline overline}</style>
動態偏移 <style>a:hover{position:relative;top:2px;left:2px}</style>
字體大小 <style>a:hover{font-size:7pt}</style>
產生邊框 <style>a:hover{border:1px #色碼 solid}</style>
產生虛線邊框 <style>a:hover{border:1px #色碼 dotted}</style>
產生上下虛框 <style>a:hover{border-top:1px #色碼 dotted;border-bottom:1px #色碼 dotted}</style>
產生左右虛框 <style>a:hover{border-left:1px #色碼 dotted;border-right:1px #色碼 dotted}</style>
產生底色 <style>a:hover{background:#色碼}</style>
產生背景 <style>a:hover{background-image:url(圖片位址)}</style>
變為粗體 <style>a:hover{font-weight:bold}</style>
變為斜體 <style>a:hover{font-style:italic}</style>
改變指標 <style>a:hover{cursor:指標樣式}</style>
指標圖示 <style>a:hover{cursor:url(圖示位置.ani)}</style>

 



　


按 鈕 產 效

文字顏色 <style>input{color:#色碼}</style>
文字大小 <style>input{font-size:9pt}</style>
改變邊框 <style>input{border:1px #色碼 solid}</style>
改變底色 <style>input{background:#色碼}</style>
產生背景 <style>input{background-image:url(圖片位址)}</style>
虛線邊框 <style>input{border:1px #色碼 dotted}</style>
改變字型 <style>input{font-family:新細明體}</style>
改為斜體 <style>input{font-style:italic}</style>
改為粗體 <style>input{font-weight:bold}</style>
改變指標 <style>input{cursor:指標樣式}</style>
指標圖示 <style>input{cursor:url(圖示位置.ani)}</style>

 


　


滑 鼠 指 標

 

手狀 <style>body{cursor:hand}</style>
十字 <style>body{cursor:crosshair}</style>
I狀 <style>body{cursor:text}</style>
沙漏 <style>body{cursor:wait}</style>
?狀 <style>body{cursor:help}</style>
四處指 <style>body{cursor:move}</style>
往上指 <style>body{cursor:n-resize}</style>
往下指 <style>body{cursor:s-resize}</style>
往左指 <style>body{cursor:w-resize}</style>
往右指 <style>body{cursor:e-resize}</style>
左上指 <style>body{cursor:nw-resize}</style>
左下指 <style>body{cursor:sw-resize}</style>
右上指 <style>body{cursor:ne-resize}</style>
往下指 <style>body{cursor:se-resize}</style>
原始指標 <style>body{cursor:default}</style>

 

滑鼠 觸碰指定的物件，更換游標標

 



滑鼠放在下面文字上瀏覽效果
default
hand
text
move
e-resize
nw-resize
s-resize
se-resize
sw-resize
crosshair
wait
help
n-resize
ne-resize
w-resize

 

如果你想要在自己的網誌上，更換自己喜愛的鼠標，首先你必須要有網路空間存放鼠標。

 

語法如下：

 

頁面空狀態：　←現小丸子鼠標
BODY {
CURSOR: url('http://anlar.myweb.hinet.net/A/a80.ani')
}

 

　

 

碰觸連結變換游標：　←游標放到連結上可看到效果
A:hover {
CURSOR: url('http://anlar.myweb.hinet.net/A/a09.ani'); TEXT-DECORATION: none
}

 

　

 

碰觸連結物件偏移：　←游標放到連結上可看到效果
A:hover {
LEFT: 2px; POSITION: relative; TOP: 2px
}

 

　

 

說明：HTML標籤→表格，欄表，文字，圖，按鈕，超連結，
HTML標籤 {
CURSOR: url('鼠標路徑')
}

 

 

 

以上語法應用皆可以複合性的搭配使用，
把以上的語法貼到 css 裡面連結的上方既可。

 

※註：有些瀏覽器是不支援 ani (動態游標)，在不支援的瀏覽器裡，是看不見效果的。

 

引用  http://blog.xuite.net/piyu777/tw/13309280

 

文章出處 http://0rz.tw/wDIA8 

 

 

 

 

本文引用自e314520520 - CSS基礎認識

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 翔霏 的頭像
    翔霏

    ~✿翔霏の寶貝屋✿~

    翔霏 發表在 痞客邦 留言(4) 人氣()

    E-mail轉寄