DIV CSS基礎(chǔ)教程全攻略教學(xué)

1、HYPERLINK, :/ divcss5 /CSS教程基礎(chǔ)一、CSS,高度_css,heightHYPERLINK, :/ divcss5 /DIV,CSS高度基礎(chǔ)知識(shí)這里的CSS高度是指通過HYPERLINK, :/ divcss5 /CSS來控制設(shè)置對(duì)象的高度。使用HYPERLINK, :/ divcss5 /rumen/r11.htmlCSS屬性單詞height。單位可以使用HYPERLINK, :/ divcss5 /html/h89.htmlPX，HYPERLINK, :/ divcss5 /html/h89.htmlem等常用使用PX（像素）為單位。實(shí)例：.yangshiheig

2、ht:300px;即設(shè)置了yangshi選擇器對(duì)象高度為300px。CSS高度單詞：height,CSS,最大高度：max-height,(IE7及以上版本瀏覽器支持),CSS,最小高度：min-height,(IE7及以上版本瀏覽器支持),HYPERLINK, :/ divcss5 /shili/s108.htmlCSS上下居中：line-height,以上可跟值為數(shù)字加單位。Html初始高度與HYPERLINK, :/ divcss5 /DIV+CSS高度對(duì)照以前html直接設(shè)置高度,width=300這種方式嵌入表格標(biāo)簽內(nèi)，而且無需帶單位，默認(rèn)以px（像素）為單位。實(shí)例：,我的高度為10

3、0px我高度為50px分別設(shè)置了高度為100px和50px的兩行表格接下來我們講解CSS,高度使用方法及技巧1、CSS自適應(yīng)高度一般我們需要讓寬度一定時(shí)高度隨內(nèi)容增加而增高。此時(shí)我們將無需設(shè)置高度即可實(shí)現(xiàn)此效果。同時(shí)也無需使用height:auto來實(shí)現(xiàn)高度自適應(yīng)。通常默認(rèn)情況下不設(shè)置高度，對(duì)象高度即是自適應(yīng)高度。固定高度及隱藏超出固定高度的內(nèi)容很多時(shí)候我需要設(shè)置對(duì)象固定高度同時(shí)讓多余的內(nèi)容不顯示出來。解決辦法：設(shè)置固定高度值，和設(shè)置內(nèi)容不被溢出（隱藏超出內(nèi)容）如設(shè)置一個(gè)高度為50px；寬度為50px，并禁止內(nèi)容超出此高度寬度，為了觀看效果同時(shí)設(shè)置對(duì)象為1px黑色邊框演示，HYPERLINK,

4、 :/ divcss5 /rumen/r95.htmlCSS,代碼：.yangshi,height:50px;,width:50px;,overflow:hidden;,border:1px,solid,#666;Html,body內(nèi)代碼： divcss5 演示，內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例，divcss5實(shí)例CSS,固定高度效果截圖：說明觀看此上圖，看出設(shè)置固定高度寬度并設(shè)置1px的黑色邊框，并且實(shí)現(xiàn)內(nèi)容未超出設(shè)置高度寬度。禁止溢出設(shè)置CSS高度、HYPERLINK, :/ divcss5 /rumen/r119.htmlCSS寬度的CSS屬性單詞及值overflow:hidden;,。3、

5、設(shè)置最小高度使用HYPERLINK, :/ divcss5 /rumen/r11.htmlCSS,單詞：min-height為什么要設(shè)置最小高度？有時(shí)特別是在文章頁面里因?yàn)槲恼聝?nèi)容多少參差不齊，所以我們可以使用最小高度設(shè)置讓左右結(jié)構(gòu)的布局對(duì)齊，感覺飽和一點(diǎn)，但是我們又不能設(shè)置固定高度，因?yàn)閮?nèi)容可能多可能少，當(dāng)多的時(shí)候自然設(shè)置固定高度就不會(huì)顯示完整內(nèi)容。這里有個(gè)問題就是IE6不支持最小高度設(shè)置（min-height），解決辦法使用HYPERLINK, :/ divcss5 /css-hack/css,hack方法來解決，大家知道區(qū)別不同瀏覽器時(shí)候用的css,hack中IE6可以使用“_”來區(qū)別其

6、它瀏覽器。最小高度運(yùn)用：.yangshimin-height:50px;,_height:50px;這樣就可以解決此問題，說明這里就不能再使用overflow:hidden;-HYPERLINK, :/ divcss5 /shouce/c_overflow.shtmlCSS,overflow設(shè)置隱藏超出內(nèi)容溢出。完整CSS,html最小高度實(shí)例代碼：,CSS,高度實(shí)例.yangshi,min-height:50px;,_height:50px;width:150px;border:1px,solid,#666; divcss5 演示，內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例測(cè)試內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例

7、高度超出演示實(shí)例，divcss5實(shí)例效果圖：,以上是超出內(nèi)容自動(dòng)適應(yīng)高這里是內(nèi)容夠少，未能充滿設(shè)置最小高度。無論在IE6還是IE7及以上版本瀏覽器或者火狐谷歌瀏覽器都支持最小高度的設(shè)置。關(guān)于CSS,height高度總結(jié)說明：這里講解CSS,height與html,height區(qū)別及用法，同時(shí)講解了最小高度、自適應(yīng)高度、固定高度的設(shè)置及運(yùn)用。CSS,寬度CSS,width一、寬度基礎(chǔ)知識(shí)HYPERLINK, :/ divcss5 /CSS,寬度是指通過HYPERLINK, :/ divcss5 /rumen/r29.htmlCSS,樣式設(shè)置對(duì)應(yīng)div寬度，以下我們了解傳統(tǒng)HYPERLINK, :

8、/ divcss5 /html/html寬度、寬度自適應(yīng)、固定寬度等寬度知識(shí)。傳統(tǒng)Html,寬度屬性單詞：width,如width=300;CSS,寬度屬性單詞：width,如width:300px;最大寬度單詞：HYPERLINK, :/ divcss5 /shouce/c_maxwidth.shtmlmax-width,如max-width:300px;,css手冊(cè)中了解max-width：HYPERLINK, :/ divcss5 /shouce/c_maxwidth.shtml。最小寬度單詞：HYPERLINK, :/ divcss5 /shouce/c_minwidth.shtmlm

9、in-width,如：min-width:300px,css手冊(cè)中了解min-width：HYPERLINK, :/ divcss5 /shouce/c_minwidth.shtml同時(shí)你可以進(jìn)入HYPERLINK, :/ divcss5 /shouce/CSS在線手冊(cè)中HYPERLINK, :/ divcss5 /shouce/c_width.shtmlwidth手冊(cè)了解詳細(xì)基礎(chǔ)知識(shí)：HYPERLINK, :/ divcss5 /shouce/c_width.shtml二、Html初始寬度與HYPERLINK, :/ divcss5 /DIV+CSS寬度對(duì)照1、傳統(tǒng)html中寬度width=

10、300，即設(shè)置對(duì)應(yīng)元素寬度為300px（像素）。而寬度值后無需跟單位，默認(rèn)情況下以像素（HYPERLINK, :/ divcss5 /html/h89.htmlpx）為單位。如：我的寬度為300px即：設(shè)置了對(duì)應(yīng)表格td的寬度為300px.2、HYPERLINK, :/ divcss5 /div,css中寬度設(shè)置width:300px;，即設(shè)置對(duì)應(yīng)CSS樣式為300px，這里需要跟單位。如：#header,width:300px;即：定義header,CSS選擇器樣式為300px寬度。而在標(biāo)簽運(yùn)用：我的寬度為300px寬度三、css寬度演示與講解1、CSS,寬度自適應(yīng)常常我們看見一個(gè)網(wǎng)頁寬度隨

11、瀏覽器寬度改變而自動(dòng)改變，如 divcss5 一樣，寬度是自適應(yīng)寬度。這里運(yùn)用了百分比即可實(shí)現(xiàn)自適應(yīng)寬度。如果網(wǎng)頁總寬度為80%即width:80%;，將使此寬度知道自適應(yīng)寬度為瀏覽器80%。當(dāng)然前提是設(shè)置最外層沒有寬度限制條件下。DIV,CSS,自適應(yīng)寬度例子：CSS樣式代碼：,body,margin:0,auto;,text-align:center;.yangshi,width:80%;,border:1px,solid,#003;,margin:0,auto;Html中body,div代碼：,我是80%自適應(yīng)寬度這樣即設(shè)置內(nèi)容居中，為了方便測(cè)試加上1px黑色邊框。大家可以測(cè)試觀察其內(nèi)容

12、是隨瀏覽器拉大而寬度變寬而自適應(yīng)寬度80%，而左右兩邊始終有10%寬度留著，因?yàn)樵O(shè)置此box寬度為80%。以上為CSS,寬度（width）演示圖解。2、CSS,寬度固定固定即設(shè)置寬度為固定值即可如很多時(shí)候需要對(duì)網(wǎng)頁的寬度樣式設(shè)置為固定，這時(shí)只需要設(shè)置寬度width:300px，即設(shè)置對(duì)應(yīng)固定寬度為300像素。3、最小固定寬度CSS樣式屬性單詞：min-width兼容支持：min-width除IE6不支持為，IE7以上瀏覽器、火狐、谷歌都支持常常用于設(shè)置寬度最小值，如設(shè)置對(duì)應(yīng)DIV的樣式最小寬度值限制。例：.yangshiborder:1px,solid,#003;,min-width:300p

13、x;即設(shè)置最小寬度為300px，當(dāng)然一般很少設(shè)置最小寬度。如果要使用最小寬度即，使用浮動(dòng)（float）可使用最小寬度限制。最大固定寬度HYPERLINK, :/ divcss5 /rumen/r11.htmlCSS屬性單詞：max-width兼容支持：max-width除IE6不支持為，IE7以上瀏覽器、火狐、谷歌都支持最大固定寬度是對(duì)對(duì)應(yīng)的樣式div設(shè)置最大寬度限制，即內(nèi)容不超過此設(shè)置最大寬度。最大寬度限制例子：.yangshiborder:1px,solid,#003;max-width:300px;即設(shè)置了最大寬度限制為300px，以下為設(shè)置最大寬度限制演示圖：通過圖例和基礎(chǔ)知識(shí)DIVC

14、SS5給大家講解了關(guān)于css寬度知識(shí)，希望大家能掌握其寬度運(yùn)用。CSS,邊框即CSS,border,HYPERLINK, :/ divcss5 /,CSS,邊框基礎(chǔ)知識(shí)CSS,邊框即CSS,border是控制對(duì)象的邊框邊線寬度、顏色、虛線、實(shí)線等樣式CSS屬性。Html原始邊框與,HYPERLINK, :/ divcss5 /,DIV+CSS邊框?qū)φ誋tml表格控制邊框：border=1,bordercolor=#000000說明：控制表格邊框?qū)挾葹?px，顏色為黑色，默認(rèn)為實(shí)線樣式邊框。,HYPERLINK, :/ divcss5 /,DIV,CSS邊框：border-color:#000;

15、,border-style:solid;,border-width:1px;說明：以上代碼為設(shè)置對(duì)象邊框顏色為黑色、邊框?yàn)閷?shí)線、寬度為1px邊框邊框樣式包括設(shè)置上邊框：border-top,：,設(shè)置下邊框：border-bottom,：設(shè)置左邊框：border-left,：,設(shè)置右邊框：border-right,：,邊框顯示樣式：border-style,:,none,|,hidden,|,dotted,|,dashed,|,solid,|,double,|,groove,|,ridge,|,inset,|,outset,參數(shù)值解釋：none,:,無邊框。與任何指定的border-width值

16、無關(guān)hidden,:,隱藏邊框。IE不支持dotted,:,在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線dashed,:,在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為虛線。否則為實(shí)線solid,:,實(shí)線邊框double,:,雙線邊框。兩條單線與其間隔的和等于指定的border-width值groove,:,根據(jù)border-color的值畫3D凹槽ridge,:,根據(jù)border-color的值畫菱形邊框inset,:,根據(jù)border-color的值畫3D凹邊outset,:,根據(jù)border-color的值畫3D凸邊例子：設(shè)置

17、上邊框?yàn)?px實(shí)線黑色邊框。border-top-color:#000;,border-top-style:solid;,border-top-width:1px;或簡(jiǎn)寫border-top:#000,solid,1px;可以根據(jù)以上實(shí)例舉一反三，可以設(shè)置左、右、下的邊框,HYPERLINK, :/ divcss5 /rumen/r29.html,CSS樣式。DIV,CSS邊框技巧如果設(shè)置對(duì)象上、下、左、右邊框相同樣式，可以簡(jiǎn)寫無需分別寫出上下左右的屬性及對(duì)應(yīng)值。例，設(shè)置上下左右邊框?yàn)?px寬度、實(shí)線、黑色邊框,HYPERLINK, :/ divcss5 /rumen/r95.html,CSS

18、,代碼如下：border:1px,solid,#000;完整DIV,CSS實(shí)例：實(shí)例內(nèi)容設(shè)置,HYPERLINK, :/ divcss5 /jiqiao/j4.html,CSS,命名為yangshi的,HYPERLINK, :/ divcss5 /rumen/r61.html,css,選擇器，設(shè)置該,HYPERLINK, :/ divcss5 /rumen/r61.html,屬性選擇器樣式為邊框?yàn)?px寬度實(shí)線黑色邊框、寬度為200px,高度為50px的矩形。CSS,代碼：div,body,border:0;,margin:5px;,padding:0;/*,初始化網(wǎng)頁樣式,*/.yangsh

19、i,border:1px,solid,#000;,width:200px;,height:50px;/*,設(shè)置對(duì)象樣式,*/HTML中對(duì)應(yīng)DIV代碼：divcss5實(shí)例-CSS,邊框?qū)嵗?divcss5 ,HYPERLINK, :/ divcss5 /shili/,CSS,實(shí)例上圖為CSS,邊框（CSS,border）實(shí)例主要片段代碼截圖說明：以上代碼對(duì)應(yīng)顯示效果，看到實(shí)線以外虛線是因DW軟件特自動(dòng)對(duì)DIV,box區(qū)加虛線，實(shí)際瀏覽是沒有此虛線，特此說明。三邊有邊而一邊沒有設(shè)置技巧如左右下有邊框并且樣式為黑色1PX寬度實(shí)線邊框，而上邊沒有邊框。CSS,代碼：,border:1px,solid,

20、#000;,border-top:none;注意border:1px,solid,#000;,和border-top:none;前后順序不能調(diào)換。因?yàn)镃SS讀取有從上到下、從左到右讀取原理，而先設(shè)置了整個(gè)邊框樣式，后再加上聲明頂部上邊邊框?yàn)椤皀one”沒有意思，即實(shí)現(xiàn)該實(shí)例要的樣式。從而無需分別設(shè)置下、左、右，從而節(jié)約一定代碼?？偨Y(jié)CSS,邊框，常見對(duì)對(duì)象設(shè)置CSS樣式使用屬性代碼：border:1px,solid,#000;CSS,背景-CSS,background,HYPERLINK, :/ divcss5 /,CSS背景基礎(chǔ)知識(shí)CSS,背景這里指通過CSS對(duì)對(duì)象設(shè)置背景屬性，如通過CSS

21、設(shè)置背景各種樣式。CSS中背景單詞：background,HYPERLINK, :/ divcss5 /shouce/,CSS手冊(cè)查詢-,HYPERLINK, :/ divcss5 /shouce/c_background.shtml,background手冊(cè),HYPERLINK, :/ divcss5 /shouce/c_backgroundcolor.shtml,background-color,設(shè)置顏色作為對(duì)象背景顏色,HYPERLINK, :/ divcss5 /shouce/c_backgroundimage.shtml,background-image,設(shè)置圖片作為背景圖片,HYP

22、ERLINK, :/ divcss5 /shouce/c_backgroundrepeat.shtml,background-repeat,設(shè)置背景平鋪重復(fù)方向,HYPERLINK, :/ divcss5 /shouce/c_backgroundattachment.shtml,background-attachment,設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。,HYPERLINK, :/ divcss5 /shouce/c_backgroundposition.shtml,background-position,設(shè)置或檢索對(duì)象的背景圖像位置。Html原始背景與CSS背景對(duì)照Html是指

23、對(duì)應(yīng)效果的table背景設(shè)置，Html背景單詞：Bgcolor設(shè)置背景顏色,與CSS,背景顏色對(duì)應(yīng)background-colorBackground設(shè)置圖片作為背景與CSS背景圖片對(duì)應(yīng)background-image最原始HTML背景設(shè)置演示代碼：背景顏色如果是給table設(shè)置背景顏色可以使用bgcolor=顏色值即可設(shè)置對(duì)象背景顏色。如果是CSS,背景顏色，可使用background-color:顏色值;或,background:顏色值設(shè)置對(duì)象背景顏色。CSS,背景顏色設(shè)置,HYPERLINK, :/ divcss5 /,DIV+CSS演示圖：以上截圖分別使用background-colo

24、r和background來設(shè)置對(duì)象背景顏色,CSS圖片背景這里說的是以圖片作為背景圖片,-,HYPERLINK, :/ divcss5 /jiqiao/j80.html,CSS,背景圖片詳細(xì)介紹：,HYPERLINK, :/ divcss5 /jiqiao/j80.html,CSS可以使用background或background-image直接引用圖片地址來設(shè)置圖片作為對(duì)象背景。background:url( :/ divcss5 /img/logo.gif);設(shè)置,HYPERLINK, :/ divcss5 /,DIVCSS5的LOGO圖片作為背景或background-image:url

25、( :/ divcss5 /img/logo.gif);具有相同效果。這樣設(shè)置圖片作為背景有個(gè)缺陷就是圖片會(huì)上下左右的重復(fù)，接下來我們只需看以下圖例教程即可掌握CSS,background圖片背景樣式（固定、滾動(dòng)）實(shí)現(xiàn)這個(gè)效果使用CSS單詞是background-attachment,當(dāng)然通常情況下背景默認(rèn)是固定的如果是自己使用CSS,background簡(jiǎn)寫則如上圖。background-attachment使用解析：background-attachment:fixed；,背景固定background-attachment:scroll,背景圖像是隨對(duì)象內(nèi)容滾動(dòng),HYPERLINK, :/

26、 divcss5 /,DIV,CSS,背景居中CSS,背景分為左右居中和上下居中，具體左右居中方法見上圖。背景圖像上下居中，可以使用計(jì)算上下高度然后平分設(shè)置，如上下高度距離為500px，那就設(shè)置圖片居頂部多少PX可以讓圖片實(shí)現(xiàn)上下居中。CSS,background（背景）總結(jié)：使用圖片作為背景在一個(gè)網(wǎng)頁布局中常常會(huì)遇到，希望大家能在實(shí)際中掌握其知識(shí)。一般設(shè)置對(duì)象圖片作為背景屬性實(shí)例,background:#666,url(圖片地址),no-repeat,center,top,;（解釋首先設(shè)置背景顏色,緊跟設(shè)置圖片作背景,緊跟圖片是否重復(fù),然后跟圖片在對(duì)象位置。前面的背景顏色可以不用設(shè)同時(shí)不是必

27、須，一般使用圖片作為對(duì)象背景如果要設(shè)置圖片是否重復(fù)顯示距離位置將設(shè)置圖片位置）1、設(shè)置圖片作為背景如果圖片設(shè)置圖片在X坐標(biāo)方向重復(fù)，如果再設(shè)置圖片在對(duì)象位置的左或右位置時(shí)將無效，可設(shè)置在對(duì)象上或下位置開始顯示。2、設(shè)置圖片作為背景如果圖片設(shè)置圖片在Y坐標(biāo)方向重復(fù)，如果再設(shè)置圖片在對(duì)象位置的上或下位置時(shí)將無效，可設(shè)置圖片在對(duì)象左或右位置開始顯示。3、如果設(shè)置背景完全重復(fù)顯示，那設(shè)置圖片在對(duì)象上下左右位置開始顯示將無線。希望大家好好理解有不懂的地方可以進(jìn)入,HYPERLINK, :/ divcss5 /edu/,CSS,研教室討論區(qū)發(fā)表問題，我們將盡力答復(fù)您。,HYPERLINK, :/ divc

28、ss5 /,div+css中float認(rèn)識(shí)及css,float用法float是什么意思？float是浮動(dòng)，翻譯成中文也是浮動(dòng)意思。進(jìn)入對(duì)應(yīng),HYPERLINK, :/ divcss5 /shouce/,css手冊(cè)中,HYPERLINK, :/ divcss5 /shouce/c_float.shtml,float手冊(cè)了解float基本信息。float的作用通過,HYPERLINK, :/ divcss5 /,css定義float（浮動(dòng)）讓,HYPERLINK, :/ divcss5 /rumen/r29.html,div樣式層塊，向左或向右（靠）浮動(dòng)。float語法：,float,:,none

29、,|,left,|right,參數(shù)值：,none,:,對(duì)象不浮動(dòng)left,:,對(duì)象浮在左邊right,:,對(duì)象浮在右邊接下來我們來通過一個(gè),HYPERLINK, :/ divcss5 /shili/,div+css實(shí)例講解float使用技巧。,HYPERLINK, :/ divcss5 /,DIV,CSS實(shí)驗(yàn)一Css樣式實(shí)例內(nèi)容，我們讓文字和圖片在一個(gè)固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。 divcss5 ,HYPERLINK, :/ divcss5 /shili/,CSS案例演示最終效果圖如下1、首先我們?cè)O(shè)置一個(gè)最外層的寬度為300px，高度為200px的,HYPERLIN

30、K, :/ divcss5 /jiqiao/j4.html,css命名為box的,HYPERLINK, :/ divcss5 /rumen/r61.html,css選擇器代碼如下（知識(shí)點(diǎn),HYPERLINK, :/ divcss5 /html/h89.html,px是什么意思）.boxwidth:300px;,height:200px;2、設(shè)置box內(nèi)的文字內(nèi)容部分,HYPERLINK, :/ divcss5 /rumen/r29.html,css樣式命名為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動(dòng).yangshi,width:120px;,float:right;,back

31、ground:#0066FF;3、設(shè)置圖片居左浮動(dòng)div+css樣式img,float:,left;4、body內(nèi)的div布局，代碼如下我是 divcss5 ,網(wǎng)站，測(cè)試內(nèi)容最終演示結(jié)果截圖CSS實(shí)驗(yàn)二接下來我們演示使用div+css讓這里小圖片居右（上個(gè)例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個(gè)例子是居右）(擴(kuò)展,HYPERLINK, :/ divcss5 /shili/s8.html,css,居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片css樣式img,float:,left;為img,float:,right;CSS代碼如下：.boxwi

32、dth:300px;,height:200px;.yangshi,width:120px;,float:right;,background:#0066FF;img,float:left;,HYPERLINK, :/ divcss5 /html/,html中的,HYPERLINK, :/ divcss5 /rumen/r72.html,css代碼和內(nèi)容不變最終演示結(jié)果截圖如下：希望通過以上兩個(gè),HYPERLINK, :/ divcss5 /shili/,css實(shí)例對(duì)你認(rèn)識(shí)float有幫助。希望大家多少實(shí)際操作實(shí)踐試試！css,font,_,css,文字DIV+Css開發(fā)中設(shè)置字體常用css屬性單

33、詞英文css,font-可進(jìn)入CSS手冊(cè)查看更詳細(xì)CSS,文字知識(shí)font、font-family(字體)、font-size（字大?。?、font-style（字樣式）、font-weight（加粗）、text-decoration（下劃線）、font-variant（字母大小寫）、text-transform（英文大小寫）、letter-spacing（間隔）接下來，我們一一實(shí)例講解通過css文字控制方法1、字體大小使用到font-size，實(shí)例如下,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP首先設(shè)置了font-size的值為36p

34、x,則下面結(jié)果顯示字體比較大。2、文字的顏色使用css中color顏色屬性通過color更樣式值設(shè)置文字樣式的顏色為紅色,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,3、Css來控制文字的下劃線方法css,font，用到text-decoration可以進(jìn)css手冊(cè)了解對(duì)應(yīng)值，你還可能還希望了解,HYPERLINK, :/ divcss5 /shili/s57.html,css鏈接，,HYPERLINK, :/ divcss5 /s

35、hili/s57.html,css超鏈接樣式、,HYPERLINK, :/ divcss5 /jiqiao/j77.html,css下劃線,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,4、文字的間隔-進(jìn)入詳細(xì)的,HYPERLINK, :/ divcss5 /rumen/r75.html,CSS,字間距了解,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,5、文字的字體-用到,HYPERLINK, :/ divcss5 /rumen/r29.html,css樣式屬性font-fam

36、ily，字體設(shè)置圖例如下一般font-family字體可以跟常見的“宋體”，“新宋體”，“黑體”，注意的是不能自己設(shè)置不參加的字體樣式，雖然在自己電腦上可能自己設(shè)置字體能表現(xiàn)出了，但是一般電腦用戶都沒有添加字體的，所以在這里字體只能設(shè)置常見，系統(tǒng)自帶的字體，而不能設(shè)置自己安裝的字體。電腦自帶字體，和常設(shè)置文字字體有黑體、新宋體、宋體、Arial,Helvetica,sans-serif等,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,6、文字的上下行間距，使用到css文字設(shè)置單詞line-height，這里設(shè)置line-height:5

37、0px;可以看到演示css,font文字段“我是被css控制文字樣式演示?！彪x上下文字間隔距離是通過,HYPERLINK, :/ divcss5 /shouce/c_lineheight.shtml,line-height來實(shí)現(xiàn)。也許你需要了解,HYPERLINK, :/ divcss5 /html/h78.html,br和p的區(qū)別。,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#top,TOP,7、字體樣式（斜體）使用到css樣式中font-style標(biāo)簽設(shè)置如font-style:,italic,當(dāng)然可以使用標(biāo)簽將文字變?yōu)樾斌w,HYPERLINK,

38、 :/ divcss5 /rumen/r74.html,l,top#top,TOP,8、字加粗方式-可以直接對(duì)需要加錯(cuò)文字前加文字后加或來實(shí)現(xiàn)，對(duì)文字的加粗，這里你可以用css來控制對(duì)文字加粗。這里用到font-weight來設(shè)置如font-weight:bold;這里,HYPERLINK, :/ divcss5 /shouce/c_fontweight.shtml,font-weight的值可以為100-900不等的方式為值，值越大字體越粗，如果值為bold則為正常加粗，同使用b或strong一致效果。,HYPERLINK, :/ divcss5 /rumen/r74.html,l,top#

39、top,TOP,9、英文字、字母大小寫css,font。使用css中font-variant字母全大小，如font-variant:small-caps;，選擇性大小寫text-transform如text-transform:capitalize;開頭第一個(gè)字母大寫。text-transform語法text-transform,:,none,|,capitalize,|,uppercase,|,lowercase,參數(shù)：none,:,無轉(zhuǎn)換發(fā)生capitalize,:,將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生uppercase,:,轉(zhuǎn)換成大寫lowercase,:,轉(zhuǎn)換成小寫font

40、-variant語法font-variant,:,normal,|,small-caps,參數(shù)：normal,:,正常的字體small-caps,:,小型的大寫字母字體提升與擴(kuò)展思維css,font代碼：font:12px/1.5,Arial,Helvetica,sans-serif;一般常用以上代碼定義一個(gè)網(wǎng)頁的文字的css樣式意思，這段代碼以上是字體的大小是12px，line-height為1.5倍字體尺寸，字體是Arial,Helvetica,sans-serif。Css,font提升圖例講解這樣一定義可以節(jié)約很多代碼，使用更簡(jiǎn)便以上即是,HYPERLINK, :/ divcss5 /,

41、div,css網(wǎng)站為大家通俗的介紹css,font，css文字相關(guān)知識(shí)與實(shí)例圖講。CSS,加粗知識(shí)與,HYPERLINK, :/ divcss5 /,CSS,加粗實(shí)例,HYPERLINK, :/ divcss5 /,DIV+CSS基礎(chǔ)知識(shí)CSS,加粗這里指的是通過,HYPERLINK, :/ divcss5 /,DIV,CSS控制對(duì)象的加粗。使用,HYPERLINK, :/ divcss5 /rumen/r11.html,CSS屬性單詞font-weight對(duì)象值：從100到900，最常用font-weight的值為boldfont-weight參數(shù)：normal,:,正常的字體。相當(dāng)于num

42、ber為400。聲明此值將取消之前任何設(shè)置bold,:,粗體。相當(dāng)于number為700。也相當(dāng)于b對(duì)象的作用bolder,:,IE5+特粗體lighter,:,IE5+細(xì)體number,:,IE5+100,|,200,|,300,|,400,|,500,|,600,|,700,|,800,|,900詳細(xì)基礎(chǔ)加粗知識(shí)請(qǐng)進(jìn),HYPERLINK, :/ divcss5 /shouce/,CSS手冊(cè)中的,HYPERLINK, :/ divcss5 /shouce/c_fontweight.shtml,font-weight手冊(cè)。Html常規(guī)加粗標(biāo)簽以前html直接對(duì)對(duì)象加粗的標(biāo)簽如下：或兩者效果相同

43、。加粗實(shí)例，代碼如下：我被加粗我也被加粗了我未被加粗html,加粗實(shí)例截圖：CSS,加粗基礎(chǔ)技巧實(shí)例,HYPERLINK, :/ divcss5 /rumen/r95.html,CSS,代碼：.yangshi1,font-weight:bold,.yangshi2,font-weight:800,HYPERLINK, :/ divcss5 /html/h121.html,Div,html代碼：我被加粗我也被加粗了我未被加粗CSS,加粗結(jié)果演示：說明此圖為CSS加粗實(shí)例片段代碼和結(jié)果圖。這里通過CSS來控制加粗文字方式來加粗對(duì)象。所以一般對(duì)文字對(duì)象加粗標(biāo)題加粗即可使用此方法對(duì)其加粗?？偨Y(jié)與推薦：

44、1、在html對(duì)對(duì)象直接加粗可以用或?qū)ζ浼哟?、使用CSS加粗對(duì)象可以使用font-weight:bold即可實(shí)現(xiàn)加粗。,HYPERLINK, :/ divcss5 /,DIV+CSS下劃線基礎(chǔ)CSS控制下劃線出現(xiàn)用到地方,-,HYPERLINK, :/ divcss5 /rumen/r129.html,l,top#top,TOP在,HYPERLINK, :/ divcss5 /,DIV,CSS網(wǎng)頁中常常使用,HYPERLINK, :/ divcss5 /rumen/r95.html,CSS代碼來人對(duì)象文字內(nèi)容加上下劃線。使用,HYPERLINK, :/ divcss5 /rumen/r11.

45、html,CSS屬性單詞：text-decoration,-,HYPERLINK, :/ divcss5 /shouce/,CSS,手冊(cè)了解：,HYPERLINK, :/ divcss5 /shouce/c_textdecoration.shtml,text-decoration,:,none,|,underline,|,blink,|,overline,|,line-through,text-decoration下劃線,HYPERLINK, :/ divcss5 /,CSS單詞值參數(shù)：none,:,無裝飾blink,:,閃爍underline,:,下劃線line-through,:,貫穿線o

46、verline,:,上劃線二、HTML常規(guī)下劃線標(biāo)簽,-,HYPERLINK, :/ divcss5 /rumen/r129.html,l,top#top,TOP在HTML直接使用下滑線標(biāo)簽“U”即可對(duì)對(duì)象文字加下劃線。實(shí)例：我被U標(biāo)簽加下滑線三、CSS控制對(duì)象下劃線屬性樣式,-,HYPERLINK, :/ divcss5 /rumen/r129.html,l,top#top,TOP下面我們進(jìn)行使用“U”標(biāo)簽和text-decoration進(jìn)行設(shè)置下劃線實(shí)例對(duì)比如下圖四、下劃線高級(jí)運(yùn)用,-,HYPERLINK, :/ divcss5 /rumen/r129.html,l,top#top,TOP

47、我們接下來為大家講解常見,HYPERLINK, :/ divcss5 /shili/s57.html,CSS,超鏈接,當(dāng)隨便經(jīng)過時(shí)候文字對(duì)象被加下劃線。代碼如下：下劃線演示,HYPERLINK, :/ divcss5 ,.yangshi,a,text-decoration:none;/*,鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線,*/.yangshi,a:hiver,text-decoration:underline;/*,鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線,*/divcss5請(qǐng)將以上代碼復(fù)制新建HTML即可查看該實(shí)例樣式。更詳細(xì)超鏈接講解請(qǐng)進(jìn)DIV,CSS超鏈接。css,注釋_css注解什么是CSS注解？什么是C

48、SS注釋？CSS注釋是什么？CSS注解是什么？css注解（css,注解）又被稱作CSS注釋（css,注釋）是有,HYPERLINK, :/ divcss5 /,css文件代碼間加入注釋，解釋說明意思，就像我們學(xué)習(xí)語文一樣在文言文、詩詞、文章用不同顏色進(jìn)行批注說明一個(gè)道理，通常情況下css注解是不會(huì)被瀏覽器解釋或被瀏覽器忽略的。CSS注解作用,CSS注釋作用css注解（css,注釋）可以幫助我們對(duì)自己寫的,HYPERLINK, :/ divcss5 /rumen/r72.html,CSS文件進(jìn)行說明，如說明某段,HYPERLINK, :/ divcss5 /rumen/r95.html,CSS代

49、碼是什么地方、功能、樣式等說明，以便我們以后維護(hù)具有一看即懂的方便性，同時(shí)在團(tuán)隊(duì)開發(fā)網(wǎng)頁是時(shí)候合理適當(dāng)?shù)淖⒔庥欣趫F(tuán)隊(duì)看懂,HYPERLINK, :/ divcss5 /rumen/r29.html,css樣式是對(duì)應(yīng),HYPERLINK, :/ divcss5 /html/,html哪里的，以便順利快速開發(fā),HYPERLINK, :/ divcss5 /,div,css網(wǎng)頁。CSS,注解用法，css注釋用法（css注解）CSS注解是以“/*”斜杠一個(gè)星號(hào)開始，以“*/”星號(hào)斜杠結(jié)束，注解說明內(nèi)容放到“/*”“*/”中間。css注解,HYPERLINK, :/ divcss5 /,div+CSS

50、注釋示例如下：/*, divcss5 的css注解實(shí)例css注釋實(shí)例,*/*,body定義,*/body,text-align:center;,margin:0,auto;/*,頭部css定義,*/#header,width:960px;,height:120px;實(shí)例圖如下：css注解，CSS注釋注意說明：注解“/*”和“*/”必須以半角英文小寫，并且“*”符號(hào)不要和注釋內(nèi)容緊挨在一起，至少需要一個(gè)空格位置空著。padding_css,padding用法詳解padding,屬性是,HYPERLINK, :/ divcss5 /,css用于在一個(gè)聲明中設(shè)置所有,padding,屬性的簡(jiǎn)寫屬性。

51、Padding屬性包含了padding,left,：左補(bǔ)距離（設(shè)置距左內(nèi)邊距）,；padding,top：頭頂補(bǔ)距離（設(shè)置距頂部?jī)?nèi)邊距）；padding,right,：右補(bǔ)距離（設(shè)置距右內(nèi)邊距）,；padding,bottom,：底補(bǔ)距離（設(shè)置距低內(nèi)邊距）。其二維構(gòu)建圖可見,HYPERLINK, :/ divcss5 /rumen/r11.html,CSS屬性二維圖。padding的解剖圖padding,left用法：padding-left:10px;,這個(gè)意思距離左邊補(bǔ)距10像素，可跟百分比如（padding-left:10%;,距離左邊補(bǔ)10%的距離）；padding,right用法：p

52、adding-right:10px;,這個(gè)意思距離右邊補(bǔ)距10像素，可跟百分比如（padding-right:10%;,距離右邊補(bǔ)10%的距離）；padding,top用法：padding-top:10px;,這個(gè)意思距離頂邊補(bǔ)距10像素，可跟百分比如（padding-top:10%;,距離頂邊補(bǔ)10%的距離）；padding,bottom用法：padding-bottom:10px;,這個(gè)意思距離低邊補(bǔ)距10像素，可跟百分比如（padding-bottom:10%;,距離底邊補(bǔ)10%的距離）；注意padding中間的鏈接“,-,”號(hào)，設(shè)置距離值時(shí)用“,：”并賦予值，并以“,；”結(jié)束，并且全部

53、用小寫半角字母。如果是左右上下都需要設(shè)置padding的值時(shí)可以簡(jiǎn)寫來實(shí)現(xiàn)，以優(yōu)化css,。如簡(jiǎn)寫方式有：padding:10px;,意思就是上下左右補(bǔ)丁距離就是10px（10像素）等于padding-top:10px;,padding-bottom:10px;,padding-left:10px;,padding-right:10px;,一樣效果簡(jiǎn)寫；padding:5px,10px;,意思上下補(bǔ)丁距離為5px，左右的補(bǔ)丁距離為10px，等于padding-top:5px;,padding-bottom:5px;,padding-left:10px;,padding-right:10px;,

54、一樣效果簡(jiǎn)寫；padding:5px,6px,7px;,意思上補(bǔ)丁距離5px，下補(bǔ)丁距離為7PX，左右補(bǔ)丁距離為6px，等于padding-top:5px;,padding-bottom:7px;,padding-left:6px;,padding-right:6px;,一樣效果簡(jiǎn)寫；,padding:5px,6px,7px8px;,意思上補(bǔ)丁為5px，右補(bǔ)丁距離為6px,，下補(bǔ)丁距離為7px，左補(bǔ)丁距離8px，等于等于padding-top:5px;,padding-right:6px;,padding-bottom:7px;,padding-right:8px;,一樣效果簡(jiǎn)寫；,其中pad

55、ding:5px,6px,7px,8px;,的轉(zhuǎn)法為順時(shí)針即圖：padding的屬性轉(zhuǎn)法圖解上面即是,HYPERLINK, :/ divcss5 /,div+css網(wǎng)站總結(jié)的padding的屬性與用法。其中,HYPERLINK, :/ divcss5 /shili/s6.html,margin的用與padding相同。CSS,外邊距基礎(chǔ)知識(shí),-,HYPERLINK, :/ divcss5 /rumen/r128.html,l,top#top,TOP,HYPERLINK, :/ divcss5 /,DIV,CSS外邊距指,HYPERLINK, :/ divcss5 /rumen/r11.html

56、,CSS屬性單詞margin，margin是設(shè)置對(duì)象四邊的外延邊距，沒有,HYPERLINK, :/ divcss5 /rumen/r125.html,背景顏色也無,HYPERLINK, :/ divcss5 /rumen/r116.html,顏色。運(yùn)用地方,-,HYPERLINK, :/ divcss5 /rumen/r128.html,l,top#top,TOP兩個(gè)布局之間距離設(shè)置。如上圖中“,HYPERLINK, :/ divcss5 /shouce/,CSS手冊(cè)”和“,HYPERLINK, :/ divcss5 /edu/,DIV,CSS研教室”黃顏色的背景之間空隙（背景土紅）。mar

57、gin缺點(diǎn),-,HYPERLINK, :/ divcss5 /rumen/r128.html,l,top#top,TOP在使用CSS,margin的時(shí)候容易造成,HYPERLINK, :/ divcss5 /css-hack/,CSS,HACK。IE6解釋此屬性的時(shí)候容易造成雙倍距離。您可能需要了解,HYPERLINK, :/ divcss5 /css-hack/c23.html,CSS兼容瀏覽器知識(shí)。使用技巧與CSS代碼優(yōu)化,-,HYPERLINK, :/ divcss5 /rumen/r128.html,l,top#top,TOPmargin:10px;,意思就是上下左右元素塊距離就是10

58、px（10像素）等于margin-top:10px;,margin-bottom:10px;,margin-left:10px;,margin-right:10px;,一樣效果簡(jiǎn)寫；margin:5px,10px;,意思上下元素塊距離為5px，左右的元素塊距離為10px，等于margin-top:5px;,margin-bottom:5px;,margin-left:10px;,margin-right:10px;,一樣效果簡(jiǎn)寫；margin:5px,6px,7px;,意思上元素塊距離5px，下元素塊距離為7PX，左右元素塊距離為6px，等于margin-top:5px;,margin-bot

59、tom:7px;,margin-left:6px;,margin-right:6px;,一樣效果簡(jiǎn)寫；margin:5px,6px,7px,8px;,意思上元素塊為5px，右元素塊距離為6px,，下元素塊距離為7px，左元素塊距離8px，等于margin-top:5px;,margin-right:6px;,margin-bottom:7px;,margin-right:8px;,一樣效果簡(jiǎn)寫；其中margin:5px,6px,7px,8px;你可以再了解以前,HYPERLINK, :/ divcss5 /,divcss5介紹,HYPERLINK, :/ divcss5 /shili/s6.h

60、tml,margin知識(shí)：,HYPERLINK, :/ divcss5 /shili/s6.html,。CSS,文本這里講解,HYPERLINK, :/ divcss5 /,CSS,文本，主要介紹文本字段換行、文本文字間間隔、文本縮進(jìn)、文本文字上下排間隔等,HYPERLINK, :/ divcss5 /,DIV,CSS文本樣式DIV,CSS文本知識(shí)整理1、文本字段換行,-,HYPERLINK, :/ divcss5 /rumen/r134.html,l,top#top,TOP,html中使用和,HYPERLINK, :/ divcss5 /html/h78.html,和2、文本上下排字間間隔,