CSS基礎

一:字體屬性

這是最基本的屬性,您經常都會用到。它主要包括以下這些屬性:

font-family 和font-size 是必須知道的。

如font-family:"黑體"font-size:14px

二、顏色和背景屬性

color(前景色)和background(後景色)

background 還可以有其他參數設置

repeat 圖像在縱向和橫向上平鋪

no-repeat 圖像不平鋪

repeat-x 圖像在橫向上平鋪

repeat-y 圖像在縱向上平鋪

"平鋪"的意思是當圖像小於所填充區域時,將以多張重複圖片的形式將此區域填滿。

三、"容器" 屬性 (相當於指區域的範圍)

指一個區域的屬性,必須知道八個代碼

margin-top (設置頂端邊距), margin-left (左),margin-bottom (下), margin-right(右),top ,left,height(設置區域從上到下的高度 ) width(設置寬度)

也可以將四個一起設置 如:margin:1px 2px 3px 4px 表示區域距離上、右、下、左的距離。

top 與margin-top 的區別:

top是指絕對位置(是相對於整個頁面而言)。margin-top是相對它上面的區域的距離(是相對於它上面的模塊而言)。如果你想設置的區域在最上面,這兩個參數也就沒有什麼區別了。同樣left 與margin-left也是一樣。


四。填充距屬性(區域內填充文字等的範圍)

padding-top padding-left padding-bottom padding-right

這不用說也明白了。

只要記住margin指外,而padding 指內。沒什麼要說的。

五:邊框屬性


大家一直會看到有solid 這個代碼。

只要大概知道這些是什麼意思就行了,想在原模板上修改還不容易!你說是不是?

六:滾動條

overflow-y : 設置當對象的內容超過其指定高度時如何管理內容;overflow-x : 設置當對象的內容超過其指定寬度時如何管理內容。

參數:
visible:擴大面積以顯示所有內容
auto:僅當內容超出限定值時添加滾動條
hidden:總是隱藏滾動條
scroll:總是顯示滾動條

2、height : 設置滾動條的高度(修改其後數值即可)。

3、滾動條顏色參數設置:

scrollbar-3d-light-color 設置或檢索滾動條亮邊框顏色
scrollbar-highlight-color 設置或檢索滾動條3D界面的亮邊(ThreedHighlight)顏色
scrollbar-face-color 設置或檢索滾動條3D表面(ThreedFace)的顏色
scrollbar-arrow-color 設置或檢索滾動條方向箭頭的顏色
scrollbar-shadow-color 設置或檢索滾動條3D界面的暗邊(ThreedShadow)顏色
scrollbar-dark-shadow-color 設置或檢索滾動條暗邊框(ThreedDarkShadow)顏色
scrollbar-base-color 設置或檢索滾動條基準顏色

照此修改就可以了。

此時,你再去看百度空間上的css代碼,藉助百度官方的說明是不是能看懂了呢?


solid: 實線邊框
dotted: 點線
dashed : 虛線
double : 雙線邊框
groove : 3D凹槽
ridge :  菱形邊框
inset :  3D凹邊
outset : 3D凸邊




1.基本語法
  
  CSS的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value)。
  
  基本格式如下:
  selector { property: value}
  (選擇符 { 屬性:值})
  選擇符是可以是多種形式,一般是你要定義樣式的HTML標記,例如BODY、P、TABLE……,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開:
  body { color: black}
  選擇符body是指頁面主體部分,color是控制文字顏色的屬性,black是顏色的值,此例的效果是使頁面中的文字爲黑色。
  如果屬性的值是多個單詞組成,必須在值上加引號,比如字體的名稱經常是幾個單詞的組合:
  p { font-family: "sans serif"}
  (定義段落字體爲sans serif)
  
  如果需要對一個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開:
  p { text-align: center; color: red}
  (段落居中排列;並且段落中的文字爲紅色)
  
  爲了使你定義的樣式表方便閱讀,你可以採用分行的書寫格式:
  p
  {
  text-align: center;
  color: black;
  font-family: arial
  }
  (段落排列居中,段落中文字爲黑色,字體是arial)

  2.選擇符組
  
  你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重複定義:
  h1, h2, h3, h4, h5, h6 { color: green }
  (這個組裏包括所有的標題元素,每個標題元素的文字都爲綠色)
  p, table{ font-size: 9pt }
  (段落和表格裏的文字尺寸爲9號字)
  效果完全等效於:
  p { font-size: 9pt }
  table { font-size: 9pt }

  3.類選擇符
  
  用類選擇符你能夠把相同的元素分類定義不同的樣式,定義類選擇符時,在自定類的名稱前面加一個點號。假如你想要兩個不同的段落,一個段落向右對齊,一個段落居中,你可以先定義兩個類:
  p.right { text-align: right}
  p.center { text-align: center}
  然後用不在不同的段落裏,只要在HTML標記里加入你定義的class參數:
  <p class="right">
  這個段落向右對齊的
  </p>
  <p class="center">
  這個段落是居中排列的
  </p>
  注意:類的名稱可以是任意英文單詞或以英文開頭與數字的組合,一般以其功能和效果簡要命名。
  
  類選擇符還有一種用法,在選擇符中省略HTML標記名,這樣可以把幾個不同的元素定義成相同的樣式:
  .center { text-align: center}
  (定義.center的類選擇符爲文字居中排列)
  這樣的類可以被應用到任何元素上。下面我們使h1元素(標題1)和p元素(段落)都歸爲"center"類,這使兩個元素的樣式都跟隨".center"這個類選擇符:
  <h1 class="center">
  這個標題是居中排列的
  </h1>
  <p class="center">
  這個段落也是居中排列的
  </p>
  注意:這種省略HTML標記的類選擇符是我們經後最常用的CSS方法,使用這種方法,我們可以很方便的在任意元素上套用預先定義好的類樣式。

4.ID選擇符
  
  在HTML頁面中ID參數指定了某個單一元素,ID選擇符是用來對這個單一元素定義單獨的樣式。
  ID選擇符的應用和類選擇符類似,只要把CLASS換成ID即可。將上例中類用ID替代:
  <p id="intro">
  這個段落向右對齊
  </p>
  定義ID選擇符要在ID名稱前加上一個"#"號。和類選擇符相同,定義ID選擇符的屬性也有兩種方法。下面這個例子,ID屬性將匹配所有id="intro"的元素:
  #intro
  {
  font-size:110%;
  font-weight:bold;
  color:#0000ff;
  background-color:transparent
  }
  (字體尺寸爲默認尺寸的110%;粗體;藍色;背景顏色透明)
  下面這個例子,ID屬性只匹配id="intro"的段落元素:
  p#intro
  {
  font-size:110%;
  font-weight:bold;
  color:#0000ff;
  background-color:transparent
  }
  注意:ID選擇符侷限性很大,只能單獨定義某個元素的樣式,一般只在特殊情況下使用。
  
  5.包含選擇符
  
  可以單獨對某種元素包含關係定義的樣式表,元素1裏包含元素2,這種方式只對在元素1裏的元素2定義,對單獨的元素1或元素2無定義,例如:
  table a
  {
  font-size: 12px
  }
  在表格內的鏈接改變了樣式,文字大小爲12象素,而表格外的鏈接的文字仍爲默認大小。
  
  6.樣式表的層疊性
  
  層疊性就是繼承性,樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上,所有在元素中嵌套的元素都會繼承外層元素指定的屬性值,有時會把很多層嵌套的樣式疊加在一起,除非另外更改。例如在DIV標記中嵌套P標記:
  div { color: red; font-size:9pt}
  ……
  <div>
  <p>
  這個段落的文字爲紅色9號字
  </p>
  </div>
  (P元素裏的內容會繼承DIV定義的屬性)
  注意:有些情況下內部選擇符不繼承周圍選擇符的值,但理論上這些都是特殊的。例如,上邊界屬性值是不會繼承的,直覺上,一個段落不會同文檔BODY一樣的上邊界值。
  
  另外,當樣式表繼承遇到衝突時,總是以最後定義的樣式爲準。如果上例中定義了P的顏色:
  div { color: red; font-size:9pt}
  p { color: blue}
  ……
  <div>
  <p>
  這個段落的文字爲藍色9號字
  </p>
  </div>
  我們可以看到段落裏的文字大小爲9號字是繼承div屬性的,而color屬性則依照最後定義的。
  
  不同的選擇符定義相同的元素時,要考慮到不同的選擇符之間的優先級。ID選擇符,類選擇符和HTML標記選擇符,因爲ID選擇符是最後加上元素上的,所以優先級最高,其次是類選擇符。如果想超越這三者之間的關係,可以用!important提升樣式表的優先權,例如:
  p { color: #FF0000!important }
  .blue { color: #0000FF}
  #id1 { color: #FFFF00}
  我們同時對頁面中的一個段落加上這三種樣式,它最後會依照被!important申明的HTML標記選擇符樣式爲紅色文字。如果去掉!important,則依照優先權最高的ID選擇符爲黃色文字。
  
  7.註釋
  
  你可以在CSS中插入註釋來說明你代碼的意思,註釋有利於你或別人以後編輯和更改代碼時理解代碼的含義。在瀏覽器中,註釋是不顯示的。CSS註釋以"/*" 開頭,以"*/" 結尾,如下:
  /* 定義段落樣式表 */
  p
  {
  text-align: center; /* 文本居中排列 */
  color: black; /* 文字爲黑色 */
  font-family: arial /* 字體爲arial */
  }

http://www.cnblogs.com/yangy608/archive/2011/09/30/2196623.html
發佈了6 篇原創文章 · 獲贊 2 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章