2009年3月20日 星期五

Blogger網誌更換漂亮的佈景主題(2)修改小細節-簡單認識CSS


CSS語法的表示法

/*   */被斜線和星星包圍的都是註明,不是語法

{  }這一前一後的這種括號包圍的是語法,裡面的內容就是括號前標籤的設定。我們要修改的東戲就是放在這裡面。

首先先從宣告方式開始說明:
p {font-size:12px;}
這個寫法是指段落文章P的文字字級為12px一開始必須先設定對象,CSS才能夠將設定好的屬性指定給某一個元素,所以上面範例指定的對象為段落文章P指定對象後,開始做屬性設定設定之前必須以大括號{ }括起來,這就是規則!

例如
h1 {font-size:12px;}
h1
是對象font-size 這是屬性名稱,而12pxfont-size的屬性值,性與屬性值必須要有冒號隔開。設定完之後,結尾必須以分號做結束。

如果同時設定不同的元素,但是有著一樣的屬性設定時,難道要重複撰寫嗎?答案是不需要,當有兩個以上為相同設定值的時候,元素間加上逗點符號,可以如下範例一般撰寫:p, h1 {font-size:12px;},只要在第一個元素後加上逗號隔開,即可以同時設定不同元素屬性。

完整的寫法就是 對象{屬性:屬性值;}

括號裡面內容的表示法:

屬性 冒號 屬性分號

寫成 :; 或者 A-X:; (屬性裡的細項則在項目中加上-然後才加冒號)

例如:line-height: 16px; (線條-高度:16像素;)

冒號之前是告訴電腦什麼項目屬性,冒號之後是告訴電腦採用什麼屬性值設定,分號代表交待完畢沒事了,換下一位。


Blogger常見對象標籤分類:

body整個介頁面
#body-div
整個頁面

#outer-wrapper包圍整個頁面的範圍
#header-wrapper上標題欄
#header上標題文字
#content-wrapper中間包含文章和側邊欄的部份
#main-wrapper文章的部份
#sidebar-wrapper側邊欄所有範圍
#sidebar側邊欄,有時會加上左右的分別
#footer下方標尾
a
超連結

a:link有超連結文字的顏色
a:hover
滑鼠移動到超連結上時
a:activ
使用中的連結文字
a:visited
瀏覽過的連結文字

超連結可用的屬性值項目:
text-decoration:
none(
連結無底線)underline(連結加底線)overline(連結加頂線)
linethrough(
連結加刪除線)blink(連結閃爍)


常用屬性項目分類:

margin邊界

text-align文字對齊方式

color顏色

background背景

text-decoration超連結的底線

background-repeat背景圖重複

padding間距

padding-top離上間距

padding-bottom離下間距

font-size文字字型

background-image:url(http://********* 背景圖片網址);

border框線

width寬度

height高度

float對齊

left

right



說明:
top上 right右 bottom下 lefty左 center中  width寬 height高
padding  ←間距 (物件文字 與框之間的距離)
margin  ←邊距 (欄框(表格) 向外的距離)
margin-top:  ?px; /*上邊界值
margin-right: ?px; /*右邊界值
margin-bottom: ?px; /*下邊界值
margin-left:  ?px; /*左邊界值

0 意見:

Loading...

 

余俊潁的部落格 | Copyright 2009 Tüm Hakları Saklıdır | Blogger Template by GoogleBoy ve anakafa | Sponsored by Noow!