版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
1.css樣式控制html文件的幾種方式
2.css選擇器幾種類型
3.css選擇器聲明方式
4.css選擇器嵌套
5.css選擇器繼承
1.CSS樣式表控制html貢畫的幾種方式
如何使用CSS控制頁面，以
及其控制頁面的各種方法,包括:
(1)內(nèi)嵌式
(2)行內(nèi)樣式
(3)鏈接式
(4)導(dǎo)入式
?(1)內(nèi)嵌式
■CSS一般位于HTML文件的頭部，即<head>
與</head>標(biāo)記內(nèi)，并且以<style》開始，以
</style>結(jié)束，例如如下的代碼定義了
<body>><td>><th>標(biāo)記使用的字號。
口<styletype二〃text/css〃>
口body,td,th{
口font-size:12px;
□1
□<style
（2）行內(nèi)樣4R
代碼style=〃font-size:10pt;color:j
#FF6600;〃用于控制段落文字的字號和顏色，（
采用〈style=〃〃〉的格式把樣式寫在HTML中）
的任意行內(nèi)，“二”右邊的屬性設(shè)置放入雙（
引號中，多個屬性用分隔。J
例：J
<divstyle="border-bottom:lpx|
dashed;"x/div>）
(3)鏈接式
CSS的定義既可以在HTML文檔內(nèi)部，也
可以單獨(dú)在外部文件(例如style.css)中
定義。把編輯好的CSS文檔保存成外部文件,
然后在〈HEAD〉中添加如下所示的代碼：
指鏈接與文檔的關(guān)系，指鏈接
的是一個樣式表文件
□〈linkrel二〃stylesheet“href二〃style.css〃
type二〃text/css〃>
(4)導(dǎo)入樣式'
導(dǎo)入樣式和鏈接樣式的功能基本相同，只是語法和運(yùn)作方
式上略有區(qū)別.
導(dǎo)入的樣式表在HTML文件初始化時，會被導(dǎo)入到HTML
文件內(nèi)，作為文件的一部分，類似內(nèi)嵌式的效果。而鏈接式樣
式表則是在HTML的標(biāo)記需要格式時才以鏈接的方式引用。
導(dǎo)如樣式表，常用格式：
?importurl(sheetl.css)
?importurl(usheetl.css,J)
?importurl('sheetl.css3)
?importsheetl.css
?importusheetl.css,J
?import'shcetl.css'
導(dǎo)入樣式表的最大用處在于可以讓一個HTML文件導(dǎo)
入很多的樣式表，我們可以同時用多個@import語句將
1.css和2.css等等同時導(dǎo)入到HTML中。
<html><head>標(biāo)題〃title)
〈styletype="text/cssH>
?importurl(l.css);
?importurl(2.css);
</style>
</head>
<body>
<h2>CSS標(biāo)題l〃h2>
<p>紫色、粗體、下劃線、25Px的效果l</p>
42>CSS標(biāo)題2〃h2>
<p>紫色、粗體、下劃線、25Px的效果2</p>
43>CSS標(biāo)題3</h3>
卬》紫色、粗體、下劃線、25Px的效果3</p>
</body>
l.Css又件:2css文件：R
h2(h3(V
color：#OOOOFF;color：#OOFFFFS
}
font-style：italic;
P(
color：#FFOOFF;font-size：4Opx;
text-decoration：underline;}
font-weight：bold;
font-size：2Opx;
}CSS標(biāo)題1
紫色、粗體、下劃線、25Px的效
CSS標(biāo)題2
紫色、粗體、下劃線、
紫色、粗體、下劃線、25Px的效果3
Css樣式四種嵌入方式優(yōu)先\
級
如果在各種方法中設(shè)置的屬性不一樣，比如內(nèi)嵌式設(shè)置字
體為宋體，鏈接式設(shè)置顏色為紅色，那么顯示結(jié)果會兩
者同時生效，為宋體紅色字.
Css樣式四種嵌入方式優(yōu)先級由高到低：
?行內(nèi)樣式優(yōu)先級最高，
?其次是采用＜link＞標(biāo)記的鏈接式，
?再次是位于＜style＞〈/styl0之間的內(nèi)嵌式,
?最后是@import導(dǎo)入式.
2、css選擇器V
選擇器(selector)是CSS中很重要的概念，所有HTML\
語言中的標(biāo)記都是通過不同的CSS選擇器進(jìn)行控制的。
?(1)標(biāo)記選擇器
?一個HTML頁面由很多不同標(biāo)記組成,
而CSS標(biāo)記選擇器就是聲明哪些標(biāo)記采用
哪種CSS樣式。
聲明聲明
標(biāo)記選擇器屬性值屬性值
(2)類別選擇器\
?所有標(biāo)記都可通過class屬性設(shè)置類選用
器
選擇器
?例如1:
?<html>
?<head><titlc>class選擇器
?〈styletype=,,text/css">
?.one(
?color：red;/*紅色*/
?font-size：18px;}/*文字大小*/
?.two(
?color-green;/*綠色*/
?font-size：20px;}/*文字大小*/
?.three{
?color：cyan;/*青色*/
?font-size：22px;}/*文字大小*/
?</style>
?</head>
<body>
<pclass="onc">class選擇器l</p>
<pclass="two">class選擇器2</p>
<pclass="thrce">class選擇器3</p>
<h3class="two">h3同樣適用</h3>
例如2：
<html>
<head>
<titlc>class選擇器與標(biāo)記選擇器
〈styletype="text/css">
p(/*標(biāo)記選擇器*/
color：blue;
font-size：18px;
}
,special{/*類別選擇器*/
color：red;/*紅色*/
font-size：23px;/*文字大小*/
}
</style)
</head>
<body>
卬）class選擇器與標(biāo)記選擇器l</p>
<p>dass選擇器與標(biāo)記選擇器2</p>
<p>dass選擇器與標(biāo)記選擇器3</p>
<pclass="specialbclass選擇器與標(biāo)記選擇器4</p>
卬）class選擇器與標(biāo)記選擇器5<儂
?class選擇器與標(biāo)記選擇器-Microsoft.
<p>class選擇器與標(biāo)記選擇器6勺文件電）編輯?查看⑦收藏?工具⑦幫?產(chǎn)
3團(tuán)心人搜索
</body>匕[」S]D:\網(wǎng)站規(guī)劃與設(shè)計，書中實例魂vj目轉(zhuǎn)到悵搭》
</html>class選擇器與標(biāo)記選擇器1
首先通過標(biāo)記選擇器定義卬）標(biāo)記的class選擇器與標(biāo)記選擇器2
class選擇器與標(biāo)記選擇器3
全局顯示方案，然后再通過一個das
class選擇器與標(biāo)記選擇器4
選擇器對需要突出的<p>標(biāo)記進(jìn)行單2
class選擇器與標(biāo)記選擇器5
設(shè)置，這樣大大提高了代碼的編寫為class選擇器與標(biāo)記選擇器6
率。匐完畢&我的電腦
另外類別選擇器還有一種很直觀的使用方法，就
直接在標(biāo)記聲明后接類別名稱，以次來區(qū)別該標(biāo)記。
類別名稱聲明聲明
標(biāo)記選擇器屬性值屬性值
例如3
<html>
<head>
標(biāo)記選擇器.dass</title>
〈styletype=,,text/css">
h3(/*標(biāo)記選擇器*/
color：blue;
font-size：18px;
}
h3.special(/*標(biāo)記.類別選擇器*/
color：red;/*紅色*/
font-size：23px;/*文字大小*/
}
.special/*類別選擇器*/
color：green;
}
〈/style)
</head>
<body>
<h3>標(biāo)記選擇器.classk/h3>
<h3>標(biāo)記選擇器.class2〈/h3>
<h3class="special"）標(biāo)t己選擇器.class3〈/h3>
<h3>標(biāo)記選擇器.dass4</h3>
號標(biāo)記選擇等.class-lie..
<h3>標(biāo)記選擇器.dass5</h3>文件國）編輯?查看9收藏Q?
使用于別的標(biāo)記〃產(chǎn)1面
<pclass="special"）p>七‘二電加網(wǎng)站規(guī)劃，““轉(zhuǎn)到連接》
</body>標(biāo)記選擇器.classl
</html>標(biāo)記選擇器.class2
以上代碼定義了<h3>的風(fēng)格樣式，同時標(biāo)記選擇器.class3
單獨(dú)定義了h3.special,用于特殊控制，標(biāo)記選擇器.class4
而在這個h3.special中定義的風(fēng)格僅僅標(biāo)記選擇器.class5
使用于別的標(biāo)記
適用于<h3class二"special”）標(biāo)記，而不
i我的電腦
影響單獨(dú)的special選擇器。
在HTML標(biāo)記中，還可以同時給一個標(biāo)記運(yùn)用多個
Class類別選擇器，從而將兩個類別的樣式風(fēng)格同時運(yùn)
用到一個標(biāo)記中。例如4
<html>
<head>
同時使用兩個dass</title>
〈styletype="text/css,,>
.one（
color：blue;/*顏色*/
}
.two{
font-size：22px;/*字體大小*/
}
</style）
</head>
<body>
<h4>一種都不使用</h4>
<h4class二"onc">只使用第一種</h4>
<h4class="two">只使用第二種</h4>
<h4class="onetwo”>同時使用兩種class</h4>
<h4>一種都不使用</h4>-1同時使用兩個class-■…Q叵|區(qū)|
文件但）編輯?查看9收品》t
</body>后道?；剜蛐?/p>
</html>地址1叫?小網(wǎng)站規(guī)；.“|H轉(zhuǎn)到
一種都不使用
只使用第一種
只使用第二種
同時使用兩種class
一種都不使用
(3)工D選擇器飛
工D選擇器的使用方法跟class選擇器基本相同，不同、
之處在于工D選擇器只能在HTML頁面中使用一次，因此
其針對性更強(qiáng)。在HTML的標(biāo)記中只需要利用id屬性，就
可以直接調(diào)用CSS中的工。選擇器，格式如下：
聲明聲明
#id
工D選擇器屬性值屬性值
例如5：
<html>
<head>
工D選擇器</title>
〈styletype=l,text/css">
<*l―
#one{
font-weight：bold;/*粗體*/
}
#two{
font-size：30px;/*字體大小*/
color：#009900;/*顏色*/
}
-->
</style>
</head>
<body>
卬id二“one”>工D選擇器l</p>
<pid二"two”>工D選擇器2</p)
<pid=工口詵擇器3〃p>X
<pid="onetwo”>工力詵擇器3</
</body>qID選擇等-licroso匕J叵|區(qū)|
</html>
3、選擇器聲明飛
在聲明各種CSS選擇器時,如果某些選擇器的風(fēng)格是完
全相同的，或者部分相同,這時便可以利用集體聲明的方法，
將風(fēng)格相同的CSS選擇器同時聲明.例如6
<html>
<head>〈title)集體聲明〃title)
〈styletype=,,text/css">
/*集體聲明*/
hl,h2,h3zh4zh5,p{
color：purple;/*文字顏色*/
font-size：15px;/*字體大小*/
}
/*集體聲明*/
h2.specialz.specialz#one{
text-decoration：underline;/*下劃線*/
}
</style>
</head>
<body>
<hl>集體聲明明〃hl>
<h2class="special”）集體聲明h2<
<h3>集體聲明h3</h3>
<h4>集體聲明h4〃h4>
<h5>集體聲明h5〃h5>
<p>集體聲明pl</p>
<pclass="special"）集體聲明p2</|
<pid="one”>集體聲明p3〃p>
</body>
</html>
另外，對于實際網(wǎng)站中的一些小型頁面，例如彈出的小
對話框和上傳附件的小窗口等，希望這些頁面中所有的標(biāo)
記都使用同一種CSS樣式，但又不希望逐個來加入集體聲
明列表.這時可以利用全局聲明符號,例如27：
<html>
<head>〈title）全局聲明
〈styletype=,,text/css">
*{/*全局聲明*/
color：purple;/*文字顏色*/
font-size：15px;/*字體大小*/
}
hZ.special,.special,#one{/*集體聲明*/
text-decoration：underline;/*下劃線*/
}
</style>
</head>
<body>
<hl>全局聲明hk/hl>
<h2class="special"）全局聲日
<h3>全局聲明h3</h3>
<h4>全局聲明h4</h4>
<h5>全局聲明h5</h5>
卬）全局聲明pl</p）
<pclass二"special”）全局聲明
<pid="one”>全局聲明p3〃p）
</body>
</html>
4、選擇器的嵌套
在CSS選擇器中，還可以通過嵌套的方式,對特殊位置的
HTML標(biāo)記進(jìn)行聲明，例如卬></p>之間包含<bx/b>標(biāo)記時,
就可以使用嵌套選擇器進(jìn)行相應(yīng)的控制，例如8：
<html>
<hcad><tit3css選擇器的嵌套聲明〃title)
〈styletype=,,text/css">
pb(/*嵌套聲明*/
1
color：maroon;/*?爭CSS選擇器的或套.一□0?
text-decoration：underline;/*下戈I文件9銅輯⑥查看也》；?(
}0后退O叵I團(tuán)
</style>：購：叫?D：F|E］轉(zhuǎn)到?梃報》
</head>
<body>嵌套使用css標(biāo)記的方法
<p>嵌套使<b>用CSS</b>標(biāo)記的方法</p>嵌套之外的標(biāo)記不生效
般套之外的<b>標(biāo)記〃b>不生效
</body>J我的電腦
</html>
通過將b選擇器嵌套在p選擇器中進(jìn)行聲明，顯示效果'
適用于卬＞〃p＞之間的＜b＞標(biāo)記，而其外的＜9標(biāo)記并不產(chǎn)國
任何效果.
嵌套選擇器的使用非常廣泛，不只是嵌套的標(biāo)記本身,
類別選擇器和工D選擇器都可以進(jìn)行嵌套,例如：
.speciali{color：red)
#oneli{padding-left：5px}
td.top.topistrong{font-size：16px)
使用了屬性.special的標(biāo)記里包含＜i＞
工D為one的標(biāo)記里包含的＜li＞
使用了.t叩類別的＜td＞標(biāo)記中包含的.topi類別的標(biāo)記淇中
包含了(strong)標(biāo)記所聲明的風(fēng)格樣式
例如：
<tdclass二“top”>
<pclass二"top「>
其他內(nèi)容<strong>CSS控制的部分
</sirong）其他內(nèi)容
</p>
</td>
5、CSS的繼承飛
(1)父子關(guān)系\
所有的CSS語句都是基于各個標(biāo)記之間的父子關(guān)系的】
為了更好的理解父子關(guān)系,首先從HTML文件的組織結(jié)構(gòu)
入手，例如9
<html><head>父子關(guān)系
〈basetarget="_blank">
<style》
colormed;/*顏色*/
text-decoration：underline;/*下劃線*/
}
hlem(/*嵌套選擇器*/
color：#004400;/*顏色*/
font-size：40px;/*字體大小*/
}
</style></head>
<p>歡迎來到祖國的首都<cm>北京這里是全
<strong>
<<f???^^，81101/0七｝1701"><。巾>經(jīng)濟(jì)</，1^^7<1)
、文化7---/
/strong)
的中心
<7p>
<ul>
<li>在這里，你可以：
/<ul>
/<li>感受大自然的美麗</li>
<liM本驗生活的節(jié)奏〃li>
\<li>領(lǐng)略首都的激情與活力</li>
x/ul>
</li>
/<li>你還可以：
//<0><li>去八達(dá)嶺爬長城</li>
<li>去香山看紅葉</li>
\\<li>去王府井逛夜市
\</ol>
</ul>
<p>如果您有任何問題，歡迎h(huán)ref二"contQctus”>聯(lián)系我們
</a></p>
</body>
</html>
q父子關(guān)系-licrosoftInternetExplorer□0?
文件g編輯?查看9收藏（A）工具?幫助國）『
\QO囪閡?。搜索收藏夾0氏瑞3
地址見“電D八網(wǎng)站規(guī)劃與設(shè)計年中實例,第2章@9htmlv1轉(zhuǎn)到讒掙5
祖國的首都也成
歡迎來到祖國的首都老京，這里是全國政治、皿、文化的中心
?在這里，你可以：
。感受大自然的美麗
O體驗生活的節(jié)奏
O領(lǐng)略首都的激情與活力
?你還可以：
1.去八達(dá)嶺爬長城
2.去香山看紅葉
3.去王府井逛夜市
如果您有任何問題，歡迎聯(lián)系我們
置才我的電腦
html
head
hl
titlebase
emem
lililililili
(2)CSS繼承的運(yùn)用飛
css繼承是指子標(biāo)記會繼承父標(biāo)記的所有樣式風(fēng)格，然
可以在父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式.
<html><head>父子關(guān)系
<style)
color：red;
}
.Ii2(
color：blue;
}
.lilolli(/*利用CSS繼承關(guān)系*/
font-weight：bold;/*粗體*/
text-decoration：underline;/*下戈峨*/
}
</style></head>
)dy><ul>
<liclass二關(guān)系1一
溫馨提示
- 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年小學(xué)學(xué)校工作總結(jié)參考模板（三篇）
- 2024年學(xué)?？倓?wù)工作計劃范本（二篇）
- 2024年少先隊輔導(dǎo)員工作總結(jié)參考（二篇）
- 2024年年度銷售工作計劃模版（二篇）
- 2024年小學(xué)教師個人教學(xué)工作總結(jié)范本（四篇）
- 2024年學(xué)校消毒通風(fēng)制度樣本（二篇）
- 2024年衛(wèi)生室管理制度樣本（五篇）
- 2024年員工個人年終工作總結(jié)范例（二篇）
- 2024年工商部門工作計劃范本（五篇）
- 【《N公司員工培訓(xùn)問題與完善策略（含問卷）》9500字（論文）】
- 內(nèi)科學(xué)白血病教材教學(xué)課件
- 英語演講與口才課程內(nèi)容
- 危重癥患者系統(tǒng)功能監(jiān)測及護(hù)理課件
- 2021年職高中職數(shù)學(xué)基礎(chǔ)模塊上冊題庫
- 探索低溫冷凍技術(shù)在食品保鮮中的運(yùn)用
- 小班化教學(xué)研究開題報告
- 氨甲環(huán)酸制備工藝
- 干部基本信息審核認(rèn)定表
- 《羊水異?！氛n件
- 痔瘡護(hù)理課件
- 船員勞務(wù)市場分析
評論
0/150
提交評論