因為有很多朋友常常會問我字型怎麼改，這些問題。乾脆阿Q寫個基本教學，只要是簡單的修改，這些應該大家都能很容易上手^^
如果有不懂的，再問阿Q吧！
首先，要先了解CSS的架構，本來阿Q在之前有發表一篇引用人家寫好很整齊漂亮的“痞客CSS架構表”了，後來發現有些朋友一開始看好像會不懂。所以這裡加上“HTML架構圖示表”給大家一併對照著看，應該會更容易明白。
字型
|
文字顏色 |
color: #000; |
|
文字大小 |
font-size: 8pt; |
|
文字字體 |
font-family: “arial”, dotum; |
|
文字斜體 |
font-style: italic; |
|
小字體 |
font-variant: small-caps; |
|
字間距離 |
letter-spacing: 1pt; |
|
行高 |
line-height: 15px; (亦可為百分比) |
|
文字粗體 |
font-weight: bold; |
|
加底線 |
text-decoration: underline; |
|
加刪除線 |
text-decoration: line-through; |
|
加頂線 |
text-decoration: overline; |
|
刪除連線底線 |
text-decoration: none; |
|
首字大寫 |
text-transform: capitalize; |
|
英文大寫 |
text-transform: uppercase; |
|
英文小寫 |
text-transform: lowercase; |
|
文字靠左 |
text-align: left; |
|
文字靠中 |
text-align: center; |
|
文字靠右 |
text-align: right; |
|
文字分散對齊 |
text-align: justify; |
背景
|
背景顏色 |
background: #e9e9e9; |
|
背景圖片不重複 |
background: url(圖片位址) no-repeat; |
|
背景重複 |
background: url(圖片位址) repeat; |
|
背景Y軸重複 |
background: url(圖片位址) repeat-y; |
|
背景X軸重複 |
background: url(圖片位址) repeat-x; |
|
背景浮水印固定 |
background: url(圖片位址) fixed; |
|
背景置中 |
background-position: center; |
|
背景靠左 |
background-position: left; |
|
背景靠右 |
background-position: right; |
|
背景靠上 |
background-position: top; |
|
背景靠下 |
background-position: bottom; |
|
簡易寫法 |
|
|
background: url(位址) no-repeat top center fixed #fff; |
|
●備註：位址請記得不是複製上方的網址，而是在圖片上方按右鍵內容裡的那個網址！
框線
|
全框線 |
border: 1px solid #000; |
|
上框線 |
border-top: 1px solid #000; |
|
下框線 |
border-bottom: 1px solid #000; |
|
右框線 |
border-right: 1px solid #000; |
|
左框線 |
border-left: 1px solid #000; |
|
框線種類 |
solid 直線 |
|
dotted 點線 |
|
|
dashed 虛線 |
|
|
double 雙線 |
|
|
groove 立體內凸 |
|
|
ridge 立體浮凸 |
|
|
inset 凹框 |
|
|
outset 凸框 |
另外，其他還有像如何定位的問題呢？因為比較複雜，光用文字可能無法很快的解釋！所以暫時就不教大家了。如果有想要了解的朋友，可以到OECSPACE去看看。
其實CSS真的不難，只要你能搞懂標籤和每一個項目所會表現出來的方式，那要去設計出一個簡單的樣式就不難了！當然，設計CSS樣式也多少要懂一些圖的設計，那設計起來才會更得心應手。以上這些基本的項目，都是為了方便套用樣式的朋友，可以針對簡易的部份去做修改。如果有朋友不懂，再問阿Q囉^^
P.S.剛好有客戶經過看我在幹嘛，和我閒聊...真的不是阿Q要說，阿Q真的不要臉的自以為是“達人”哎！
留言列表
パンドラの箱 (5)
