因為有很多朋友常常會問我字型怎麼改,這些問題。乾脆阿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真的不要臉的自以為是“達人”哎!

創作者介紹
創作者 貓貓 的頭像
貓貓

NekoFitness Life

貓貓 發表在 痞客邦 留言(80) 人氣()