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

下載本文檔

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

文檔簡介

第10章

CSS的基礎知識第10章

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

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

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

Selector定義樣式作用的對象property為CSS屬性，value為屬性對應的值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標記符用戶定義的類用戶定義的ID虛類常用Selector類型HTML標記符7HTML標記符的SelectorHTML標記符是最常用的selector，它重新定義了HTML標記符的顯示效果。例如：H1{text-align:center;color:red}使所有用H1標記符修飾的內(nèi)容都居中和用紅色顯示。示例如下HTML標記符的SelectorHTML標記符是最常用的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)頁設計-CSS的基礎知識課件10用戶定義類定義方式表示任何帶有class屬性為classname的標記符都采用所定義的樣式。.classname

{property1:value1;

property2:value2;

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

樣式屬性:屬性值;......}所有HTML標簽都可引用它*符號可以省略HTML標簽.classname{樣式屬性:屬性值;

樣式屬性:屬性值;......}只有該指定的標簽才能引用它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)頁設計-CSS的基礎知識課件14用戶定義IDidname{property:value…}表示任何ID屬性為idname的標記符都采用所定義的樣式。用戶定義ID與class的使用方法基本相同，不同之處在于ID選擇器只能在HTML碳中使用一次，因此其針對性更強。用戶定義IDidname{property:value…}15#idname{樣式屬性:屬性值;

樣式屬性:屬性值;......}所有HTML標簽都可引用它HTML標簽#idname

{樣式屬性:屬性值;

樣式屬性:屬性值;......}只有該指定的標簽才能引用它定義方式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)頁設計-CSS的基礎知識課件18ID使用注意事項在很多瀏覽器下，ID選擇器可以用于多個標記。但每個標記定義的id不只是CSS可調(diào)用，JavaScript等其他腳本語言同樣也可以調(diào)用，因為這個特性，所以不要將ID選擇器用于多個標記，否則會出現(xiàn)意想不同的錯誤。例，如果一個HTML中有兩個相同的id標記，那么將會導致JavaScript在查找id進出錯，例如函數(shù)getElementById().ID使用注意事項在很多瀏覽器下，ID選擇器可以用于多個標記。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（當前字體中字母M的寬度）

ex（當前字體中字母X的高度）

px（一個象素的大小）。相對長度單位：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屬性可以應用于任意BODY內(nèi)的HTML元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。其語法如下：

<HTML標簽名稱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)兩者的分離。缺點：在標簽中，用設置style屬性的方法，一次只能控制一個標簽的樣式以下是一個例子<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標簽。樣式表僅僅由樣式表規(guī)則組成。外部樣式表文件中，無須使用注釋標簽。必須將CSS文件與HTML文件一起發(fā)布到服務器中。在網(wǎng)頁被打開時，瀏覽器將依照鏈接標簽將含有鏈接外部樣式表文件的HTML網(wǎng)頁按照樣式表規(guī)則顯示。基本語法如下：

<head>

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

TYPE屬性用于指定類型為text/cssMEDIA屬性可選，用于指定樣式表被接受的介質(zhì)或媒體。允許的值有screen(缺省值)，提交到計算機屏幕；print，輸出到打印機；projection，提交到投影機；aural，揚聲器；braille，提交到凸字觸覺感知設備；tty，電傳打字機(使用固定的字體)；tv，電視機；all，所有輸出設備。多樣的媒體通過用逗號隔開的列表或值all指定。LINK標簽:30REL屬性：用于定義連接的文件和HTML文檔之間的關(guān)系。REL=StyleSheet指定一個固定或首選的樣式，而REL=“AlternateStyleSheet”定義一個交互樣式。固定樣式在樣式表激活時總被應用。TITLE屬性：給樣式指定一個標題，可將多個樣式指定同一個標題，從而組合成一個首選樣式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標簽10.536div標簽DIV元素：“division”，“部分”的簡稱，是一個塊級元素。它是一個成對標簽DIV可以包含段落、標題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。通過它可以直接引用樣式，不再需要依附于HTML標簽了它能接受STYLE、CLASS和ID屬性。37div標簽DIV元素：“division”，“部分”的簡稱

其語法如下：

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

或者：<divstyle="樣式屬性:屬性值；樣式屬性:屬性值...">......</div>在使用<div>標記時，可以使用width與height屬性設置區(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)頁設計-CSS的基礎知識課件40span標簽<span>標簽一般用在網(wǎng)頁中某一小段文字。其語法如下：<spanid=指定樣式名稱>......</span>

或者

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

溫馨提示

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

評論

0/150

提交評論