版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第10章
CSS的基礎(chǔ)知識(shí)第10章
CSS的基礎(chǔ)知識(shí)110.1什么是樣式表10.2樣式表的基本結(jié)構(gòu)10.3如何在網(wǎng)頁(yè)中加入css10.4div與span標(biāo)簽10.5CSS的幾個(gè)特性
第10章CSS的基礎(chǔ)知識(shí)10.1什么是樣式表第10章CSS的基礎(chǔ)知識(shí)2CSS是CascadingStyleSheet的縮寫(xiě)。譯作「層疊樣式表單」。樣式：網(wǎng)頁(yè)的內(nèi)容以什么樣的形式顯示出來(lái)，如文字的大小、顏色，圖片的大小、插入的位置等。層疊：當(dāng)HTML文件引用CSS文件的時(shí)候，如果CSS所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來(lái)處理網(wǎng)頁(yè)中內(nèi)容的樣式。10.1什么是樣式表CSS是CascadingStyleSheet的縮3CSS主要是用于控制網(wǎng)頁(yè)元素的顯示方式樣式表的宗旨就是將結(jié)構(gòu)(內(nèi)容)和格式分離，HTML標(biāo)記只控制網(wǎng)頁(yè)的內(nèi)容，內(nèi)容的樣式則交由CSS來(lái)控制。CSS也是一種標(biāo)記語(yǔ)言，有很多屬性來(lái)源于HTML，它也需要通過(guò)瀏覽器解釋執(zhí)行。10.1什么是樣式表CSS主要是用于控制網(wǎng)頁(yè)元素的顯示方式10.1什么是樣410.2樣式表的基本結(jié)構(gòu)一個(gè)樣式表由許多樣式規(guī)則組成的，用以告訴瀏覽器怎樣去顯示一個(gè)網(wǎng)頁(yè)文檔。
樣式表的核心是規(guī)則，其格式如下：
Selector定義樣式作用的對(duì)象property為CSS屬性，value為屬性對(duì)應(yīng)的值Selector
{property1:value1;
property2:value2;
property3:value3;…}10.2樣式表的基本結(jié)構(gòu)一個(gè)樣式表由許多樣式規(guī)則組成的，5樣式定義的語(yǔ)法示例
H1{text-align:center;font-family:黑體}選擇器樣式定義樣式屬性屬性取值樣式定義的語(yǔ)法示例H1{text-align:cente6常用Selector類型HTML標(biāo)記符用戶定義的類用戶定義的ID虛類常用Selector類型HTML標(biāo)記符7HTML標(biāo)記符的SelectorHTML標(biāo)記符是最常用的selector，它重新定義了HTML標(biāo)記符的顯示效果。例如：H1{text-align:center;color:red}使所有用H1標(biāo)記符修飾的內(nèi)容都居中和用紅色顯示。示例如下HTML標(biāo)記符的SelectorHTML標(biāo)記符是最常用的se8例10-1：建立一個(gè)簡(jiǎn)單的樣式表<html><head><title>簡(jiǎn)單的樣式表</title><styletype="text/css"><!--h1{color:red;font-size:35px;font-family:黑體}p{background:yellow;color:blue;font-size:25px;font-family:隸書(shū)}--></style></head><bodybgcolor=lightblue><center><h1>樣式表</h1><p>這是一個(gè)簡(jiǎn)單的樣式表</p></center></body></html>例10-1：建立一個(gè)簡(jiǎn)單的樣式表9網(wǎng)頁(yè)設(shè)計(jì)-CSS的基礎(chǔ)知識(shí)課件10用戶定義類定義方式表示任何帶有class屬性為classname的標(biāo)記符都采用所定義的樣式。.classname
{property1:value1;
property2:value2;
property3:value3;…}用戶定義類定義方式.classname{property111定義方式*.classname{樣式屬性:屬性值;
樣式屬性:屬性值;......}所有HTML標(biāo)簽都可引用它*符號(hào)可以省略HTML標(biāo)簽.classname{樣式屬性:屬性值;
樣式屬性:屬性值;......}只有該指定的標(biāo)簽才能引用它12定義方式*.classname{樣式屬性:屬性值;
舉例如下<html><head><title>CSS類選擇器使用</title><styletype="text/css">.red{color:red;font-size:18px;}
.green{color:green;font-size:25px}
</style>
</head><body> <pclass="red">class選擇器red</p> <pclass="green">class選擇器green</p> <h3class="green">h3也同樣適用</p></body></html>
13舉例如下13網(wǎng)頁(yè)設(shè)計(jì)-CSS的基礎(chǔ)知識(shí)課件14用戶定義IDidname{property:value…}表示任何ID屬性為idname的標(biāo)記符都采用所定義的樣式。用戶定義ID與class的使用方法基本相同，不同之處在于ID選擇器只能在HTML碳中使用一次，因此其針對(duì)性更強(qiáng)。用戶定義IDidname{property:value…}15#idname{樣式屬性:屬性值;
樣式屬性:屬性值;......}所有HTML標(biāo)簽都可引用它HTML標(biāo)簽#idname
{樣式屬性:屬性值;
樣式屬性:屬性值;......}只有該指定的標(biāo)簽才能引用它定義方式16#idname{樣式屬性:屬性值;
舉例如下<html><head><title>CSSid選擇器使用</title><styletype="text/css">#pp{color:red;font-family:黑體}p#pt{color:blue;font-family:仿宋}</style></head><body>
<h1id=pp>這是我們定義的PP類</h1><pid=pp>這是我們定義的PP</p><pid=pt>這是我們定義的PT類</p></body></html>舉例如下17網(wǎng)頁(yè)設(shè)計(jì)-CSS的基礎(chǔ)知識(shí)課件18ID使用注意事項(xiàng)在很多瀏覽器下，ID選擇器可以用于多個(gè)標(biāo)記。但每個(gè)標(biāo)記定義的id不只是CSS可調(diào)用，JavaScript等其他腳本語(yǔ)言同樣也可以調(diào)用，因?yàn)檫@個(gè)特性，所以不要將ID選擇器用于多個(gè)標(biāo)記，否則會(huì)出現(xiàn)意想不同的錯(cuò)誤。例，如果一個(gè)HTML中有兩個(gè)相同的id標(biāo)記，那么將會(huì)導(dǎo)致JavaScript在查找id進(jìn)出錯(cuò)，例如函數(shù)getElementById().ID使用注意事項(xiàng)在很多瀏覽器下，ID選擇器可以用于多個(gè)標(biāo)記。19CSS屬性單位絕對(duì)長(zhǎng)度單位：網(wǎng)頁(yè)定義上常常使用的絕對(duì)長(zhǎng)度值由厘米（cm）、毫米（mm）、英寸（in）、磅（pt）、派卡（pc）等等單位英寸(in)厘米(cm)毫米(mm)磅(pt)派卡(pc)英寸1.02.5425.4726派卡0.166670.42334.233121.0厘米0.393711028.34644.7244毫米0.039370.11.02.834640.47244磅0.013890.03528060.3528061.00.83333CSS屬性單位絕對(duì)長(zhǎng)度單位：網(wǎng)頁(yè)定義上常常使用的絕對(duì)長(zhǎng)度值由20相對(duì)長(zhǎng)度單位：CSS還支持下列三種長(zhǎng)度的相對(duì)單位
em（當(dāng)前字體中字母M的寬度）
ex（當(dāng)前字體中字母X的高度）
px（一個(gè)象素的大?。Ｏ鄬?duì)長(zhǎng)度單位：21顏色單位：顏色名:#RRGGBBrgb(rrr,ggg,bbb)rgb(rrr%,ggg%,bbb%)顏色單位：2210.3如何在網(wǎng)頁(yè)中加入css可以使用四種方法將樣式表加入到網(wǎng)頁(yè)中
內(nèi)聯(lián)樣式(InlineStyles)
嵌入一個(gè)樣式表
(EmbeddingaStyleBlock)將一個(gè)外部樣式表鏈接到網(wǎng)頁(yè)
輸入一個(gè)樣式表以上四種方法，可分成內(nèi)部樣式表（前兩者）、外部樣式表（后兩者）兩類。10.3如何在網(wǎng)頁(yè)中加入css可以使用四種方法將樣式表加2310.3.1內(nèi)聯(lián)樣式樣式可以使用STYLE屬性內(nèi)聯(lián)（有的也叫“行內(nèi)方式”）。STYLE屬性可以應(yīng)用于任意BODY內(nèi)的HTML元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。其語(yǔ)法如下：
<HTML標(biāo)簽名稱style="樣式屬性:屬性值；樣式屬性:屬性值...">10.3.1內(nèi)聯(lián)樣式樣式可以使用STYLE屬性內(nèi)聯(lián)（有的也叫24以下是一個(gè)例子<h1style=“text-align:center;color:blue”><Pstyle=“color:red;font-family:‘NewCenturySchoolbook’,serif”>
這段的樣式是紅色的NewCenturySchoolbook字體。</P>缺點(diǎn)：因?yàn)楹托枰故镜膬?nèi)容混合在一起，沒(méi)有實(shí)現(xiàn)兩者的分離。缺點(diǎn)：在標(biāo)簽中，用設(shè)置style屬性的方法，一次只能控制一個(gè)標(biāo)簽的樣式以下是一個(gè)例子<h1style=“text-align:c2510.3.2嵌入一個(gè)樣式表將樣式表信息都列于HTML文檔的頭部基本語(yǔ)法如下：<STYLETYPE=“text/css”MEDIA=screen>
<!–
樣式規(guī)則定義
-->
</STYLE>10.3.2嵌入一個(gè)樣式表將樣式表信息都列于HTML文檔26示例：<STYLETYPE="text/css"MEDIA=screen>
<!–
BODY{background:url(foo.gif);color:black}
P.EM{background:yellow;color:black}
.note{margin-left:5em;margin-right:5em}
-->
</STYLE>STYLE元素放在文檔的HEAD部分。必須的TYPE屬性用于指定類型為“text/css”
在STYLE中可指定MEDIA屬性。缺點(diǎn)：只限于一個(gè)頁(yè)面內(nèi)使用示例：STYLE元素放在文檔的HEAD部分。27樣式表的規(guī)則單獨(dú)保存在一個(gè)文件中外部的樣式表可以通過(guò)HTML的LINK元素連接到HTML文檔中一個(gè)樣式表文件可鏈接到多個(gè)HTML文件10.3.3將一個(gè)外部樣式表鏈接到網(wǎng)頁(yè)樣式表的規(guī)則單獨(dú)保存在一個(gè)文件中10.3.3將一個(gè)外部28基本語(yǔ)法如下：
<head>
<title>...</title>
<linkRel=stylesheethref="ab.css"type="text/css">
</head>說(shuō)明：外部樣式表文件中不能含有任何HTML標(biāo)簽。樣式表僅僅由樣式表規(guī)則組成。外部樣式表文件中，無(wú)須使用注釋標(biāo)簽。必須將CSS文件與HTML文件一起發(fā)布到服務(wù)器中。在網(wǎng)頁(yè)被打開(kāi)時(shí)，瀏覽器將依照鏈接標(biāo)簽將含有鏈接外部樣式表文件的HTML網(wǎng)頁(yè)按照樣式表規(guī)則顯示?；菊Z(yǔ)法如下：
<head>
<title>...<29LINK標(biāo)簽:<LINKREL=StyleSheetHREF=“aaa.css”TYPE=“text/css”TITLE=“8-bitColorStyle”MEDIA=“screen,print”>
TYPE屬性用于指定類型為text/cssMEDIA屬性可選，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有screen(缺省值)，提交到計(jì)算機(jī)屏幕；print，輸出到打印機(jī)；projection，提交到投影機(jī)；aural，揚(yáng)聲器；braille，提交到凸字觸覺(jué)感知設(shè)備；tty，電傳打字機(jī)(使用固定的字體)；tv，電視機(jī)；all，所有輸出設(shè)備。多樣的媒體通過(guò)用逗號(hào)隔開(kāi)的列表或值all指定。LINK標(biāo)簽:30REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet指定一個(gè)固定或首選的樣式，而REL=“AlternateStyleSheet”定義一個(gè)交互樣式。固定樣式在樣式表激活時(shí)總被應(yīng)用。TITLE屬性：給樣式指定一個(gè)標(biāo)題，可將多個(gè)樣式指定同一個(gè)標(biāo)題，從而組合成一個(gè)首選樣式REL=StyleSheet和一個(gè)TITLE屬性的組合指定一個(gè)首選的樣式每個(gè)網(wǎng)頁(yè)不能指定多于一個(gè)的首選樣式。REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。RE31一個(gè)樣式表可以使用CSS的@import指令輸入到網(wǎng)頁(yè)中。這個(gè)指令用于一個(gè)CSS文件或HTML的STYLE元素內(nèi)部。其語(yǔ)法如下：<styletype="text/css"><!—@importurl(外部樣式表的文件名稱);--></style>說(shuō)明：
⑴import語(yǔ)句后的“；”號(hào)是必須的。
⑵要輸入的樣式表文件的擴(kuò)展名為.css。10.3.4引入一個(gè)樣式表32一個(gè)樣式表可以使用CSS的@import指令輸入到網(wǎng)頁(yè)中。樣式的優(yōu)先級(jí)樣式的優(yōu)先級(jí)遵循“就近優(yōu)先”的原則，也就是說(shuō)，距離所修飾對(duì)象越近的樣式，其優(yōu)先級(jí)越高。樣式如果沖突，則采用高優(yōu)先級(jí)樣式；如果不沖突，則采用疊加的樣式效果。33樣式的優(yōu)先級(jí)樣式的優(yōu)先級(jí)遵循“就近優(yōu)先”的原則，也就是說(shuō)，距樣式的優(yōu)先級(jí)示例<HTML><HEAD><LINKrel="stylesheet"type="text/css"href="test.css"><STYLE>
P{color:red}</STYLE></HEAD><BODY><P>正文內(nèi)容</P></BODY></HTML>其中，test.css的內(nèi)容如下：P{color:blue}樣式的優(yōu)先級(jí)示例<HTML>34樣式的優(yōu)先級(jí)示例<HTML><HEAD><STYLE>
P{color:red}</STYLE><LINKrel="stylesheet"type="text/css"href="test.css"></HEAD><BODY><P>正文內(nèi)容</P></BODY></HTML>其中，test.css的內(nèi)容如下：P{color:blue}樣式的優(yōu)先級(jí)示例<HTML>3510.5div與span標(biāo)簽10.536div標(biāo)簽DIV元素：“division”，“部分”的簡(jiǎn)稱，是一個(gè)塊級(jí)元素。它是一個(gè)成對(duì)標(biāo)簽DIV可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。通過(guò)它可以直接引用樣式，不再需要依附于HTML標(biāo)簽了它能接受STYLE、CLASS和ID屬性。37div標(biāo)簽DIV元素：“division”，“部分”的簡(jiǎn)稱
其語(yǔ)法如下：
<divid=指定樣式名稱>......</div>或者：<divclass=指定樣式名稱>......</div>
或者：<divstyle="樣式屬性:屬性值；樣式屬性:屬性值...">......</div>在使用<div>標(biāo)記時(shí)，可以使用width與height屬性設(shè)置區(qū)域的大小。38其語(yǔ)法如下：38<html><head><title>DIV的簡(jiǎn)單使用</title><styletype="text/css">div{font-size:24px; font-weight:bold; font-family:隸書(shū); color:#00F; background-color:#CFF; text-align:center; width:400; height:100; border-style:double; } </style></head><body> <div>CSS功能很強(qiáng)大，<br/>這就是DIV的一個(gè)方塊。</div></body></html><html><head><title>DIV的簡(jiǎn)單使用39網(wǎng)頁(yè)設(shè)計(jì)-CSS的基礎(chǔ)知識(shí)課件40span標(biāo)簽<span>標(biāo)簽一般用在網(wǎng)頁(yè)中某一小段文字。其語(yǔ)法如下：<spanid=指定樣式名稱>......</span>
或者
<spanclass=指定樣式名稱>......</span>span標(biāo)簽被加入到HTML中的主要目的是用于樣式表，所以當(dāng)樣式表失效時(shí)它就沒(méi)有任何作用。span標(biāo)簽可以使用clsss和id類選擇符。41span標(biāo)簽<span>標(biāo)簽一般用在網(wǎng)頁(yè)中某一小段文字。41<div>與<span>的差異：⑴在<div>區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文會(huì)自動(dòng)換行；而<span>是行內(nèi)元素，其區(qū)域內(nèi)的對(duì)象與區(qū)域外的上下文不會(huì)自動(dòng)換行。⑵<div>與<span>標(biāo)簽可同時(shí)使用，但建議<div>標(biāo)簽可包含<span>，但<span>最好不要包含<div>標(biāo)簽，否則會(huì)造成<span>標(biāo)簽
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 預(yù)防消防火災(zāi)課件
- 跑步培訓(xùn)分享：從入門(mén)到進(jìn)階的科學(xué)跑步指南
- 項(xiàng)目管理課件教學(xué)
- 高風(fēng)險(xiǎn)診療技術(shù)操作授權(quán)及審批管理制度培訓(xùn)
- 希沃教學(xué)一體機(jī)賦能數(shù)字化教學(xué)培訓(xùn)大綱
- 保安門(mén)衛(wèi)禮儀培訓(xùn)
- 2025年飲料及冷飲服務(wù)合作協(xié)議書(shū)
- 城鎮(zhèn)污水管網(wǎng)建設(shè)工程申請(qǐng)報(bào)告（模板范文）
- 鄉(xiāng)村振興戰(zhàn)略工作實(shí)施方案
- 2025年建筑鋼材：螺紋鋼項(xiàng)目合作計(jì)劃書(shū)
- 四川華西集團(tuán)有限公司總部管理人員選聘筆試真題2024
- 山東濟(jì)南綜保控股集團(tuán)招聘筆試真題2024
- 商場(chǎng)動(dòng)火作業(yè)培訓(xùn)
- 2025年KET劍橋英語(yǔ)五級(jí)考試全真試卷（秋季版：含答案解析）
- 德育培訓(xùn)課件
- 2025年企業(yè)管理專業(yè)考試試題及答案
- 版2025-2030中國(guó)天然火山灰市場(chǎng)深度調(diào)查與未來(lái)發(fā)展趨勢(shì)研究報(bào)告
- 2025年急性肺栓塞診斷和治療指南解讀課件
- JHA工作危害分析專項(xiàng)培訓(xùn)
- 18CrNiMo7-6齒輪鋼滲碳工藝優(yōu)化及其對(duì)疲勞性能的影響研究
- 2025年環(huán)境評(píng)價(jià)公眾參與制度創(chuàng)新與機(jī)制優(yōu)化分析
評(píng)論
0/150
提交評(píng)論