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 (動態游標),在不支援的瀏覽器裡,是看不見效果的。