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

下載本文檔

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

文檔簡介

第四章CSS基礎知識本章內(nèi)容一、CSS簡介二、在網(wǎng)頁中應用CSS三、CSS基本語法四、CSS選擇器五、CSS的繼承性六、CSS的層疊和特殊性重點難點復習HTML標記<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技術標準，1998年推出CSS2.0技術標準。CSS是CascadingStyleSheets的縮寫，譯為“層疊樣式表”，是用于控制網(wǎng)頁樣式的一種標記性語言。HTML控制網(wǎng)頁內(nèi)容的結構，CSS控制網(wǎng)頁內(nèi)容的樣式。CSS實現(xiàn)了網(wǎng)頁的結構與表現(xiàn)相分離。一、CSS簡介二、在網(wǎng)頁中應用CSS在網(wǎng)頁上應用CSS的三種方法：行內(nèi)樣式（InlineStyles）內(nèi)部樣式表（EmbeddingaStyleBlock）外部樣式表（LinkingtoaStyleSheet）二、在網(wǎng)頁中應用CSS行內(nèi)樣式：在HTML標記的style屬性中設置CSS樣式。例：<html><head><title>泡泡潛水俱樂部歡迎你</title></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務，……</p></body></html>style=“color:#FFFFFF;background-color:#000080”>泡泡潛水俱樂部</h1>

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

文件鏈接到HTML文件上。<linkhref=“style.css”rel=“stylesheet”type=“text/css”></head><body><h1>泡泡潛水俱樂部</h1><P>泡泡潛水俱樂部為你量身打造一流的潛水服務，……</p></body></html>網(wǎng)頁文件CSS文件小結：在網(wǎ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;}使用類選擇器需要兩個步驟：標識類；定義類。四、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不存在的標簽(標簽的某種狀態(tài))設置樣式四、CSS選擇器6.群選擇器（GroupSelectors）selector1，selector2，selector3{property:value;}

說明：當多個選擇符設置相同樣式時，可以將選擇符合并為一組。例：h2,h3{ margin:1em0;}td,th{ border:solid1px#000000; padding:5px;}小結：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選擇符”比“類選擇符”特殊。“類選擇符”比“類型選擇符”特殊。選擇符特殊性行內(nèi)樣式1000ID選擇符100類選擇符、偽類選擇符10類型選擇符1練習選擇符特殊性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è)博學求實創(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è)博學求實創(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è)博學求實創(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>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將行內(nèi)元素a轉(zhuǎn)換為塊狀元素，從頁使用a元素具有塊狀元素特點。a{display:block;}塊級元素特點：1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）2、元素的高度、寬度、行高以及頂和底邊距都可設置。3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。七、元素分類-行內(nèi)元素在html中，<span>、<a>、<label>、<input>、

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

溫馨提示

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

評論

0/150

提交評論