網(wǎng)頁設(shè)計與制作教程-3CSS樣式表_第1頁
網(wǎng)頁設(shè)計與制作教程-3CSS樣式表_第2頁
網(wǎng)頁設(shè)計與制作教程-3CSS樣式表_第3頁
網(wǎng)頁設(shè)計與制作教程-3CSS樣式表_第4頁
網(wǎng)頁設(shè)計與制作教程-3CSS樣式表_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

CSS樣式表-語法規(guī)則WEB基礎(chǔ)目標(biāo)網(wǎng)頁的基礎(chǔ)概念Web標(biāo)準構(gòu)造CSS規(guī)則基本CSS選擇器在網(wǎng)頁中添加CSS的方法復(fù)合選擇器CSS的繼承特性

網(wǎng)頁的基礎(chǔ)概念

使用瀏覽器軟件顯示網(wǎng)頁Web標(biāo)準1 標(biāo)準的重要性2

“Web標(biāo)準”概述網(wǎng)頁相關(guān)的技術(shù)走入實用階段僅短短十幾年的時間，就發(fā)生了很多重要的變化。其中最重要的一點是“Web標(biāo)準”這一理念被廣泛地接受。“Web標(biāo)準”概述

下面介紹關(guān)于網(wǎng)頁的標(biāo)準——“Web標(biāo)準”。網(wǎng)頁主要由3個部分組成：結(jié)構(gòu)（Structure）表現(xiàn)（Presentation）行為（Behavior）用一本書來比喻，一本書分為篇、章、節(jié)和段落等部分，這就構(gòu)成了一本書的“結(jié)構(gòu)”，而每個組成部分用什么字體、什么字號、什么顏色等，就稱為這本書的“表現(xiàn)”?！癢eb標(biāo)準”概述

由于傳統(tǒng)的圖書是固定的，不能變化的，因此它不存在“行為”。在一個網(wǎng)頁中，同樣可以分為若干個組成部分，包括各級標(biāo)題、正文段落、各種列表結(jié)構(gòu)等，這就構(gòu)成了一個網(wǎng)頁的“結(jié)構(gòu)”。每種組成部分的字號、字體和顏色等屬性就構(gòu)成了它的“表現(xiàn)”。網(wǎng)頁和傳統(tǒng)媒體不同的一點是，它是可以隨時變化的，而且可以和讀者互動，因此如何變化以及如何交互，就稱為它的“行為”。因此，概括來說，“結(jié)構(gòu)”決定了網(wǎng)頁“是什么”，“表現(xiàn)”決定了網(wǎng)頁看起來是“什么樣子”，而“行為”決定了網(wǎng)頁“做什么”?！敖Y(jié)構(gòu)”、“表現(xiàn)”和“行為”分別對應(yīng)于3種非常常用的技術(shù)，即

(X)

HTML、CSS和JavaScript。也就是說，(X)

HTML用來決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，CSS用來設(shè)定網(wǎng)頁的表現(xiàn)樣式，JavaScript用來控制網(wǎng)頁的行為?！癢eb標(biāo)準”概述

“結(jié)構(gòu)”、“表現(xiàn)”和“行為”的關(guān)系“Web標(biāo)準”概述

DHTML簡介DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定一個網(wǎng)頁的元素決定元素的大小顏色和位置操縱網(wǎng)頁的元素DHTML是制作動態(tài)

HTML頁面的技術(shù)！“Web標(biāo)準”概述

僅使用HTML定“結(jié)構(gòu)”的頁面效果

“Web標(biāo)準”概述

使用CSS設(shè)定樣式之后的效果“Web標(biāo)準”概述

構(gòu)造CSS規(guī)則在具體介紹CSS之前，先思考一個生活中的問題。張飛

{

身高:185cm;

體重:105kg;

性別:男;

性格:暴躁;

民族:漢族;}這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。CSS的作用就是設(shè)置網(wǎng)頁的各個組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：

2級標(biāo)題{

字體:宋體;

大小:15像素;

顏色:紅色;

裝飾:下劃線

}構(gòu)造CSS規(guī)則再進一步，如果把上面的表格用英語寫出來：

h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}構(gòu)造CSS規(guī)則CSS的思想就是首先指定對什么“對象”進行設(shè)置，然后指定對該對象的哪個方面的“屬性”進行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個基本部分——“對象”、“屬性”和“值”組成的。構(gòu)造CSS規(guī)則

基本CSS選擇器1 CSS選擇器的構(gòu)成2

標(biāo)簽選擇器3

類選擇器4

ID選擇器5

超鏈接偽類選擇器CSS選擇器的構(gòu)成

標(biāo)簽選擇器

h1{color:red;font-size:25px;}/*--關(guān)鍵代碼--*/<HEAD><STYLEtype="text/css">P{/*設(shè)置樣式：字體和背景色*/ font-family:System; font-size:18px; color:#3333CC;}H2{ background-color:#CCFF33; text-align:center;}</STYLE></HEAD><BODY><H2>品種特征方面：</H2><P>

1、蛋魚：蛋魚…….。</P><P>

2、龍睛：龍睛……..。</P><P>

3、高頭：高頭….。</P>HTM標(biāo)簽選擇器HTML選擇器應(yīng)用H2樣式應(yīng)用P樣式類選擇器

.red{color:green; /*綠色*/font-size:20px; /*文字大小*/}網(wǎng)頁中調(diào)用：<pclass=“green”>class選擇器</p>class類選擇器<HEAD><STYLEtype="text/css">.myinput

{ border:1pxsolid; border-color:#D4BFFF; color:#2A00FF}</STYLE></HEAD><BODY><FORM><P>用戶名<INPUTname="textfield"type="text"class="myinput"></P><P>密 碼<INPUTname="textfield"type="password"class="myinput"></P><P><INPUTtype="submit"name="Submit"value="重填"><INPUTtype="submit"name="Submit"value="提交"></P>CLASS類選擇器應(yīng)用類選擇器：class＝”類名“類選擇器的定義格式為：.類名{

…樣式規(guī)則;}ID選擇器

#green{font-size:30px;/*字體大小*/color:yellow; /*顏色*/}網(wǎng)頁中調(diào)用：<pid="yellow">ID選擇器</p><HEAD><STYLETYPE="text/css">

#fire

{

color:red;

font-size:24px;

} </STYLE></HEAD><BODY><H2ID="fire">我是二級標(biāo)題，火是這樣的</H2><PID=“water”>我是段落，水是這樣的</P></BODY> ID選擇器ID選擇器ID選擇器的定義格式為：＃ID名{…樣式規(guī)則;}應(yīng)用ID選擇器：ID＝”ID名“

偽類選擇器

在IE瀏覽器中，CSS中通過設(shè)置偽類來控制鏈接的樣式<HEAD><STYLEtype="text/css">A

{/*設(shè)置超鏈接不帶下劃線*/

color:blue;

text-decoration:none;/*文本修飾：無*/}A:hover

{/*鼠標(biāo)在超鏈接上方停留時，帶下劃線*/

color:red;text-decoration:underline;/*文本修飾：下劃線*/}</STYLE>HEAD><BODY><Ahref=“a.htm">俺是超鏈接，移過來我就顯示下劃線</A></BODY></HTML>特殊的偽類選擇器HTML選擇器特殊的偽類：A代表超鏈接，hover代表鼠標(biāo)懸停復(fù)合選擇器交集選擇器并集選擇器后代選擇器交集選擇器

交集選擇器

p{ /*標(biāo)記選擇器*/color:blue;}p.special{ /*標(biāo)記.類選擇器*/color:red; /*紅色*/}.special{ /*類選擇器*/color:green;}交集選擇器

<body><p>普通段落文本（藍色）</p><h3>普通標(biāo)題文本（黑色）</h3><pclass="special">指定了.special類別的段落文本（紅色）</p><h3class="special">指定了.special類別的標(biāo)題文本（綠色）</h3></body>h1,h2,h3,h4,h2.special,.special,#one,p{ /*并集選擇器*/color:purple; /*文字顏色*/font-size:15px; /*字體大小*/}交集選擇器

后代選擇器

最外層是<p>標(biāo)記，里面嵌套了<span>標(biāo)記，<span>標(biāo)記中又嵌套了<b>標(biāo)記，則稱<span>是<p>的子元素，<b>是<span>的子元素。pspan{ /*嵌套聲明*/color:red; /*顏色*/}

后代選擇器的使用非常廣泛，不僅標(biāo)記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行嵌套。.speciali{color:red;} /*使用了屬性special的標(biāo)記里面包含的<i>*/#oneli{padding-left:5px;} /*ID為one的標(biāo)記里面包含的<li>*/td.out.insidestrong{font-size:16px;} /*多層嵌套，同樣實用*/上面的第3行使用了3層嵌套，實際上更多層的嵌套在語法上都是允許的。后代選擇器

在網(wǎng)頁中添加CSS的方法1 行內(nèi)樣式2

內(nèi)嵌樣式3

鏈接樣式4

導(dǎo)入樣式行內(nèi)樣式您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣，那么請采用“行內(nèi)樣式”。行內(nèi)樣式使用元素標(biāo)簽的STYLE屬性定義。/*－－關(guān)鍵代碼--*/

<p>剩余時間：成交結(jié)束<BR>新舊程度：全新<BR>所在地：北京<BR>寶貝數(shù)量：5件<BR>瀏覽量：220次</p><pstyle=“color:#FF00FF;font-family:隸書;font-

weight:bold;font-size:24px">另送價值50元的充電器套裝！(一個充電器，兩節(jié)充電電池)可使用半年以</p><HTML><HEAD><TITLE>應(yīng)用樣式</TITLE><STYLETYPE="text/css">

P{font-size:20px;color:blue;text-align:center}</STYLE></HEAD><BODY><P>我是段落1</P><P>我是段落2</P><P>我是段落3</P><P>我們的樣式絕對統(tǒng)一</P></BODY></HTML>內(nèi)嵌樣式樣式表樣式規(guī)則所有的段落都采用P樣式，保證樣式統(tǒng)一行內(nèi)樣式表局限于某個標(biāo)簽，如果希望本網(wǎng)頁內(nèi)的所以同類標(biāo)簽都采用統(tǒng)一樣式，這時應(yīng)采用內(nèi)嵌樣式。選擇器用分號隔開外部樣式

根據(jù)樣式文件與網(wǎng)頁的關(guān)聯(lián)方式又分為：鏈接（LINK

）外部樣式表導(dǎo)入（import）外部樣式表樣式文件P{…..}網(wǎng)頁2網(wǎng)頁3網(wǎng)頁1鏈接外部樣式表使用LINK（鏈接）標(biāo)簽，語法：<HEAD><LINK

rel=“stylesheet”type=”text/css”href=”樣式表文件.css”></HEAD>第一步：創(chuàng)建樣式表文件newstyle.css第二步：把樣式文件和網(wǎng)頁關(guān)聯(lián)樣式文件：newstyle.css

P{…..}Onel.htmanother.htm

溫馨提示

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

最新文檔

評論

0/150

提交評論