第4章css基礎(chǔ)知識_第1頁
第4章css基礎(chǔ)知識_第2頁
第4章css基礎(chǔ)知識_第3頁
第4章css基礎(chǔ)知識_第4頁
第4章css基礎(chǔ)知識_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第四章CSS基礎(chǔ)知識上節(jié)回顧表格的定義表格模型表格元素table、tr、td、th等表格的題注及分組表格分組表單表單的功能表單元素（form、input、textarea、select、option等）框架的概念多窗口頁面相關(guān)元素（框架集元素、框架元素、無框架元素）鏈接到框架、浮動框架本章內(nèi)容CSS基礎(chǔ)知識基本概念（和傳統(tǒng)HTML做比較）HTML+CSS工作機(jī)制語法特點作用CSS選擇器（id、類型、標(biāo)簽、通配符）什么是CSSCSS的全稱是層疊樣式表(Cascading

Style

Sheets)，又叫級聯(lián)樣式表，簡稱樣式表負(fù)責(zé)網(wǎng)頁中內(nèi)容顯示的外觀<HEAD><STYLE

type="text/css">BODY

{

background:

white;

color:

black}A:link

{

color:

red

}A:visited

{

color:

black

}A:active

{

color:

green

}</STYLE></HEAD><BODY>...

document

body...</BODY>HTML&CSS工作機(jī)制文檔結(jié)構(gòu)和顯示分離即HTML標(biāo)記不管外觀顯示的事情，外觀由CSS來約定并由瀏覽器解釋決定結(jié)構(gòu)與顯示分離的好處是便于網(wǎng)頁的維護(hù)，可以對頁面元素進(jìn)行靈活地處理顯示結(jié)構(gòu)CSSscriptinghtmlDOM瀏覽器顯示結(jié)果為什么用CSS便于修改維護(hù)可以節(jié)省代碼量增強(qiáng)的格式化能力CSS的語法特點在文檔中引入樣式表的標(biāo)志是使用樣式<style>標(biāo)記，并把它放在<head>中語法：樣式名{（[屬性:屬性值];[屬性:屬性值]）}屬性值沒有用引號包圍起來（除非屬性值是有多個詞組成的，例如字體風(fēng)格屬性font-family:"book

antiqua"）樣式表舉例<style

type="TEXT/CSS"><!--.classstyle1{font-family:仿宋;

font-size:12pt;}--〉</style>樣式名屬性名屬性值CSS控制頁面的方式行內(nèi)樣式所有方式中最為直接的一種，它直接對HTML的標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中內(nèi)嵌式將CSS寫在<head></head>之間，并且用<style></style>標(biāo)記進(jìn)行聲明鏈接式使用頻率最高，也是最為實用的方法。將HTML頁面和CSS樣式風(fēng)格分離為兩個或者多個文件，實現(xiàn)了頁面框架HTML代碼與美工CSS代碼的分離。<link

href=“1.css”

type=“text/css”

rel=“stylesheet”/>導(dǎo)入式<style

type="text/css">

@import

url(1.css);

</style>或者import

1.css

可以加單雙引號行內(nèi)樣式行內(nèi)樣式所有方式中最為直接的一種，它直接對HTML的標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中<li><a

href=""#"

style="color:red;font-size:10px;">日用百貨</a></li>內(nèi)嵌樣式內(nèi)嵌樣式所有方式中最為直接的一種，它直接對HTML的標(biāo)記使用style屬性，然后將CSS代碼直接寫在其中<head><styletype="text/css">…..

//樣式定義</style

></head><body>……//HTML內(nèi)容</body>鏈接樣式鏈接樣式分別定義*.css和*.html文件，樣式和內(nèi)容徹底分離，多個網(wǎng)頁可共享同一CSS<link

rel="stylesheet"

href=CSS外部文件名

type="text/css"

/>nav

li

a{padding:8px

10px;}….. //CSS樣式定義<head>……<body>……//HTML內(nèi)容</body>導(dǎo)入樣式行內(nèi)樣式<style

type="text/css">

@import

url(1.css);

</style>或者import

1.css<style

type=“text/css”>@import

url(1.css);</style>@charset

"utf-8";/*CSS

Document

*/body

{font-size:24px;color:#ff7300;}樣式特效案例樣式文字效果<style

tylie="text/css">li{font:12px

宋體;font-weight:bold;font-style:

italictext-align:left;line-height:28px;}.title{letter-spacing:5px;white-space:nowrap;text-decoration:underline;}.bigFont

{font-size:16px;color:red;}</style>所有<li>的默認(rèn)樣式：字體、字號：宋體，12px對齊方式：左對齊行高：28px首行標(biāo)題樣式：字符間距：5px空白處理：不換行

文本修飾：帶下滑線大字體樣式：字號：16px顏色：紅色font字體樣式的縮寫形式，斜體樣式特效案例div{B

{

text-transform:

uppercase;

}C

{

text-transform:

capitalize;font-variant:small-caps;}A:link

{text-decoration:

none；

}A:active

{

text-decoration:

none；

}A:visited

{

text-decoration:

none；

}}設(shè)置所有字母變大寫和每個單詞的第一個字母大寫顯示及正常文字縮小一半尺寸后大寫顯示設(shè)置鏈接的文字不以下劃線的形式顯示樣式特效案例div{background:url(images/bg.jpg)

no-repeat;background-position:

-70px

-60px}背景出現(xiàn)的水平和垂直位置坐標(biāo)，實現(xiàn)各種拍偏移效果設(shè)置背景圖片、不重復(fù)平鋪各種偏移效果樣式特效案例div{background:#ff7300;background:url(“back.gif”)

#ccffcc

repeat-y

top

right;}設(shè)置背景顏色設(shè)置背景是淺綠色，垂直平鋪，位置在

右上角class和id屬性大多數(shù)塊元素都有這兩個屬性id屬性用來作為頁面中某個元素的唯一標(biāo)識class屬性用來指定頁面中的元素屬于某一類（可以是不同標(biāo)記的元素）CSS的四種選擇器CSS的四種選擇器類選擇器又叫class選擇器id選擇器Html元素選擇器通配符選擇器簡單的說選擇器就是在css中創(chuàng)建而在網(wǎng)頁頁面html、jsp、php、中使用。class和id類型的選擇器語法：為class指定樣式的語法是在類名前加上(.)，然后將樣式定義寫在隨后的大括號內(nèi)如：.mystyle{color：blue;}<div

class=“mystyle”>xxxxxxxxxxxxxx</div><p

class=“mystyle”>xxxxxxxxxxxxxx</p>id指定樣式的方法是用(#)取代(.)作為開頭如：#div1{color：green;}<div

id=“div1”>xxxxxxxxxxxxxx</div>class和id型樣式表應(yīng)用舉例<p

class="classstyle1">段落一classstyle1效果</p><p

id="idstyle">段落二idstyle效果</p><p>在一行中<spanclass="classstyle2">使用樣式可以使用<span>標(biāo)記。

classstyle2效果</span></p><div

class="classstyle1">段落三classstyle1效果</div><style

type="TEXT/CSS"><!--.classstyle1{font-family:仿宋;

font-size:12pt;}.classstyle2{font-family:華文楷體;

font-size:15pt;font-style:italic;}#idstyle{font-family:隸書;

font-size:19pt;color:blue;}--></style>HTML選擇器和通配符選擇器HTML選擇器設(shè)置頁面字體的顏色為藍(lán)色body{background-color:red;color:blue;}通配符選擇器如果希望所有的元素都符合某一種樣式，可以使用通配符選擇器各種選擇器優(yōu)先級Id選擇器>類選擇器>html選擇器>通配符選擇器選擇器深入探討（1/2）父子選擇器格式id選擇器/class選擇器+空格+html標(biāo)簽注意：子選擇器跟的標(biāo)簽必須是html可以識別的類選擇器和id選擇器都可以有父子選擇器雖說叫父子，但是可以有多個級別– #style

spanspan{Font-size

:50px;}選擇器深入探討（1/2）一個元素最多有一個id選擇器，可以有多個class選擇器，多個選擇器之間用空格分開當(dāng)class中修飾的元素屬性沖突時，以在css文件中，最后出現(xiàn)的class樣式為準(zhǔn)在css文件中，如果有多個類/id選擇器，他們都有相同的部分，我們可以把這些相同的部分抽取出來放到一起超級鏈接的外觀默認(rèn)情況下瀏覽器給予帶有超級鏈接的文字以特殊的外觀效果IE瀏覽器的默認(rèn)效果文字帶有下劃線文字為藍(lán)色訪問過的文字顏色為紫色鼠標(biāo)浮在文字上方時變成手形使用Dreamweaver進(jìn)行快速設(shè)置見下頁：超級鏈接的外觀默認(rèn)情況下瀏覽器給予帶有超級鏈接的文字以特殊的外觀效果Dreamweaver快速操作：轉(zhuǎn)到設(shè)計區(qū)設(shè)計好文字與鏈接在瀏覽器中預(yù)覽可以看到鏈接默認(rèn)顏色與訪問過的顏色。CSS與超鏈接CSS：a:link（未訪問過的鏈接）a:active（當(dāng)前激活鏈接）a:visited（已訪問過）a:hover（鼠標(biāo)經(jīng)過）Dreamweaver快速操作見下頁：CSS與超鏈接舉例轉(zhuǎn)到代碼區(qū)域?qū)傩詤^(qū)域頁面屬性鏈接(CSS)設(shè)置鏈接顏色，已經(jīng)訪問鏈接，活動鏈接的顏色等，可以更改默認(rèn)樣式，包括要不要下劃線等，設(shè)置好后，代碼自動生成。CSS與超鏈接舉例Dreamweaver在代碼區(qū)自動生成代碼效果圖：<style

type="text/css"><!--a:hover

{font-family:"宋體";font-size:

10pt;font-style:

normal;color:

#66CCFF;text-decoration:

underline;}a:visited

{font-size:

9pt;color:

#660066;}a:link

{font-family:"宋體";

溫馨提示

  • 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

提交評論