div+css[1]：css基本知識介紹
１、css的語(yǔ)法（包括：選擇符、屬性和值）
□屬性必須要包含在｛｝號中；
□屬性和屬值之間用“:”分隔；
□當有多個(gè)屬性時(shí)，用“；”進(jìn)行區分；
□在書(shū)寫(xiě)屬性時(shí)屬性之間使用空格、換行等，并不影響屬笥的顯示；
□如果一個(gè)屬性有幾個(gè)值，則每個(gè)屬性值之間用空格分隔開(kāi)；
□css中所有的長(cháng)度值都要注明單位，當值是0時(shí)除外；
□所用使用十六進(jìn)制的顏色單位都要在顏色值前加“＃”號；
2、選擇符類(lèi)型
□通配選擇符：“＊”，其含義就是所有元素；
*{font-size:12px;} 頁(yè)面中所有文本的字體大小為12個(gè)像素
□類(lèi)型選擇符：以文檔語(yǔ)言對象類(lèi)型作為選擇符，即使用結構中元素名稱(chēng)作為選擇符；
div{font-size:12px;} 頁(yè)面中所有div元素包含的內容的字體大小為12個(gè)像素
□包含選擇符：
div p {font-size:12px;} 頁(yè)面中所有div元素包含的p元素中，文本的字體大小為12個(gè)像素
□ID選擇符：
#name1{font-size:12px;} 在所有調用id名稱(chēng)為name1的頁(yè)面元素中，文本字體大小為12個(gè)像素。
id選擇符的名稱(chēng)在頁(yè)面中是唯一的。
□類(lèi)選擇符：
.name1{font-size:12px;} 在所有調用類(lèi)名稱(chēng)為name1的元素中，文本字體大小為12個(gè)像素。
□選擇符分組：
.name1,div,p{font-size:12px;} 在所有調用類(lèi)名稱(chēng)為name1的元素、div元素、p元素中，文本字體大小為12個(gè)像素。
3、css的調用
①元素中直接調用：
<div style="width:400px;height:100px;background-color:#cccccc">舉例</div>
②從頁(yè)面頭部調用（先將css寫(xiě)在頁(yè)面的head元素中，然后在頁(yè)面中調用）
<style>
.hd{
font-size:12px;
font-family:"宋體";
}
</style>
頁(yè)面中調用
<div class="hd">調用頭部樣式的例子</div>
③采用鏈接的形式調用
<link href="aa.css" type="text/css" rel="stylesheet"/>
4、背景的綜合屬性（即background屬性）語(yǔ)法結構如下：
background: 背景顏色｜背景圖象｜背景位置｜背景重復｜背景附件 (值的順序可以隨意交換)
代碼完整版：
background-color:#cccccc;
background-image:url(images/01.jpg);
background-repeat:no-repeat; (值有：repeat、repeat-x、repeat-y、no-repeat不重復)
background-position:left center; (橫向與縱向位置的值,水平居左，垂直居中)
background-attachment:fixed; (scroll：背景圖隨內容滾動(dòng)fixed：背景圖固定)
選擇符的優(yōu)先級：
□直接命名用的css ＞頁(yè)面頭部調用的css ＞鏈接形式調用的css;
□類(lèi)選擇符＞類(lèi)型選擇符;
□id選擇符＞類(lèi)選擇符;
□最近最優(yōu)先原則。
div+css[2]：css中文本屬性流
1.段首縮進(jìn)
text-indent:長(cháng)度值|百分比值;
p{text-indent:4em;}
// 其中百分比是指相至于父元素的寬度.
2.段首字符下沉與大寫(xiě)(用偽類(lèi)first-letter來(lái)表示,且選擇符僅限于塊元素,如果用內聯(lián)元素必須先聲明元素的height和width,或者設定position屬性為absolute,或者設定display屬性值為block后才能使用)
選擇符:first-letter{屬性:值}
p:first-letter(font-size:18px;color:red;float:left;text-transform:uppercase;)
// text-transform:uppercase屬性的作用是:如果段首字符為英文,則轉換為大寫(xiě).
3.文本的對齊
□水平對齊text-align:center|left|right|justify(兩端對齊)
p{text-align:center;}
□豎直對齊vertical-align:top|middle|bottom
img{vertical-align:middle;}
// 此屬性?xún)H作用于內聯(lián)元素,所以無(wú)法用vertical-align屬性控制div等塊元素中的內容的豎直對齊.
4.圖文混排
在css中可用通過(guò)文本中插入浮動(dòng)元素來(lái)實(shí)現圖文混排的效果.
img{float:right;margin:10px;}
5.行高屬性
line-height:normal|長(cháng)度值|百分比值|數字值;
□normal:默認值,由用戶(hù)代理而定;
□長(cháng)度值:任何長(cháng)度值,但不能取負值;
□數字值:文本的行高是字體大小的兩倍;
□百分比:好處在于,當更改字體的大小時(shí)行高會(huì )自動(dòng)適應;
p{font-size:12px;line-height:30px;}長(cháng)度值
p{font-size:12px;line-height:2;}數字值
p{font-size:12px;line-height:150%;}百分比
6.間隔與空白屬性
□letter-spacing:normal|長(cháng)度值;
content{letter-spacing:10px;}
<div class="content">使用文字間隔的效果</div>
顯示效果是: 使用文字間隔的效果
□word-spacing:normal|長(cháng)度值;
// 不支持中文,所以該屬性在中文中不起作用.顯示效果是: HOW ARE YOU!
□white-space:normal|pre|nowrap;
normal:默認值,忽略多余的空白.
pre:不忽略多余的空白
nowrap:文本保持同一行顯示,直到文本結束或者遇到br元素.
// 在xhtml中,內容的默認顯示方式是將任何多個(gè)空白字符合并成一個(gè)空白字符來(lái)顯示.如果聲明white-space屬性值為pre,則會(huì )顯示所有的空白字符.
7.文本的轉換
text-transform:none|uppercase|lowercase|capitalize;
□none:文本不進(jìn)行大小寫(xiě)的轉換
□uppercase:轉換成大寫(xiě).
□lowercase:轉換成小寫(xiě)
□capitalize:文本中每個(gè)單詞的第一個(gè)字母大寫(xiě).
div+css[3]：css中邊框border與補白padding屬性設置
1.邊框屬性border
□邊框樣式
border-style:none|dotted|dashed|solid|......
none:沒(méi)有邊框. dotted點(diǎn)線(xiàn)dashed虛線(xiàn)solid實(shí)線(xiàn).....等等
邊框樣式也可以像padding一樣,用4個(gè)值分別定義上下右左4個(gè)邊框樣式.
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
以上可以簡(jiǎn)寫(xiě)成為:(順序為鐘面原則:上右下左)
border-style:dotted solid dotted solid;
若上下值相同\左右值相同,則又可以簡(jiǎn)化成為
border-style:dotted solid;
□邊框寬度
border-width：:medium|thin|thick|長(cháng)度值
medium: 默認值、thin:比默認值細、thick:比默認值粗、長(cháng)度值:
邊框寬度也可以像padding一樣,用4個(gè)值分別定義上下右左4個(gè)邊框寬度,各不相同.
border-top-width:10px;
border-right-width:5px;
border-bottom-width:10px;
border-left-width:5px;
以上可以簡(jiǎn)寫(xiě)成為:(須序為鐘面原則:上右下左)
border-width:10px 5px 10px 5px;
若上下值相同與左右值相同,則又可以簡(jiǎn)化成為
border-width:10px 5px;
□邊框顏色
border-color:顏色值;
border-top-clolr:#cccccc;
border-right-clolr:#999999;
border-bottom-clolr:#cccccc;
border-left-clolr:#999999;
以上可以簡(jiǎn)寫(xiě)成為:(須序為鐘面原則:上右下左)
border-color:#cccccc #999999 #cccccc #999999;
若上下值相同與左右值相同,則又可以簡(jiǎn)化成為
border-color:#cccccc #999999;
□邊框的綜合定義
border:border-style border-width border-color;
其中,每個(gè)屬性的順序可以隨意交換,每個(gè)屬性之間用空格分隔.
border:#999999 10px solid;
該樣式定義了邊框顏色為淡灰色,邊框寬度為10px,邊框樣式為實(shí)線(xiàn).
□單側邊框的綜合定義
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:長(cháng)度值|百分比(百分比一般不建議用)
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
padding-left:10px;
以上可簡(jiǎn)寫(xiě)成為:(順序為鐘面原則:上右下左)
padding:20px 10px 20px 10px;
如果上與下同值,右與左則值,則又可以簡(jiǎn)寫(xiě)成為:
padding:20px 10px;
如果左邊值未設,則默認為與右邊相同,若兩邊都沒(méi)設,則默認為0.上下值設置相同.
div+css[4]：css中邊界屬性margin
1.邊界屬性margin
margin:auto|長(cháng)度值|百分比值;
□單側的邊界和簡(jiǎn)寫(xiě)
margin-top:5px;
同時(shí)定義四個(gè)單側的屬性,順序遵循"鐘面原則上右下左":
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;
}
實(shí)際顯示效果是:兩個(gè)元素之間的距離為100px,相鄰元素的邊界屬性在水平方向上會(huì )相加.
□負的邊界值
例如兩元素: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;
}
實(shí)際顯示效果是:兩個(gè)元素之間的距離為20px與-80px之和-60px.所以元素content2會(huì )向上移動(dòng)-60px,與content1有60個(gè)像素的重疊.
□在內聯(lián)元素中使用margin屬性(垂直)
□在內聯(lián)元素中使用margin屬性(水平)
這是一個(gè)在內聯(lián)元素中使用<span class="content1">邊界屬性的示例,請注意換行處的邊界屬性</span>是否有變化,這將有助于對屬性的理解.
margin:40px;
backtground:#999999;
}
實(shí)際顯示效果是:邊界屬性只會(huì )在元素的開(kāi)始和結束的地方產(chǎn)生效要.換行斷開(kāi)時(shí)并不產(chǎn)生邊界效果.
div+css[5]：負邊界，overflow，min-height屬性
1.嵌套元素中使用負邊界
舉例:
<div class="main">
<div class="content">子元素,注意自元素中的內容,這將有助于理解負邊界的含義</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;
}
實(shí)現效果是:子元素的上邊界-100px,而父元素有50個(gè)像素的補白,故子元素將會(huì )向上移動(dòng)50個(gè)像素.
但ie會(huì )隱藏子元素中的超出部分,而firefox則顯示超出的部分.
2.使用overflow來(lái)固定長(cháng)度和寬度
overflow:visible|hidden|auto|sroll;
visible:不剪切內容也不產(chǎn)生滾動(dòng)條;
hidden:不顯示超出的內容部分;
auto:在需要的時(shí)候產(chǎn)生滾動(dòng)條;
sroll:總是顯示滾動(dòng)條;
3.控制高度屬性min-height,max-height
min-height:auto|長(cháng)度值；
定義了元素的最小高度，當元素中的內容沒(méi)有達到最小高度時(shí)，元素顯示最小高度；當大于最小高度時(shí)，高度自適應。
注：IE瀏覽器不支持這兩個(gè)屬性值，它會(huì )理解為沒(méi)有定義高度，也就是高度自適應auto.
div+css[6]：CSS的一些小技巧
做了一些 web project 慢慢的對頁(yè)面布局有了一些理解,也碰到了一些難題,在這里寫(xiě)出來(lái),方便自己也方便需要的人,謹記莫要用ie 為頁(yè)面布局的標準,雖然ie7美名其曰:符合w3c.我現在是用chrome作為首選瀏覽器,檢測時(shí)firefox,ie6,ie7 都要測試,這樣才不會(huì )另你的頁(yè)面出現夸張的變形.
1. 讓li 里面的內容各左右對齊雖然<span>放在后面也可以,但是設計頁(yè)面的文字不是一個(gè)水平線(xiàn)上的.
<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個(gè)邊框的div ,最簡(jiǎn)單的方法. 先讀border 屬性,然后再讀border-bottom屬性 ,就會(huì )把上個(gè)屬性相對應的值覆蓋.省去一個(gè)一個(gè)的寫(xiě)上下左右邊框樣式了.
border:1px solid red; border-bottom:0px;
3. ul 里面的li 橫向居中對齊主要是text-align:center 和display:inline ,如果用float:left,就實(shí)現不了.
#div{width: 1000px; height:70px;text-align:center;}
#div ul{list-style:none;}
#div ul li{display:inline}
4. 當Content內容多時(shí)，即使main設置了高度100%或auto。在不同瀏覽器下還是不能完好的自動(dòng)伸展。內容的高度比較高了，但容器main的高度還是不能撐開(kāi)。
增加一個(gè)清除浮動(dòng)，讓父容器知道高度。增加一個(gè)BR并設置樣式為clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>
5. 表格邊框都一樣寬,簡(jiǎn)單來(lái)說(shuō)就是2條緊挨的平行邊框并為1條線(xiàn),這樣看起來(lái)更漂亮!
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#DBDBDB" style=" border-collapse:collapse;">
6. 中文字數不同的2行文字對齊:文字放入lable,差的間距用中文全角補齊.
10. div布局的時(shí)候一個(gè)div套一個(gè)div,子層設margin的時(shí)候會(huì )發(fā)現父層也跟隨移動(dòng)了位置,這個(gè)問(wèn)題到現在也沒(méi)具體的搞明白,做測試頁(yè)也沒(méi)發(fā)現到底是哪里的代碼問(wèn)題.反正大概原因是父層里面沒(méi)有具體的內容元素(不包括子層的div),解析時(shí)就出現了這個(gè)bug.暫時(shí)的解決辦法: a.父層里添加一個(gè)無(wú)用的元素或代碼,如" " , b.給父層設border,寬度不能為0(這個(gè)方法不建議用,除非你想顯示邊框), c.父層style里面加"overflow:hidden"(也許加其他的也可以). 反正一句話(huà)就是體現這個(gè)層的作用.
聯(lián)系客服
