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