昨天花了4個小時左右又參考着番茄的blog上的css文章學習了下css,發現以前花的6小時左右的學習時間算是白學了,很多要點昨天才有所瞭解,看來不動手不復習是不行的,其它技術的學習也是這樣的吧,呵呵,又想起了"唯手熟爾" .
有些時候不是沒有時間學,而是僅僅擔心時間不夠而沒有去學,比如eclipse的熟悉只花了4個小時不到...原以爲需要驚天動地的學一段時間... 其實不需要什麼口號計劃,想好後動手去做就好.
CSS要點摘錄
17:00－17：40 CSS學習 番茄
21：20－01:00
1.margin和padding用法一樣，margin是和外部某層的距離，而padding則是和內部某層的距離。
2.margin:0px 0px 0px 0px
該部分對“上右下左”邊距爲0像素
3.margin:0px auto；
說明上下邊距爲0px，左右爲自動調整；
4.font:12px 宋體;
5.width:143px;height:72px;color:#316637;
margin:0px 2px 0px 1px;
background:url(xiazai.jpg) no-repeat;
border:1px solid #7a8571;
6.a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
7.對層的margin屬性的左右邊距設置爲auto可以讓層居中顯示
8.還有一點需要大家一定要分清楚的，當在HTML中定義爲id="divID"時，在CSS對應的設置語法則是#divID{} ，如果在HTML中定義爲class="divID"時，則在CSS中對應的設置語法是.divID。
9.首先，如果你曾用過table製作網頁，你就應該知道，如果要在表格中繪製一條虛線該如何做，那需要製作一個很小的圖片來填充，其實我們還有更簡單的辦法，只要在<td></td>中加入這麼一段就可以了，你可以試試：
<div style="border-bottom:1px dashed #ccc"></div>
大家可以再次參考手冊，然後你就能明白dashed、solid、dotted...等的作用，利用它們你可以製作出許多效果來，實線、虛線、雙線、陰影線等等。
10.#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
display:block;line-height:28px 能夠讓div中定義的文字垂直居中
11.clear:both，表示清除左、右所有的浮動
12.#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/
width:730px; /*設定層的寬度*/
margin:auto; /*層居中*/
height:240px; /*設定高度*/
border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/
clear:both /*清除浮動*/
}
13.overflow:hidden可以使內容太長（例如圖片）的部份自動被隱藏。通常我們會看到一些網頁在載入時，由於圖片太大，導致佈局被撐開，直到頁面下載完成才恢復正常，通過添加overflow:hidden就可以解決這個問題。
14.在這裏我們有到ID和CLASS，那麼有的朋友就要問了，究竟什麼情況下用ID，什麼情況下用CLASS呢？
答：ID，表示的是唯一性，並且在這個頁面中只會出現一次，我們用它來表示佈局的結構；
CLASS，表示一組（類）或一個具有同樣性質的元素，它們可以共用樣式，並且在頁面中將會出現多次。
15.有的時候，我們需要給這些層中的元素設置不同的樣式時，我們要如何做呢？例如會員登錄這幾個文字使用14px加粗，其他是使用12px加粗，我們要怎麼寫CSS呢，看下面的代碼？
程序代碼
.bar_title {font-size:12px;font-weight:bold}
#login .bar_title {font-size:14px}
#login .bar_title 表示的是在ID爲login的層下的CLASS爲bar_title的元素的樣式，這樣表示的就可以有針對性的對某些元素定製樣式。#login .bar_title 在單獨設置了font-size:14px的樣式時，同時也繼承了.bar_title這一組（類）的樣式，那就是font-weight:bold，加粗。
16.先看頁面中的層
<div class="title">
<a>title1</a>
</div>
<span class="title">
<a>title2</a>
</div>
這裏，我要將title1的文字樣式設置爲14px,紅色，將title2的文字樣式爲10px，綠色，title1和title2都需要加粗，DIV加一個紅色的1px的邊框，SPAN加一個綠色的1px的邊框，樣式可以這樣寫：
程序代碼
.title {border:1px solid #f00} /*並不是div可以省略,而是"默認"爲1px的紅色邊框*/
span.title {border-color:#0f0} /*span層的title的邊框是綠色,不是默認的紅色 */
.title a {font-weight:bold} /* 默認的a標記的加粗*/
div.title a {font-size:14px;color:#f00} /*div層title的特殊屬性*/
span.title a {font-size:12px;color:#0f0} /*span層title的特殊屬性*/