CSS基礎(chǔ)知識(用例子來講解)_第1頁
CSS基礎(chǔ)知識(用例子來講解)_第2頁
CSS基礎(chǔ)知識(用例子來講解)_第3頁
CSS基礎(chǔ)知識(用例子來講解)_第4頁
CSS基礎(chǔ)知識(用例子來講解)_第5頁
已閱讀5頁，還剩52頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第四章CSS基礎(chǔ)知識本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS三、CSS基本語法四、CSS選擇器五、CSS的繼承性六、CSS的層疊和特殊性重點(diǎn)難點(diǎn)復(fù)習(xí)HTML標(biāo)記<body><p><h1>，<h2>，<h3><u1>，<li><img><a><div>bodyph1h2h3lililililiulppppimgdivid=“header”divid=“navigation”divid=“mainContent”divid=“mainContent”divid=“footer”CSS的引入W3C組織于1996年推出CSS1.0技術(shù)標(biāo)準(zhǔn)，1998年推出CSS2.0技術(shù)標(biāo)準(zhǔn)。CSS是CascadingStyleSheets的縮寫，譯為“層疊樣式表”，是用于控制網(wǎng)頁樣式的一種標(biāo)記性語言。HTML控制網(wǎng)頁內(nèi)容的結(jié)構(gòu)，CSS控制網(wǎng)頁內(nèi)容的樣式。CSS實(shí)現(xiàn)了網(wǎng)頁的結(jié)構(gòu)與表現(xiàn)相分離。一、CSS簡介二、在網(wǎng)頁中應(yīng)用CSS在網(wǎng)頁上應(yīng)用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）二、在網(wǎng)頁中應(yīng)用CSS行內(nèi)樣式：在HTML標(biāo)記的style屬性中設(shè)置CSS樣式。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>style=“color:#FFFFFF;background-color:#000080”>泡泡潛水俱樂部</h1>

二、在網(wǎng)頁中應(yīng)用CSS內(nèi)部樣式表：將CSS樣式寫在<style>和</style>標(biāo)記之間。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html><styletype=“text/css”>h1{color:#FFFFFF;background-color:#000080;}</style></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><p>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>二、在網(wǎng)頁中應(yīng)用CSS外部樣式表：將CSS樣式寫在獨(dú)立的CSS文件中，然后將CSS

文件鏈接到HTML文件上。<linkhref=“style.css”rel=“stylesheet”type=“text/css”></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務(wù)，……</p></body></html>網(wǎng)頁文件CSS文件小結(jié)：在網(wǎng)頁上應(yīng)用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）內(nèi)部樣式表優(yōu)于行內(nèi)樣式。外部樣式表優(yōu)于內(nèi)部樣式表。CSS樣式由“選擇器”和“聲明”組成。聲明由“屬性”和“屬性值”組成。每條聲明之間用“;”

分隔。三、CSS基本語法selectors{property:value;}選擇器屬性屬性值聲明四、CSS選擇器CSS常用選擇器的類型：通配選擇器類型選擇器類選擇器ID選擇器后代選擇器偽類群選擇器四、CSS選擇器1.通配選擇器（UniversalSelector）*{property:value;}例：*{padding:0;margin:0;}四、CSS選擇器2.類型選擇器（TypeSelectors）Tag{property:value;}例：body{font:0.75em/1.5"宋體";background:#E0E0E0url(images/bg.gif);}h1{font-size:180%;margin:1em0;}p{margin:1em0;}四、CSS選擇器3.ID選擇器（IDSelectors）

＃ID{property:value;}

例：#container{width:760px;margin:auto;}#header{height:120px;background:url(images/bg_header.gif)no-repeat;}#content{padding:30px;}四、CSS選擇器5.類選擇器（ClassSelectors）.className

{property:value;}使用類選擇器需要兩個步驟：標(biāo)識類；定義類。四、CSS選擇器5.類選擇器（ClassSelectors）例：<head><title>散文詩

</title></head><body><h2>《秋夜》</h2><p>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body><h2class=“center”>《秋夜》</h2><p>魯迅</p><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><styletype="text/css">.center{text-align:center;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body><styletype="text/css">.center{text-align:center;}h2.center{color:#0000FF;}</style></head><body><h2class=“center”>《秋夜》</h2><pclass=“center”

>魯迅</p><p>在我的后園，可以看見墻外有兩株樹，……</p></body>四、CSS選擇器4.后代選擇器（DescendantSelectors）selector1selector2{property:value}

說明：選擇所有被selector1包含的selector2。例：#contentp{ text-indent:2em;}四、CSS選擇器4.子選擇器selector1>selector2{property:value}

說明：選擇selector1的第一代元素selector2。例：.food>li{ text-indent:2em;}四、CSS選擇器7.偽類（Pseudo-ClassesSelectors）

selector:pseudo-class{property:value}

例：a:link{color:#000000;text-decoration:none;}a:visited{color:#000000;text-decoration:none;}a:hover{color:#FF0000;text-decoration:underline;}a:active{color:#FF0000;text-decoration:underline;}注意：一定要按照link，visited，hover，actived的順序書寫。允許給html不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式四、CSS選擇器6.群選擇器（GroupSelectors）selector1，selector2，selector3{property:value;}

說明：當(dāng)多個選擇符設(shè)置相同樣式時，可以將選擇符合并為一組。例：h2,h3{ margin:1em0;}td,th{ border:solid1px#000000; padding:5px;}小結(jié)：CSS常用選擇器的類型：通配選擇器（*）類型選擇器（bodyplih1h2h3）ID選擇器（#header#navigation#maincontent）后代選擇器（#headerp#navigationul#footerp）類選擇器（.center.fltrt）偽類（a:linka:visiteda:hovera:active）群選擇器（p,lip,h2,h3）五、CSS的繼承性繼承性是指：如果某個屬性具有繼承性，則屬性作用在父元素的同時，也會作用于其包含的子元素。常用的具有繼承性的屬性：font-familyfont-sizefont-styleline-heightcolortext-aligntext-indenta:linka:visiteda:hovera:active六、層疊和特殊性選擇符的特殊性分成四個等級：用行內(nèi)樣式具有最高特殊性?！癐D選擇符”比“類選擇符”特殊?！邦愡x擇符”比“類型選擇符”特殊。選擇符特殊性行內(nèi)樣式1000ID選擇符100類選擇符、偽類選擇符10類型選擇符1練習(xí)選擇符特殊性style=“”1000#container#content{}200#content.center{}110#contentp{}101#content{}100p.center{}11.center{}10p{}1六、層疊和特殊性……<head><styletype=“text/css”><!--p{ color:#FF0000;}.title{ color:#00FF00;}#s1{ color:#0000FF;}--></style></head><body><pid=“s1”class=“title”>敬業(yè)博學(xué)求實(shí)創(chuàng)新</p></body>……例：……<head><styletype=“text/css”><!--#contentp{ text-align:left;}.center{ text-align:center;}#content.center{ text-align:center;}--></style></head><body><divid=“content”><pclass=“center”>敬業(yè)博學(xué)求實(shí)創(chuàng)新</p></div></body>……例：最近優(yōu)先原則……<head><styletype=“text/css”>#content{ text-align:left;}.title{ text-align:center;}</style></head><body><divid=“content”><pclass=“title”>敬業(yè)博學(xué)求實(shí)創(chuàng)新</p></div></body>……例：七、盒模型塊級元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>內(nèi)聯(lián)元素<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>內(nèi)聯(lián)塊狀元素<img>、<input>七、元素分類-塊級元素在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是塊級元素。設(shè)置display:block就是將元素顯示為塊級元素。如下代碼就是將行內(nèi)元素a轉(zhuǎn)換為塊狀元素，從頁使用a元素具有塊狀元素特點(diǎn)。a{display:block;}塊級元素特點(diǎn)：1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨(dú)占一行）2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度。七、元素分類-行內(nèi)元素在html中，<span>、<a>、<label>、<input>、

<img>、<strong>和<em>就是典型的行內(nèi)元素（inline）元素。當(dāng)然塊狀元素也可以通過代碼display:inli

溫馨提示

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

評論

0/150

提交評論