divcss教程入門到精通詳細(xì)講解_第1頁
divcss教程入門到精通詳細(xì)講解_第2頁
divcss教程入門到精通詳細(xì)講解_第3頁
divcss教程入門到精通詳細(xì)講解_第4頁
divcss教程入門到精通詳細(xì)講解_第5頁
已閱讀5頁，還剩85頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、divcss教程(入門到精通）目錄：一、divcss教程(入門到精通）詳細(xì)講解二、DIV+CSS網(wǎng)頁布局常用基礎(chǔ)知識(shí)三、divcss常用布局入門四、divcss網(wǎng)站首頁布局實(shí)例教程一、divcss教程(入門到精通）詳細(xì)講解CSS 高度_css heightDIV CSS高度基礎(chǔ)知識(shí)這里的CSS高度是指通過CSS來控制設(shè)置對(duì)象的高度。使用CSS屬性單詞height。單位可以使用PX，em等常用使用PX（像素）為單位。實(shí)例：.yangshiheight:300px;即設(shè)置了yangshi選擇器對(duì)象高度為300px。CSS高度單詞：height CSS 最大高度：max-height (IE7及以上

2、版本瀏覽器支持) CSS 最小高度：min-height (IE7及以上版本瀏覽器支持) CSS上下居中：line-height 以上可跟值為數(shù)字加單位。Html初始高度與DIV+CSS高度對(duì)照以前html直接設(shè)置高度 width="300"這種方式嵌入表格標(biāo)簽內(nèi)，而且無需帶單位，默認(rèn)以px（像素）為單位。實(shí)例： <table><tr><td height="100">我的高度為100px</td></tr><tr><td height="50">我高

3、度為50px</td></tr></table>分別設(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)高度。2、 固定高度及隱藏超出固定高度的內(nèi)容很多時(shí)候我需要設(shè)置對(duì)象固定高度同時(shí)讓多余的內(nèi)容不顯示出來。解決辦法：設(shè)置固定高度值，和設(shè)置內(nèi)容不被溢出（隱藏超出內(nèi)容）如設(shè)置一個(gè)高度為50px；寬度為50px，并禁止內(nèi)容超出此高度寬度

4、，為了觀看效果同時(shí)設(shè)置對(duì)象為1px黑色邊框演示，CSS 代碼：.yangshi height:50px; width:50px; overflow:hidden; border:1px solid #666;Html body內(nèi)代碼：演示，內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例，divcss5實(shí)例</div>CSS 固定高度效果截圖：說明觀看此上圖，看出設(shè)置固定高度寬度并設(shè)置1px的黑色邊框，并且實(shí)現(xiàn)內(nèi)容未超出設(shè)置高度寬度。禁止溢出設(shè)置CSS高度、CSS寬度的CSS屬性單詞及值overflow:hidden; 。3、設(shè)置最小高度使用CSS 單詞：min-height為什么要設(shè)置最小高度？有時(shí)

5、特別是在文章頁面里因?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），解決辦法使用css hack方法來解決，大家知道區(qū)別不同瀏覽器時(shí)候用的css hack中IE6可以使用“_”來區(qū)別其它瀏覽器。最小高度運(yùn)用：.yangshimin-height:50px; _height:50px;這樣就可以解決此問題，說明這里就不能再使用overflow:hidden;-CSS overflow設(shè)置隱藏超出內(nèi)

6、容溢出。完整CSS html最小高度實(shí)例代碼： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text

7、/html; charset=gb2312" /><title>CSS 高度實(shí)例</title><style>.yangshi min-height:50px; _height:50px;width:150px;border:1px solid #666;</style></head><body>演示，內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例測(cè)試內(nèi)容測(cè)試內(nèi)容高度超出演示實(shí)例高度超出演示實(shí)例，divcss5實(shí)例</div></body></html>效果圖： 以上是超出內(nèi)容自動(dòng)適應(yīng)高這

8、里是內(nèi)容夠少，未能充滿設(shè)置最小高度。無論在IE6還是IE7及以上版本瀏覽器或者火狐谷歌瀏覽器都支持最小高度的設(shè)置。關(guān)于CSS height高度總結(jié)說明：這里講解CSS height與html height區(qū)別及用法，同時(shí)講解了最小高度、自適應(yīng)高度、固定高度的設(shè)置及運(yùn)用。2、 CSS 寬度CSS width一、寬度基礎(chǔ)知識(shí)CSS 寬度是指通過CSS 樣式設(shè)置對(duì)應(yīng)div寬度，以下我們了解傳統(tǒng)html寬度、寬度自適應(yīng)、固定寬度等寬度知識(shí)。傳統(tǒng)Html 寬度屬性單詞：width 如width="300"CSS 寬度屬性單詞：width 如width:300px;最大寬度單詞：max

9、-width 如max-width:300px; css手冊(cè)中了解max-width：。最小寬度單詞：min-width 如：min-width:300px css手冊(cè)中了解min-width：同時(shí)你可以進(jìn)入CSS在線手冊(cè)中width手冊(cè)了解詳細(xì)基礎(chǔ)知識(shí)：二、Html初始寬度與DIV+CSS寬度對(duì)照1、傳統(tǒng)html中寬度width="300"，即設(shè)置對(duì)應(yīng)元素寬度為300px（像素）。而寬度值后無需跟單位，默認(rèn)情況下以像素（px）為單位。如：<td width="300">我的寬度為300px</td>即：設(shè)置了對(duì)應(yīng)表格td的寬度為

10、300px.2、div css中寬度設(shè)置width:300px;，即設(shè)置對(duì)應(yīng)CSS樣式為300px，這里需要跟單位。如：#header width:300px;即：定義header CSS選擇器樣式為300px寬度。而在標(biāo)簽運(yùn)用：<div id="header">我的寬度為300px寬度</div>三、css寬度演示與講解1、CSS 寬度自適應(yīng)常常我們看見一個(gè)網(wǎng)頁寬度隨瀏覽器寬度改變而自動(dòng)改變，如一樣，寬度是自適應(yīng)寬度。這里運(yùn)用了百分比即可實(shí)現(xiàn)自適應(yīng)寬度。如果網(wǎng)頁總寬度為80%即width:80%;，將使此寬度知道自適應(yīng)寬度為瀏覽器80%。當(dāng)然前提是

11、設(shè)置最外層沒有寬度限制條件下。DIV CSS 自適應(yīng)寬度例子：CSS樣式代碼： <style type="text/css">body margin:0 auto; text-align:center;.yangshi width:80%; border:1px solid #003; margin:0 auto;</style>Html中body div代碼： <div class="yangshi">我是80%自適應(yīng)寬度</div>這樣即設(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:300

13、px;即設(shè)置最小寬度為300px，當(dāng)然一般很少設(shè)置最小寬度。如果要使用最小寬度即，使用浮動(dòng)（float）可使用最小寬度限制。最大固定寬度CSS屬性單詞：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í)DIVCSS5給大家講解了關(guān)于css寬度知識(shí)，希望大家能掌握其寬度運(yùn)用。CSS

14、邊框即CSS borderCSS 邊框基礎(chǔ)知識(shí)CSS 邊框即CSS border是控制對(duì)象的邊框邊線寬度、顏色、虛線、實(shí)線等樣式CSS屬性。Html原始邊框與DIV+CSS邊框?qū)φ誋tml表格控制邊框：border="1" bordercolor="#000000"說明：控制表格邊框?qū)挾葹?px，顏色為黑色，默認(rèn)為實(shí)線樣式邊框。DIV CSS邊框：border-color:#000; border-style:solid; border-width:1px;說明：以上代碼為設(shè)置對(duì)象邊框顏色為黑色、邊框?yàn)閷?shí)線、寬度為1px邊框邊框樣式包括設(shè)置上邊框：bor

15、der-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值無關(guān)hidden : 隱藏邊框。IE不支持dotted : 在MAC平臺(tái)上IE4+與WINDOWS和UNIX平臺(tái)上IE5.5+為點(diǎn)線。否則為實(shí)線dashed : 在MAC平臺(tái)

16、上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è)置上邊框?yàn)?px實(shí)線黑色邊框。border-top-color:#000; border-top-style:solid; border-top-width:1px;或簡(jiǎn)寫bo

17、rder-top:#000 solid 1px;可以根據(jù)以上實(shí)例舉一反三，可以設(shè)置左、右、下的邊框CSS樣式。DIV CSS邊框技巧如果設(shè)置對(duì)象上、下、左、右邊框相同樣式，可以簡(jiǎn)寫無需分別寫出上下左右的屬性及對(duì)應(yīng)值。例，設(shè)置上下左右邊框?yàn)?px寬度、實(shí)線、黑色邊框CSS 代碼如下：border:1px solid #000;完整DIV CSS實(shí)例：實(shí)例內(nèi)容設(shè)置CSS 命名為yangshi的css 選擇器，設(shè)置該屬性選擇器樣式為邊框?yàn)?px寬度實(shí)線黑色邊框、寬度為200px,高度為50px的矩形。CSS 代碼： div,body border:0; margin:5px; paddin

18、g:0;/* 初始化網(wǎng)頁樣式 */.yangshi border:1px solid #000; width:200px; height:50px;/* 設(shè)置對(duì)象樣式 */HTML中對(duì)應(yīng)DIV代碼： <div class="yangshi">divcss5實(shí)例-CSS 邊框?qū)嵗?lt;br /> CSS 實(shí)例</div>上圖為CSS 邊框（CSS border）實(shí)例主要片段代碼截圖說明：以上代碼對(duì)應(yīng)顯示效果，看到實(shí)線以外虛線是因DW軟件特自動(dòng)對(duì)DIV box區(qū)加虛線，實(shí)際瀏覽是沒有此虛線，特此說明。三邊有邊而一邊沒有設(shè)置技巧如左右下有

19、邊框并且樣式為黑色1PX寬度實(shí)線邊框，而上邊沒有邊框。CSS 代碼： border:1px solid #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 backgroundCSS背景基礎(chǔ)知識(shí)CSS

20、 背景這里指通過CSS對(duì)對(duì)象設(shè)置背景屬性，如通過CSS設(shè)置背景各種樣式。CSS中背景單詞：background CSS手冊(cè)查詢-background手冊(cè)background-color 設(shè)置顏色作為對(duì)象背景顏色background-image 設(shè)置圖片作為背景圖片background-repeat 設(shè)置背景平鋪重復(fù)方向background-attachment 設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。background-position 設(shè)置或檢索對(duì)象的背景圖像位置。Html原始背景與CSS背景對(duì)照Html是指對(duì)應(yīng)效果的table背景設(shè)置，Html背景單詞：Bgcolor設(shè)置背景顏色

21、與CSS 背景顏色對(duì)應(yīng)background-colorBackground設(shè)置圖片作為背景與CSS背景圖片對(duì)應(yīng)background-image最原始HTML背景設(shè)置演示代碼： <table bgcolor="#996600"><tr><td background=" width="130" height="100">&nbsp;</td></tr></table>這里設(shè)置了table背景顏色為#996600，然后設(shè)置了td的背景圖片為背

22、景顏色如果是給table設(shè)置背景顏色可以使用bgcolor="顏色值"即可設(shè)置對(duì)象背景顏色。如果是CSS 背景顏色，可使用background-color:顏色值;或 background:顏色值設(shè)置對(duì)象背景顏色。CSS 背景顏色設(shè)置DIV+CSS演示圖： 以上截圖分別使用background-color和background來設(shè)置對(duì)象背景顏色 CSS圖片背景這里說的是以圖片作為背景圖片 -  CSS 背景圖片詳細(xì)介紹：CSS可以使用background或background-image直接引用圖片地址來設(shè)置圖片作為對(duì)象背景。background:url

23、(或background-image:url( 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)DIV CSS 背景居中CSS 背景分為左右居中和上下居中，具體左右居中方法見上圖。背景圖像上下居中，可以使用計(jì)算上下高度然后平分設(shè)置，如上下高度距

24、離為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í)不是必須，一般使用圖片作為對(duì)象背景如果要設(shè)置圖片是否重復(fù)顯示距離位置將設(shè)置圖片位置）1、設(shè)置圖片作為背景如果圖片設(shè)置圖片在X坐標(biāo)方向重復(fù)，如果再設(shè)置圖片在對(duì)象位置的左或右位置時(shí)

25、將無效，可設(shè)置在對(duì)象上或下位置開始顯示。2、設(shè)置圖片作為背景如果圖片設(shè)置圖片在Y坐標(biāo)方向重復(fù)，如果再設(shè)置圖片在對(duì)象位置的上或下位置時(shí)將無效，可設(shè)置圖片在對(duì)象左或右位置開始顯示。3、如果設(shè)置背景完全重復(fù)顯示，那設(shè)置圖片在對(duì)象上下左右位置開始顯示將無線。希望大家好好理解有不懂的地方可以進(jìn)入CSS 研教室討論區(qū)發(fā)表問題，我們將盡力答復(fù)您。div+css中float認(rèn)識(shí)及css float用法float是什么意思？float是浮動(dòng)，翻譯成中文也是浮動(dòng)意思。進(jìn)入對(duì)應(yīng)css手冊(cè)中float手冊(cè)了解float基本信息。float的作用通過css定義float（浮動(dòng)）讓div樣式層塊，向左或向右（靠）浮動(dòng)。f

26、loat語法： float : none | left |right 參數(shù)值： none : 對(duì)象不浮動(dòng)left : 對(duì)象浮在左邊right : 對(duì)象浮在右邊接下來我們來通過一個(gè)div+css實(shí)例講解float使用技巧。DIV CSS實(shí)驗(yàn)一Css樣式實(shí)例內(nèi)容，我們讓文字和圖片在一個(gè)固定寬度div層內(nèi)，讓藍(lán)色背景文字內(nèi)容居右，小圖片居左。 CSS案例演示最終效果圖如下1、首先我們?cè)O(shè)置一個(gè)最外層的寬度為300px，高度為200px的css命名為box的css選擇器代碼如下（知識(shí)點(diǎn)px是什么意思）.boxwidth:300px; height:200px;2、設(shè)置box內(nèi)的文字內(nèi)容部分css樣式命名

27、為yangshi，并設(shè)置背景為藍(lán)色，寬度為120px，居右浮動(dòng).yangshi width:120px; float:right; background:#0066FF;3、設(shè)置圖片居左浮動(dòng)div+css樣式img float: left;4、body內(nèi)的div布局，代碼如下 <div class="box"><div class="yangshi">我是 網(wǎng)站，測(cè)試內(nèi)容</div><img src="demo.gif" /></div>說明：這里img標(biāo)簽是鏈接外

28、部圖片，圖片名為demo.gif最終演示結(jié)果截圖CSS實(shí)驗(yàn)二接下來我們演示使用div+css讓這里小圖片居右（上個(gè)例子是居左），藍(lán)色背景文字內(nèi)容區(qū)居左（上個(gè)例子是居右）(擴(kuò)展css 居中)。這里我們只需要改變yangshi的float:right;為float:left和圖片css樣式img float: left;為img float: right;CSS代碼如下： .boxwidth:300px; height:200px;.yangshi width:120px; float:right; background:#0066FF;img float:left;html中的css代

29、碼和內(nèi)容不變最終演示結(jié)果截圖如下： 希望通過以上兩個(gè)css實(shí)例對(duì)你認(rèn)識(shí)float有幫助。希望大家多少實(shí)際操作實(shí)踐試試！css font _ css 文字DIV+Css開發(fā)中設(shè)置字體常用css屬性單詞英文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í)例講解通過c

30、ss文字控制方法1、字體大小使用到font-size，實(shí)例如下  TOP首先設(shè)置了font-size的值為36px,則下面結(jié)果顯示字體比較大。2、文字的顏色使用css中color顏色屬性通過color更樣式值設(shè)置文字樣式的顏色為紅色  TOP  TOP 3、Css來控制文字的下劃線方法css font，用到text-decoration可以進(jìn)css手冊(cè)了解對(duì)應(yīng)值，你還可能還希望了解css鏈接，css超鏈接樣式、css下劃線  TOP 4、文字的間隔-進(jìn)入詳細(xì)的CSS 字間距了解  TOP 5、文

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

32、 font文字段“我是被css控制文字樣式演示。”離上下文字間隔距離是通過line-height來實(shí)現(xiàn)。也許你需要了解br和p的區(qū)別。  TOP 7、字體樣式（斜體）使用到css樣式中font-style標(biāo)簽設(shè)置如font-style: italic,當(dāng)然可以使用<em>標(biāo)簽將文字變?yōu)樾斌w  TOP 8、字加粗方式-可以直接對(duì)需要加錯(cuò)文字前加<b>文字后加</b>或<strong></strong>來實(shí)現(xiàn)，對(duì)文字的加粗，這里你可以用css來控制對(duì)文字加粗。這里用到font-weight來設(shè)置如f

33、ont-weight:bold;這里font-weight的值可以為100-900不等的方式為值，值越大字體越粗，如果值為bold則為正常加粗，同使用b或strong一致效果。  TOP 9、英文字、字母大小寫css font。使用css中font-variant字母全大小，如font-variant:small-caps;，選擇性大小寫text-transform如text-transform:capitalize;開頭第一個(gè)字母大寫。text-transform語法text-transform : none | capitalize | uppercase | lowe

34、rcase 參數(shù)：none : 無轉(zhuǎn)換發(fā)生capitalize : 將每個(gè)單詞的第一個(gè)字母轉(zhuǎn)換成大寫，其余無轉(zhuǎn)換發(fā)生uppercase : 轉(zhuǎn)換成大寫lowercase : 轉(zhuǎn)換成小寫font-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

35、倍字體尺寸，字體是Arial, Helvetica, sans-serif。Css font提升圖例講解這樣一定義可以節(jié)約很多代碼，使用更簡(jiǎn)便以上即是div css網(wǎng)站為大家通俗的介紹css font，css文字相關(guān)知識(shí)與實(shí)例圖講。CSS 加粗知識(shí)與CSS 加粗實(shí)例DIV+CSS基礎(chǔ)知識(shí)CSS 加粗這里指的是通過DIV CSS控制對(duì)象的加粗。使用CSS屬性單詞font-weight對(duì)象值：從100到900，最常用font-weight的值為boldfont-weight參數(shù)：normal : 正常的字體。相當(dāng)于number為400。聲明此值將取消之前任何設(shè)置bold : 粗體。相當(dāng)于numbe

36、r為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)CSS手冊(cè)中的font-weight手冊(cè)。Html常規(guī)加粗標(biāo)簽以前html直接對(duì)對(duì)象加粗的標(biāo)簽如下：<b></b>或<strong></strong>兩者效果相同。加粗實(shí)例，代碼如下： <strong>我被加粗</strong><br /><b>我也

37、被加粗了</b><br/>我未被加粗html 加粗實(shí)例截圖：CSS 加粗基礎(chǔ)技巧實(shí)例CSS 代碼： .yangshi1 font-weight:bold .yangshi2 font-weight:800Div html代碼： <span class="yangshi1">我被加粗</span><br /><span class="yangshi2">我也被加粗了</span><br />我未被加粗CSS 加粗結(jié)果演示：說明此圖為CSS加粗

38、實(shí)例片段代碼和結(jié)果圖。這里通過CSS來控制加粗文字方式來加粗對(duì)象。所以一般對(duì)文字對(duì)象加粗標(biāo)題加粗即可使用此方法對(duì)其加粗?？偨Y(jié)與推薦：1、在html對(duì)對(duì)象直接加粗可以用<b>或<strong>對(duì)其加粗2、使用CSS加粗對(duì)象可以使用font-weight:bold即可實(shí)現(xiàn)加粗。DIV+CSS下劃線基礎(chǔ)CSS控制下劃線出現(xiàn)用到地方   -  TOP在DIV CSS網(wǎng)頁中常常使用CSS代碼來人對(duì)象文字內(nèi)容加上下劃線。使用CSS屬性單詞：text-decoration -CSS 手冊(cè)了解：ecoration.shtmltext-decoration : non

39、e | underline | blink | overline | line-through text-decoration下劃線CSS單詞值參數(shù)：none : 無裝飾blink : 閃爍underline : 下劃線line-through : 貫穿線overline : 上劃線二、HTML常規(guī)下劃線標(biāo)簽  -  TOP在HTML直接使用下滑線標(biāo)簽“U”即可對(duì)對(duì)象文字加下劃線。實(shí)例：<u>我被U標(biāo)簽加下滑線</u>三、CSS控制對(duì)象下劃線屬性樣式   -  TOP下面我們進(jìn)行使用“U”標(biāo)簽和text-decoration進(jìn)行設(shè)

40、置下劃線實(shí)例對(duì)比如下圖 四、下劃線高級(jí)運(yùn)用   -  TOP我們接下來為大家講解常見CSS 超鏈接,當(dāng)隨便經(jīng)過時(shí)候文字對(duì)象被加下劃線。代碼如下： <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><he

41、ad><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下劃線演示</title><style>.yangshi a text-decoration:none;/* 鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線 */.yangshi a:hiver text-decoration:underline;/* 鼠標(biāo)經(jīng)過熱點(diǎn)文字被加下劃線 */</style></head><body>&l

42、t;p><span class="yangshi"><a href="">divcss5</a></span></p></body></html>請(qǐng)將以上代碼復(fù)制新建HTML即可查看該實(shí)例樣式。更詳細(xì)超鏈接講解請(qǐng)進(jìn)DIV CSS超鏈接。css 注釋_css注解什么是CSS注解？什么是CSS注釋？CSS注釋是什么？CSS注解是什么？css注解（css 注解）又被稱作CSS注釋（css 注釋）是有css文件代碼間加入注釋，解釋說明意思，就像我們學(xué)習(xí)語文一樣在文言文、詩(shī)詞

43、、文章用不同顏色進(jìn)行批注說明一個(gè)道理，通常情況下css注解是不會(huì)被瀏覽器解釋或被瀏覽器忽略的。CSS注解作用,CSS注釋作用css注解（css 注釋）可以幫助我們對(duì)自己寫的CSS文件進(jìn)行說明，如說明某段CSS代碼是什么地方、功能、樣式等說明，以便我們以后維護(hù)具有一看即懂的方便性，同時(shí)在團(tuán)隊(duì)開發(fā)網(wǎng)頁是時(shí)候合理適當(dāng)?shù)淖⒔庥欣趫F(tuán)隊(duì)看懂css樣式是對(duì)應(yīng)html哪里的，以便順利快速開發(fā)div css網(wǎng)頁。CSS 注解用法，css注釋用法（css注解）CSS注解是以“/*”斜杠一個(gè)星號(hào)開始，以“*/”星號(hào)斜杠結(jié)束，注解說明內(nèi)容放到“/*”“*/”中間。css注解div+CSS注釋示例如下：的css注解實(shí)

44、例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 屬性是css用于在一個(gè)聲明中設(shè)置所有 padding 屬性的簡(jiǎn)寫屬性。Padding屬性包含了padding left ：左補(bǔ)距離（設(shè)置距左內(nèi)邊距） ；padding to

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

46、；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é)束，并且全部用小寫半角字母。如果是左右上下都需要設(shè)置padding的值時(shí)可以簡(jiǎn)寫來實(shí)現(xiàn)，以優(yōu)化css 。如簡(jiǎn)寫方式有：padding

47、: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; 一樣效果簡(jiǎn)寫；padding:5px 6px 7px; 意思上補(bǔ)丁距離5px，下補(bǔ)丁距離為7PX，左右補(bǔ)丁距離為6px，

48、等于padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一樣效果簡(jiǎn)寫； padding:5px 6px 7px 8px;  意思上補(bǔ)丁為5px，右補(bǔ)丁距離為6px ，下補(bǔ)丁距離為7px，左補(bǔ)丁距離8px，等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一樣效果簡(jiǎn)寫； 其中padding:5px 6px 7px 8px; 的轉(zhuǎn)法為順時(shí)針即圖：padding的屬性轉(zhuǎn)法圖解上面

49、即是div+css網(wǎng)站總結(jié)的padding的屬性與用法。其中margin的用與padding相同。CSS 外邊距基礎(chǔ)知識(shí)   -  TOPDIV CSS外邊距指CSS屬性單詞margin，margin是設(shè)置對(duì)象四邊的外延邊距，沒有背景顏色也無顏色。運(yùn)用地方  -  TOP兩個(gè)布局之間距離設(shè)置。如上圖中“CSS手冊(cè)”和“DIV CSS研教室”黃顏色的背景之間空隙（背景土紅）。margin缺點(diǎn)   -  TOP在使用CSS margin的時(shí)候容易造成CSS HACK。IE6解釋此屬性的時(shí)候容易造成雙倍距離。您可能需要了解CSS兼容瀏覽器知

50、識(shí)。使用技巧與CSS代碼優(yōu)化  -  TOPmargin:10px; 意思就是上下左右元素塊距離就是10px（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; 意

51、思上元素塊距離5px，下元素塊距離為7PX，左右元素塊距離為6px，等于margin-top:5px; margin-bottom: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;你可以再了解以前divcss

52、5介紹margin知識(shí)：。CSS 文本這里講解CSS 文本，主要介紹文本字段換行、文本文字間間隔、文本縮進(jìn)、文本文字上下排間隔等DIV CSS文本樣式DIV CSS文本知識(shí)整理1、文本字段換行  -  TOP html中使用<br />和<p><br />和<p>2、文本上下排字間間隔   -  TOP使用CSS屬性單詞：line-height 作用：定義對(duì)象行高，后面跟具體的數(shù)值和單位line-height-DIV+CSS示例： div line-height:22px; 即定義行高為22px3、CSS文

53、本縮進(jìn)   -  TOP使用CSS單詞：text-indent 作用：設(shè)置對(duì)象中的文本的縮進(jìn)，后面也跟具體數(shù)值和單位text-indent DIV+CSS示例： div text-indent : 25px; 即定義對(duì)象內(nèi)開頭的文字往后縮進(jìn)25px效果如下： 4、文本文字間間隔   -  TOP使用單詞letter-spacing作用：設(shè)置對(duì)象內(nèi)文本字與字之間間距距離，后跟具體數(shù)值和單位CSS教程示例： div letter-spacing:5px; 即定義字與字之間距離為5px 更多學(xué)習(xí)方法   -  TOP 更

54、多CSS 單詞可進(jìn)入CSS手冊(cè)查看-知識(shí)+CSS實(shí)例。CSS 顏色認(rèn)識(shí)CSS 顏色（CSS color）   -  TOP這里要介紹的是網(wǎng)頁設(shè)置顏色包含有哪些；網(wǎng)頁顏色規(guī)定規(guī)范。1、常用顏色地方包含：字體顏色、超鏈接顏色、網(wǎng)頁背景顏色、邊框顏色2、顏色規(guī)范與顏色規(guī)定：網(wǎng)頁使用RGB模式顏色顏色基礎(chǔ)知識(shí)   -  TOP網(wǎng)頁中顏色的運(yùn)用是網(wǎng)頁必不可少的一個(gè)元素。使用顏色目的在于有區(qū)別、有動(dòng)感（特別是超鏈接中運(yùn)用）、美觀之用，同時(shí)顏色也是各種各樣網(wǎng)頁的樣式表現(xiàn)元素之一。傳統(tǒng)的html顏色與w3c標(biāo)準(zhǔn)下的css顏色對(duì)比和DIV CSS運(yùn)用顏色1、文字顏色控制一

55、樣：   -  TOP傳統(tǒng)html和css 文字顏色相同使用“color：”+“RGB顏色取值”即可，如顏色為黑色字即對(duì)應(yīng)設(shè)置CSS屬性選擇器內(nèi)添加“color:#000;”即可。2、網(wǎng)頁背景顏色設(shè)置區(qū)別：   -  TOP傳統(tǒng)設(shè)置背景顏色使用“bgcolor=顏色取值”，而CSS中則“background:”+顏色取值。例如：設(shè)置背景為黑色，傳統(tǒng)Html設(shè)置，即在標(biāo)簽內(nèi)加入“bgcolor="#000"”即可實(shí)現(xiàn)顏色為黑色背景，如果在W3C中即在對(duì)應(yīng)CSS選擇器中始終“background:#000”實(shí)現(xiàn)。3、設(shè)置邊框顏色區(qū)別： &

56、#160; -  TOP傳統(tǒng)“bordercolor=取值”，CSS中“border-color:”+顏色取值。例如：在傳統(tǒng)html直接在table標(biāo)簽加入“bordercolor="#000"”即可，在現(xiàn)在CSS中設(shè)置“border-color:#000;”即可讓邊框顏色為黑色，同時(shí)記得對(duì)包括設(shè)置寬度和樣式（虛線、實(shí)現(xiàn)）。DIV+CSS顏色值擴(kuò)展知識(shí)：顏色值是一個(gè)關(guān)鍵字或一個(gè)數(shù)字的RGB規(guī)范。16個(gè)關(guān)鍵字是采取從Windows的VGA調(diào)色板： 水色 ， 黑色 ， 藍(lán)色 ， 紫紅色 ， 灰 ， 綠 ， 灰 ， 褐紅色 ，藏青色， 橄欖色 ， 紫色 ， 紅色 ， 銀

57、色 ， 青色 ， 白色 ， 黃色 。RGB顏色給出了四種方法之一：   -  TOP1、#rrggbb（ 如 ，00cc00） （強(qiáng)烈推薦使用此表示顏色取值）2、#的RGB（ 如 ，0c0） 3、RGB（十中，x，x）的x是一個(gè)包容性的0和255之間的整數(shù)（ 如 的RGB（0,204,0） 4、RGB（，），其中 y是一個(gè)包容性的數(shù)量介于0.0和100.0（ 如 的RGB（0，80，0）以下是RGB顏色表：   -  TOP當(dāng)然一般的網(wǎng)頁開發(fā)軟件都有顏色取值器：網(wǎng)頁開發(fā)軟件DW軟件中CSS取色器用CSS控制超鏈接文字樣式本文將講解通過css樣式或通過cs

58、s來控制超鏈接樣式。這里主要講文字類型的超鏈接，超鏈接的樣式包括通過CSS來控制設(shè)置超鏈接有無下劃線、超鏈接文字顏色等樣式。什么是超鏈接？超鏈接通俗地指從一個(gè)網(wǎng)頁指向一個(gè)目標(biāo)的連接關(guān)系,這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁,也可以是相同網(wǎng)頁上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。而在一個(gè)網(wǎng)頁中用來超鏈接的對(duì)象，可以是一段文本或者是一個(gè)圖片。當(dāng)瀏覽者單擊已經(jīng)鏈接的文字或圖片后,鏈接目標(biāo)將顯示在瀏覽器上，并且根據(jù)目標(biāo)的類型來打開或運(yùn)行。超鏈接的代碼<a href=" target="_blank" title="關(guān)于div

59、css的網(wǎng)站">DIV+CSS</a>解析如下：href 后跟被鏈接地址目標(biāo)網(wǎng)站地址這里是target _blank - 在新窗口中打開鏈接 _parent - 在父窗體中打開鏈接 _self - 在當(dāng)前窗體打開鏈接,此為默認(rèn)值 _top - 在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體(框架頁)title 后跟鏈接目標(biāo)說明，也就是超鏈接被鏈接網(wǎng)址情況簡(jiǎn)要說明，或標(biāo)題CSS可控制超鏈接樣式-css鏈接樣式如下a:active是超級(jí)鏈接的初始狀態(tài) a:hover是把鼠標(biāo)放上去時(shí)的狀況 a:link 是鼠標(biāo)點(diǎn)擊時(shí) a:visited是訪問過后的情況超鏈接樣式案例1、通常對(duì)全站超鏈接樣式化方法acolor:#333;text-decoration:none; /對(duì)全站有鏈接的文字顏色樣式為color:#3

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論