資源描述：
《div+css布局教程.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。
1、DIV+CSS布局教程TheTutorialofcss+divdiv+css布局教程目錄：1.CSS基礎(chǔ)知識2.網(wǎng)頁布局常用屬性3.網(wǎng)頁布局實(shí)例4.Web標(biāo)準(zhǔn)化思想與網(wǎng)頁重構(gòu)一、CSS基礎(chǔ)知識1.css簡介2.css語法3.選擇器4.實(shí)用小技巧div+css布局教程1、css簡介CSS指層疊樣式表(CascadingStyleSheets)CSS語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行樣式通常存儲在樣式表中外部樣式表通常存儲在CSS文件中外部樣式表可以極大提高工作效率2、css語法CSS
2、語法由三部分構(gòu)成：選擇器、屬性和值：P{color:#ff0000;background:#000000;}其中“p”,我們稱為選擇器，指明我們要給“p”定義樣式；樣式聲明寫在一對大括號“{}”中；Color和background稱為“屬性”，不通屬性之間用“；”分隔“#ff0000”和“#000000”是屬性的值2、css語法幾點(diǎn)值得注意的地方：1、選擇器的分組可以對選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。（有助于優(yōu)化樣式表，提高效率）例子：h1{co
3、lor:green;}h2{color:green;}h3{color:green;}我們可以這樣寫：h1,h2,h3{color:green;}樣式太臃腫了，該減肥了!2、css語法幾點(diǎn)值得注意的地方：2、繼承及其問題根據(jù)CSS，子元素從父元素繼承屬性。例子：body{font-family:Verdana,sans-serif;}根據(jù)上面這條規(guī)則，站點(diǎn)的body元素將使用Verdana字體通過CSS繼承，子元素將繼承最高級元素（在本例中是body）所擁有的屬性（這些子元素諸如p,td,ul,ol,
4、ul,li,dl,dt,和dd）如果你不希望“Verdana,sans-serif”字體被所有的子元素繼承，又該怎么做呢？比方說，你希望段落的字體是Times。我們可以這樣寫：p{font-family:Times,"TimesNewRoman",serif;}2、css語法幾點(diǎn)值得注意的地方：3、層疊次序當(dāng)同一個(gè)HTML元素被不止一個(gè)樣式定義時(shí)，會使用哪個(gè)樣式呢？樣式表分為：瀏覽器缺省設(shè)置外部樣式表內(nèi)部樣式表（位于
標(biāo)簽內(nèi)部）內(nèi)聯(lián)樣式（在HTML元素內(nèi)部）優(yōu)先級為：內(nèi)聯(lián)樣式（在HTML元素
5、內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：
標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。2、css語法幾點(diǎn)值得注意的地方：4、高效的CSS（1）使用外聯(lián)樣式代替內(nèi)聯(lián)樣式和內(nèi)部樣式表不推薦使用：
或者是：p{color:red;}(2)使用組選擇器h1,h2,h3{color:green;}(3)使用繼承不推薦使用：td{font-size:6、12px;}p{font-size:12px;}li{font-size:12px;}…應(yīng)該這樣寫body{font-size:12px;}2、css語法幾點(diǎn)值得注意的地方：（4）使用簡記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應(yīng)該這樣寫margin:1px3px4px2px;3、選擇器1、CSS派生選擇器ulli{font-weight:bold;}定義ul內(nèi)li標(biāo)簽的樣式Pspana{fon
7、t-weight:bold;}定義段落下a標(biāo)簽的樣式可以使用派生選擇器給一個(gè)元素內(nèi)的子元素定義樣式。兩個(gè)元素之間用空格表示。3、選擇器2、id選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以“#”來定義。例子：#red{color:red;}#green{color:green;}注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次。3、選擇器2、類選擇器在CSS中，類選擇器以一個(gè)點(diǎn)號顯示：例子：.center{text-align:center}注意：類名的第一個(gè)字符不能使用數(shù)
8、字4、實(shí)用小技巧1、橋接樣式表方法在一些大型的項(xiàng)目中，由于樣式表文件過多，使用橋接樣式表可以便捷高效的管理這些樣式。4、實(shí)用小技巧書寫方式為：@importurl(color.css);@imporpurl(type.css);引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.4、實(shí)用小技巧2、關(guān)于ID和Class命名的規(guī)范總體思想：語義化的命名4、實(shí)用小技巧個(gè)人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，如header/footer
