div+css[1]：css基本知識介紹

１、css的語法（包括：選擇符、屬性和值）

□屬性必須要包含在｛｝號中；
□屬性和屬值之間用“:”分隔；
□當(dāng)有多個屬性時，用“；”進(jìn)行區(qū)分；
□在書寫屬性時屬性之間使用空格、換行等，并不影響屬笥的顯示；
□如果一個屬性有幾個值，則每個屬性值之間用空格分隔開；
□css中所有的長度值都要注明單位，當(dāng)值是0時除外；
□所用使用十六進(jìn)制的顏色單位都要在顏色值前加“＃”號；

2、選擇符類型

□通配選擇符：“＊”，其含義就是所有元素；
*{font-size:12px;}  頁面中所有文本的字體大小為12個像素
□類型選擇符：以文檔語言對象類型作為選擇符，即使用結(jié)構(gòu)中元素名稱作為選擇符；
div{font-size:12px;} 頁面中所有div元素包含的內(nèi)容的字體大小為12個像素
□包含選擇符：
div p {font-size:12px;} 頁面中所有div元素包含的p元素中，文本的字體大小為12個像素
□ID選擇符：
#name1{font-size:12px;} 在所有調(diào)用id名稱為name1的頁面元素中，文本字體大小為12個像素。
id選擇符的名稱在頁面中是唯一的。
□類選擇符：
.name1{font-size:12px;} 在所有調(diào)用類名稱為name1的元素中，文本字體大小為12個像素。
□選擇符分組：
.name1,div,p{font-size:12px;} 在所有調(diào)用類名稱為name1的元素、div元素、p元素中，文本字體大小為12個像素。
 
3、css的調(diào)用

①元素中直接調(diào)用：
<div style="width:400px;height:100px;background-color:#cccccc">舉例</div>
②從頁面頭部調(diào)用（先將css寫在頁面的head元素中，然后在頁面中調(diào)用）
<style>
.hd{
font-size:12px;
font-family:"宋體";
}
</style>
頁面中調(diào)用
 <div class="hd">調(diào)用頭部樣式的例子</div>
③采用鏈接的形式調(diào)用
<link href="aa.css" type="text/css" rel="stylesheet"/>
 
4、背景的綜合屬性（即background屬性）語法結(jié)構(gòu)如下：

background: 背景顏色｜背景圖象｜背景位置｜背景重復(fù)｜背景附件　　(值的順序可以隨意交換)
代碼完整版：
background-color:#cccccc;
background-image:url(images/01.jpg);
background-repeat:no-repeat;      (值有：repeat、repeat-x、repeat-y、no-repeat不重復(fù))
background-position:left center;  (橫向與縱向位置的值,水平居左，垂直居中)
background-attachment:fixed;  (scroll：背景圖隨內(nèi)容滾動fixed：背景圖固定)
 選擇符的優(yōu)先級：
□直接命名用的css ＞頁面頭部調(diào)用的css ＞鏈接形式調(diào)用的css;
□類選擇符＞類型選擇符;
□id選擇符＞類選擇符;
□最近最優(yōu)先原則。

div+css[2]：css中文本屬性流

1.段首縮進(jìn)

text-indent:長度值|百分比值;
p{text-indent:4em;}
// 其中百分比是指相至于父元素的寬度.

2.段首字符下沉與大寫(用偽類first-letter來表示,且選擇符僅限于塊元素,如果用內(nèi)聯(lián)元素必須先聲明元素的height和width,或者設(shè)定position屬性為absolute,或者設(shè)定display屬性值為block后才能使用)

選擇符:first-letter{屬性:值}
p:first-letter(font-size:18px;color:red;float:left;text-transform:uppercase;)
// text-transform:uppercase屬性的作用是:如果段首字符為英文,則轉(zhuǎn)換為大寫.

3.文本的對齊

□水平對齊text-align:center|left|right|justify(兩端對齊)
p{text-align:center;}
□豎直對齊vertical-align:top|middle|bottom
img{vertical-align:middle;}
// 此屬性僅作用于內(nèi)聯(lián)元素,所以無法用vertical-align屬性控制div等塊元素中的內(nèi)容的豎直對齊.

4.圖文混排

在css中可用通過文本中插入浮動元素來實現(xiàn)圖文混排的效果.
img{float:right;margin:10px;}
 
5.行高屬性

line-height:normal|長度值|百分比值|數(shù)字值;
□normal:默認(rèn)值,由用戶代理而定;
□長度值:任何長度值,但不能取負(fù)值;
□數(shù)字值:文本的行高是字體大小的兩倍;
□百分比:好處在于,當(dāng)更改字體的大小時行高會自動適應(yīng);
p{font-size:12px;line-height:30px;}長度值
p{font-size:12px;line-height:2;}數(shù)字值
p{font-size:12px;line-height:150%;}百分比

6.間隔與空白屬性

□letter-spacing:normal|長度值;
content{letter-spacing:10px;}
<div class="content">使用文字間隔的效果</div>
顯示效果是: 使用文字間隔的效果
□word-spacing:normal|長度值;
// 不支持中文,所以該屬性在中文中不起作用.顯示效果是: HOW  ARE  YOU!
□white-space:normal|pre|nowrap;
normal:默認(rèn)值,忽略多余的空白.
pre:不忽略多余的空白
nowrap:文本保持同一行顯示,直到文本結(jié)束或者遇到br元素.
// 在xhtml中,內(nèi)容的默認(rèn)顯示方式是將任何多個空白字符合并成一個空白字符來顯示.如果聲明white-space屬性值為pre,則會顯示所有的空白字符.

7.文本的轉(zhuǎn)換

text-transform:none|uppercase|lowercase|capitalize;
□none:文本不進(jìn)行大小寫的轉(zhuǎn)換
□uppercase:轉(zhuǎn)換成大寫.
□lowercase:轉(zhuǎn)換成小寫
□capitalize:文本中每個單詞的第一個字母大寫.

div+css[3]：css中邊框border與補白padding屬性設(shè)置

 1.邊框?qū)傩詁order

□邊框樣式

border-style:none|dotted|dashed|solid|......
none:沒有邊框. dotted點線dashed虛線solid實線.....等等
邊框樣式也可以像padding一樣,用4個值分別定義上下右左4個邊框樣式.
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
以上可以簡寫成為:(順序為鐘面原則:上右下左)
border-style:dotted solid dotted solid;
若上下值相同\左右值相同,則又可以簡化成為
border-style:dotted solid;

□邊框?qū)挾?/p>

border-width：:medium|thin|thick|長度值
medium: 默認(rèn)值、thin:比默認(rèn)值細(xì)、thick:比默認(rèn)值粗、長度值:
邊框?qū)挾纫部梢韵駊adding一樣,用4個值分別定義上下右左4個邊框?qū)挾?各不相同.
border-top-width:10px;
border-right-width:5px;
border-bottom-width:10px;
border-left-width:5px;
以上可以簡寫成為:(須序為鐘面原則:上右下左)
border-width:10px 5px 10px 5px;
若上下值相同與左右值相同,則又可以簡化成為
border-width:10px 5px;

□邊框顏色

border-color:顏色值;
border-top-clolr:#cccccc;
border-right-clolr:#999999;
border-bottom-clolr:#cccccc;
border-left-clolr:#999999;
以上可以簡寫成為:(須序為鐘面原則:上右下左)
border-color:#cccccc #999999 #cccccc #999999;
若上下值相同與左右值相同,則又可以簡化成為
border-color:#cccccc #999999;

□邊框的綜合定義

border:border-style border-width border-color;
其中,每個屬性的順序可以隨意交換,每個屬性之間用空格分隔.
border:#999999 10px solid;
該樣式定義了邊框顏色為淡灰色,邊框?qū)挾葹?0px,邊框樣式為實線.

□單側(cè)邊框的綜合定義

border-top:border-style border-width border-color;
border-right:border-style border-width border-color;
border-bottom:border-style border-width border-color;
border-left:border-style border-width border-color;

2.補白屬性padding

padding:長度值|百分比(百分比一般不建議用)
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:10px;
以上可簡寫成為:(順序為鐘面原則:上右下左)
padding:20px 10px 20px 10px;
如果上與下同值,右與左則值,則又可以簡寫成為:
padding:20px 10px;
如果左邊值未設(shè),則默認(rèn)為與右邊相同,若兩邊都沒設(shè),則默認(rèn)為0.上下值設(shè)置相同.

div+css[4]：css中邊界屬性margin

1.邊界屬性margin

margin:auto|長度值|百分比值;

□單側(cè)的邊界和簡寫

margin-top:5px;
同時定義四個單側(cè)的屬性,順序遵循"鐘面原則上右下左":
margin:margin-top|margin-right|margin-bottom|margin-left;
margin:40px 30px 20px 10px;

 □水平方向的邊界重疊

例如兩元素:content1 content2
兩元素分別定義為:
<div class="content1"></div>
<div class="content2"></div>
.content1{
margin-right:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
.content2{
margin-left:50px;
height:50px;
width:300px;
background:#cccccc;
float:left;
}
實際顯示效果是:兩個元素之間的距離為100px,相鄰元素的邊界屬性在水平方向上會相加.
 
□負(fù)的邊界值

例如兩元素:content1 content2
<div class="content content1"></div>
<div class="content content2"></div>
兩元素分別定義為:
.content{
height:70px;
width:300px;
padding-top:20px;
}
.content1{
margin-bottom:20px;
background:#cccccc;
}
.content2{
margin-top:-80px;
background:#666666;
}
實際顯示效果是:兩個元素之間的距離為20px與-80px之和-60px.所以元素content2會向上移動-60px,與content1有60個像素的重疊.

□在內(nèi)聯(lián)元素中使用margin屬性(垂直)

□在內(nèi)聯(lián)元素中使用margin屬性(水平)

這是一個在內(nèi)聯(lián)元素中使用<span class="content1">邊界屬性的示例,請注意換行處的邊界屬性</span>是否有變化,這將有助于對屬性的理解.
margin:40px;
backtground:#999999;
}
實際顯示效果是:邊界屬性只會在元素的開始和結(jié)束的地方產(chǎn)生效要.換行斷開時并不產(chǎn)生邊界效果.

div+css[5]：負(fù)邊界，overflow，min-height屬性

1.嵌套元素中使用負(fù)邊界

舉例:
<div class="main">
<div class="content">子元素,注意自元素中的內(nèi)容,這將有助于理解負(fù)邊界的含義</div></div>
 
.main{
padding:50px 0 0 100px;
width:350px;
height:150px;
background:#999999;
}
.content{
margin:-100px 0 0 100px;
width:100px;
height:100px;
background:#cccccc;
}
實現(xiàn)效果是:子元素的上邊界-100px,而父元素有50個像素的補白,故子元素將會向上移動50個像素.
但ie會隱藏子元素中的超出部分,而firefox則顯示超出的部分.
 
2.使用overflow來固定長度和寬度

overflow:visible|hidden|auto|sroll;
visible:不剪切內(nèi)容也不產(chǎn)生滾動條;
hidden:不顯示超出的內(nèi)容部分;
auto:在需要的時候產(chǎn)生滾動條;
sroll:總是顯示滾動條;

3.控制高度屬性min-height,max-height

min-height:auto|長度值；
定義了元素的最小高度，當(dāng)元素中的內(nèi)容沒有達(dá)到最小高度時，元素顯示最小高度；當(dāng)大于最小高度時，高度自適應(yīng)。
注：IE瀏覽器不支持這兩個屬性值，它會理解為沒有定義高度，也就是高度自適應(yīng)auto.

div+css[6]：CSS的一些小技巧

  做了一些 web project 慢慢的對頁面布局有了一些理解,也碰到了一些難題,在這里寫出來,方便自己也方便需要的人,謹(jǐn)記莫要用ie 為頁面布局的標(biāo)準(zhǔn),雖然ie7美名其曰:符合w3c.我現(xiàn)在是用chrome作為首選瀏覽器,檢測時firefox,ie6,ie7 都要測試,這樣才不會另你的頁面出現(xiàn)夸張的變形.

1. 讓li 里面的內(nèi)容各左右對齊雖然<span>放在后面也可以,但是設(shè)計頁面的文字不是一個水平線上的.

  <style rel="stylesheet" type="text/css"> #notice{height:149px; width:350px} #notice li span{float：:right;}</style>
  <ul id="notice">
<li><span>05-09</span>測試版發(fā)布…</li>
        <li><span>04-02</span>注意：對如何使用軟件及…</li>
  </ul>

2. 做出只要3個邊框的div ,最簡單的方法. 先讀border 屬性,然后再讀border-bottom屬性 ,就會把上個屬性相對應(yīng)的值覆蓋.省去一個一個的寫上下左右邊框樣式了.

border:1px solid red; border-bottom:0px;

3. ul 里面的li 橫向居中對齊主要是text-align:center  和display:inline ,如果用float:left,就實現(xiàn)不了.

#div{width: 1000px; height:70px;text-align:center;}
#div ul{list-style:none;}
#div ul li{display:inline}

4. 當(dāng)Content內(nèi)容多時，即使main設(shè)置了高度100%或auto。在不同瀏覽器下還是不能完好的自動伸展。內(nèi)容的高度比較高了，但容器main的高度還是不能撐開。
增加一個清除浮動，讓父容器知道高度。增加一個BR并設(shè)置樣式為clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

5. 表格邊框都一樣寬,簡單來說就是2條緊挨的平行邊框并為1條線,這樣看起來更漂亮!
<table  border="1" cellpadding="0" cellspacing="0" bordercolor="#DBDBDB" style=" border-collapse:collapse;">
 
6. 中文字?jǐn)?shù)不同的2行文字對齊:文字放入lable,差的間距用中文全角補齊.

10. div布局的時候一個div套一個div,子層設(shè)margin的時候會發(fā)現(xiàn)父層也跟隨移動了位置,這個問題到現(xiàn)在也沒具體的搞明白,做測試頁也沒發(fā)現(xiàn)到底是哪里的代碼問題.反正大概原因是父層里面沒有具體的內(nèi)容元素(不包括子層的div),解析時就出現(xiàn)了這個bug.暫時的解決辦法: a.父層里添加一個無用的元素或代碼,如" " , b.給父層設(shè)border,寬度不能為0(這個方法不建議用,除非你想顯示邊框), c.父層style里面加"overflow:hidden"(也許加其他的也可以). 反正一句話就是體現(xiàn)這個層的作用.