網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件_第1頁
網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件_第2頁
網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件_第3頁
網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件_第4頁
網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件_第5頁
已閱讀5頁，還剩42頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第10章

CSS的基礎(chǔ)知識第10章

CSS的基礎(chǔ)知識110.1什么是樣式表10.2樣式表的基本結(jié)構(gòu)10.3如何在網(wǎng)頁中加入css10.4div與span標(biāo)簽10.5CSS的幾個特性

第10章CSS的基礎(chǔ)知識10.1什么是樣式表第10章CSS的基礎(chǔ)知識2CSS是CascadingStyleSheet的縮寫。譯作「層疊樣式表單」。樣式：網(wǎng)頁的內(nèi)容以什么樣的形式顯示出來，如文字的大小、顏色，圖片的大小、插入的位置等。層疊：當(dāng)HTML文件引用CSS文件的時候，如果CSS所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理網(wǎng)頁中內(nèi)容的樣式。10.1什么是樣式表CSS是CascadingStyleSheet的縮3CSS主要是用于控制網(wǎng)頁元素的顯示方式樣式表的宗旨就是將結(jié)構(gòu)(內(nèi)容)和格式分離，HTML標(biāo)記只控制網(wǎng)頁的內(nèi)容，內(nèi)容的樣式則交由CSS來控制。CSS也是一種標(biāo)記語言，有很多屬性來源于HTML，它也需要通過瀏覽器解釋執(zhí)行。10.1什么是樣式表CSS主要是用于控制網(wǎng)頁元素的顯示方式10.1什么是樣410.2樣式表的基本結(jié)構(gòu)一個樣式表由許多樣式規(guī)則組成的，用以告訴瀏覽器怎樣去顯示一個網(wǎng)頁文檔。

樣式表的核心是規(guī)則，其格式如下：

Selector定義樣式作用的對象property為CSS屬性，value為屬性對應(yīng)的值Selector

{property1:value1;

property2:value2;

property3:value3;…}10.2樣式表的基本結(jié)構(gòu)一個樣式表由許多樣式規(guī)則組成的，5樣式定義的語法示例

H1{text-align:center;font-family:黑體}選擇器樣式定義樣式屬性屬性取值樣式定義的語法示例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：建立一個簡單的樣式表<html><head><title>簡單的樣式表</title><styletype="text/css"><!--h1{color:red;font-size:35px;font-family:黑體}p{background:yellow;color:blue;font-size:25px;font-family:隸書}--></style></head><bodybgcolor=lightblue><center><h1>樣式表</h1><p>這是一個簡單的樣式表</p></center></body></html>例10-1：建立一個簡單的樣式表9網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件10用戶定義類定義方式表示任何帶有class屬性為classname的標(biāo)記符都采用所定義的樣式。.classname

{property1:value1;

property2:value2;

property3:value3;…}用戶定義類定義方式.classname{property111定義方式*.classname{樣式屬性:屬性值;

樣式屬性:屬性值;......}所有HTML標(biā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)頁設(shè)計-CSS的基礎(chǔ)知識課件14用戶定義IDidname{property:value…}表示任何ID屬性為idname的標(biāo)記符都采用所定義的樣式。用戶定義ID與class的使用方法基本相同，不同之處在于ID選擇器只能在HTML碳中使用一次，因此其針對性更強。用戶定義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)頁設(shè)計-CSS的基礎(chǔ)知識課件18ID使用注意事項在很多瀏覽器下，ID選擇器可以用于多個標(biāo)記。但每個標(biāo)記定義的id不只是CSS可調(diào)用，JavaScript等其他腳本語言同樣也可以調(diào)用，因為這個特性，所以不要將ID選擇器用于多個標(biāo)記，否則會出現(xiàn)意想不同的錯誤。例，如果一個HTML中有兩個相同的id標(biāo)記，那么將會導(dǎo)致JavaScript在查找id進出錯，例如函數(shù)getElementById().ID使用注意事項在很多瀏覽器下，ID選擇器可以用于多個標(biāo)記。19CSS屬性單位絕對長度單位：網(wǎ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屬性單位絕對長度單位：網(wǎng)頁定義上常常使用的絕對長度值由20相對長度單位：CSS還支持下列三種長度的相對單位

em（當(dāng)前字體中字母M的寬度）

ex（當(dāng)前字體中字母X的高度）

px（一個象素的大?。Ｏ鄬﹂L度單位：21顏色單位：顏色名:#RRGGBBrgb(rrr,ggg,bbb)rgb(rrr%,ggg%,bbb%)顏色單位：2210.3如何在網(wǎng)頁中加入css可以使用四種方法將樣式表加入到網(wǎng)頁中

內(nèi)聯(lián)樣式(InlineStyles)

嵌入一個樣式表

(EmbeddingaStyleBlock)將一個外部樣式表鏈接到網(wǎng)頁

輸入一個樣式表以上四種方法，可分成內(nèi)部樣式表（前兩者）、外部樣式表（后兩者）兩類。10.3如何在網(wǎng)頁中加入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。其語法如下：

<HTML標(biāo)簽名稱style="樣式屬性:屬性值；樣式屬性:屬性值...">10.3.1內(nèi)聯(lián)樣式樣式可以使用STYLE屬性內(nèi)聯(lián)（有的也叫24以下是一個例子<h1style=“text-align:center;color:blue”><Pstyle=“color:red;font-family:‘NewCenturySchoolbook’,serif”>

這段的樣式是紅色的NewCenturySchoolbook字體。</P>缺點：因為和需要展示的內(nèi)容混合在一起，沒有實現(xiàn)兩者的分離。缺點：在標(biāo)簽中，用設(shè)置style屬性的方法，一次只能控制一個標(biāo)簽的樣式以下是一個例子<h1style=“text-align:c2510.3.2嵌入一個樣式表將樣式表信息都列于HTML文檔的頭部基本語法如下：<STYLETYPE=“text/css”MEDIA=screen>

<!–

樣式規(guī)則定義

-->

</STYLE>10.3.2嵌入一個樣式表將樣式表信息都列于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屬性。缺點：只限于一個頁面內(nèi)使用示例：STYLE元素放在文檔的HEAD部分。27樣式表的規(guī)則單獨保存在一個文件中外部的樣式表可以通過HTML的LINK元素連接到HTML文檔中一個樣式表文件可鏈接到多個HTML文件10.3.3將一個外部樣式表鏈接到網(wǎng)頁樣式表的規(guī)則單獨保存在一個文件中10.3.3將一個外部28基本語法如下：

<head>

<title>...</title>

<linkRel=stylesheethref="ab.css"type="text/css">

</head>說明：外部樣式表文件中不能含有任何HTML標(biāo)簽。樣式表僅僅由樣式表規(guī)則組成。外部樣式表文件中，無須使用注釋標(biāo)簽。必須將CSS文件與HTML文件一起發(fā)布到服務(wù)器中。在網(wǎng)頁被打開時，瀏覽器將依照鏈接標(biāo)簽將含有鏈接外部樣式表文件的HTML網(wǎng)頁按照樣式表規(guī)則顯示。基本語法如下：

<head>

<title>...<29LINK標(biāo)簽:<LINKREL=StyleSheetHREF=“aaa.css”TYPE=“text/css”TITLE=“8-bitColorStyle”MEDIA=“screen,print”>

TYPE屬性用于指定類型為text/cssMEDIA屬性可選，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有screen(缺省值)，提交到計算機屏幕；print，輸出到打印機；projection，提交到投影機；aural，揚聲器；braille，提交到凸字觸覺感知設(shè)備；tty，電傳打字機(使用固定的字體)；tv，電視機；all，所有輸出設(shè)備。多樣的媒體通過用逗號隔開的列表或值all指定。LINK標(biāo)簽:30REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet指定一個固定或首選的樣式，而REL=“AlternateStyleSheet”定義一個交互樣式。固定樣式在樣式表激活時總被應(yīng)用。TITLE屬性：給樣式指定一個標(biāo)題，可將多個樣式指定同一個標(biāo)題，從而組合成一個首選樣式REL=StyleSheet和一個TITLE屬性的組合指定一個首選的樣式每個網(wǎng)頁不能指定多于一個的首選樣式。REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。RE31一個樣式表可以使用CSS的@import指令輸入到網(wǎng)頁中。這個指令用于一個CSS文件或HTML的STYLE元素內(nèi)部。其語法如下：<styletype="text/css"><!—@importurl(外部樣式表的文件名稱);--></style>說明：

⑴import語句后的“；”號是必須的。

⑵要輸入的樣式表文件的擴展名為.css。10.3.4引入一個樣式表32一個樣式表可以使用CSS的@import指令輸入到網(wǎng)頁中。樣式的優(yōu)先級樣式的優(yōu)先級遵循“就近優(yōu)先”的原則，也就是說，距離所修飾對象越近的樣式，其優(yōu)先級越高。樣式如果沖突，則采用高優(yōu)先級樣式；如果不沖突，則采用疊加的樣式效果。33樣式的優(yōu)先級樣式的優(yōu)先級遵循“就近優(yōu)先”的原則，也就是說，距樣式的優(yōu)先級示例<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)先級示例<HTML>34樣式的優(yōu)先級示例<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)先級示例<HTML>3510.5div與span標(biāo)簽10.536div標(biāo)簽DIV元素：“division”，“部分”的簡稱，是一個塊級元素。它是一個成對標(biāo)簽DIV可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。通過它可以直接引用樣式，不再需要依附于HTML標(biāo)簽了它能接受STYLE、CLASS和ID屬性。37div標(biāo)簽DIV元素：“division”，“部分”的簡稱

其語法如下：

<divid=指定樣式名稱>......</div>或者：<divclass=指定樣式名稱>......</div>

或者：<divstyle="樣式屬性:屬性值；樣式屬性:屬性值...">......</div>在使用<div>標(biāo)記時，可以使用width與height屬性設(shè)置區(qū)域的大小。38其語法如下：38<html><head><title>DIV的簡單使用</title><styletype="text/css">div{font-size:24px; font-weight:bold; font-family:隸書; color:#00F; background-color:#CFF; text-align:center; width:400; height:100; border-style:double; } </style></head><body> <div>CSS功能很強大，<br/>這就是DIV的一個方塊。</div></body></html><html><head><title>DIV的簡單使用39網(wǎng)頁設(shè)計-CSS的基礎(chǔ)知識課件40span標(biāo)簽<span>標(biāo)簽一般用在網(wǎng)頁中某一小段文字。其語法如下：<spanid=指定樣式名稱>......</span>

或者

<spanclass=指定樣式名稱>......</span>span標(biāo)簽被加入到HTML中的主要目的是用于樣式表，所以當(dāng)樣式表失效時它就沒有任何作用。span標(biāo)簽可以使用clsss和id類選擇符。41span標(biāo)簽<span>標(biāo)簽一般用在網(wǎng)頁中某一小段文字。41<div>與<span>的差異：⑴在<div>區(qū)域內(nèi)的對象與區(qū)域外的上下文會自動換行；而<span>是行內(nèi)元素，其區(qū)域內(nèi)的對象與區(qū)域外的上下文不會自動換行。⑵<div>與<span>標(biāo)簽可同時使用，但建議<div>標(biāo)簽可包含<span>，但<span>最好不要包含<div>標(biāo)簽，否則會造成<span>標(biāo)簽

溫馨提示

  • 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論