版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
CSS樣式表-語法規(guī)則WEB基礎(chǔ)目標(biāo)網(wǎng)頁的基礎(chǔ)概念Web標(biāo)準(zhǔn)構(gòu)造CSS規(guī)則基本CSS選擇器在網(wǎng)頁中添加CSS的方法復(fù)合選擇器CSS的繼承特性
網(wǎng)頁的基礎(chǔ)概念
使用瀏覽器軟件顯示網(wǎng)頁Web標(biāo)準(zhǔn)1 標(biāo)準(zhǔn)的重要性2
“Web標(biāo)準(zhǔn)”概述網(wǎng)頁相關(guān)的技術(shù)走入實(shí)用階段僅短短十幾年的時(shí)間，就發(fā)生了很多重要的變化。其中最重要的一點(diǎn)是“Web標(biāo)準(zhǔn)”這一理念被廣泛地接受。“Web標(biāo)準(zhǔn)”概述
下面介紹關(guān)于網(wǎng)頁的標(biāo)準(zhǔn)——“Web標(biāo)準(zhǔn)”。網(wǎng)頁主要由3個(gè)部分組成：結(jié)構(gòu)（Structure）表現(xiàn)（Presentation）行為（Behavior）用一本書來比喻，一本書分為篇、章、節(jié)和段落等部分，這就構(gòu)成了一本書的“結(jié)構(gòu)”，而每個(gè)組成部分用什么字體、什么字號、什么顏色等，就稱為這本書的“表現(xiàn)”。“Web標(biāo)準(zhǔn)”概述
由于傳統(tǒng)的圖書是固定的，不能變化的，因此它不存在“行為”。在一個(gè)網(wǎng)頁中，同樣可以分為若干個(gè)組成部分，包括各級標(biāo)題、正文段落、各種列表結(jié)構(gòu)等，這就構(gòu)成了一個(gè)網(wǎng)頁的“結(jié)構(gòu)”。每種組成部分的字號、字體和顏色等屬性就構(gòu)成了它的“表現(xiàn)”。網(wǎng)頁和傳統(tǒng)媒體不同的一點(diǎn)是，它是可以隨時(shí)變化的，而且可以和讀者互動(dòng)，因此如何變化以及如何交互，就稱為它的“行為”。因此，概括來說，“結(jié)構(gòu)”決定了網(wǎng)頁“是什么”，“表現(xiàn)”決定了網(wǎng)頁看起來是“什么樣子”，而“行為”決定了網(wǎng)頁“做什么”。“結(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)頁的行為。“Web標(biāo)準(zhǔn)”概述
“結(jié)構(gòu)”、“表現(xiàn)”和“行為”的關(guān)系“Web標(biāo)準(zhǔn)”概述
DHTML簡介DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定一個(gè)網(wǎng)頁的元素決定元素的大小顏色和位置操縱網(wǎng)頁的元素DHTML是制作動(dòng)態(tài)
HTML頁面的技術(shù)！“Web標(biāo)準(zhǔn)”概述
僅使用HTML定“結(jié)構(gòu)”的頁面效果
“Web標(biāo)準(zhǔn)”概述
使用CSS設(shè)定樣式之后的效果“Web標(biāo)準(zhǔn)”概述
構(gòu)造CSS規(guī)則在具體介紹CSS之前，先思考一個(gè)生活中的問題。張飛
{
身高:185cm;
體重:105kg;
性別:男;
性格:暴躁;
民族:漢族;}這個(gè)表實(shí)際上是由3個(gè)要素組成的，即姓名、屬性和屬性值。CSS的作用就是設(shè)置網(wǎng)頁的各個(gè)組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個(gè)標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：
2級標(biāo)題{
字體:宋體;
大小:15像素;
顏色:紅色;
裝飾:下劃線
}構(gòu)造CSS規(guī)則再進(jìn)一步，如果把上面的表格用英語寫出來：
h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}構(gòu)造CSS規(guī)則CSS的思想就是首先指定對什么“對象”進(jìn)行設(shè)置，然后指定對該對象的哪個(gè)方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個(gè)基本部分——“對象”、“屬性”和“值”組成的。構(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)在超鏈接上方停留時(shí)，帶下劃線*/
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>普通段落文本（藍(lán)色）</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選擇器都可以進(jìn)行嵌套。.speciali{color:red;} /*使用了屬性special的標(biāo)記里面包含的<i>*/#oneli{padding-left:5px;} /*ID為one的標(biāo)記里面包含的<li>*/td.out.insidestrong{font-size:16px;} /*多層嵌套，同樣實(shí)用*/上面的第3行使用了3層嵌套，實(shí)際上更多層的嵌套在語法上都是允許的。后代選擇器
在網(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>剩余時(shí)間：成交結(jié)束<BR>新舊程度：全新<BR>所在地：北京<BR>寶貝數(shù)量：5件<BR>瀏覽量：220次</p><pstyle=“color:#FF00FF;font-family:隸書;font-
weight:bold;font-size:24px">另送價(jià)值50元的充電器套裝！(一個(gè)充電器，兩節(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)樣式表局限于某個(gè)標(biāo)簽，如果希望本網(wǎng)頁內(nèi)的所以同類標(biāo)簽都采用統(tǒng)一樣式，這時(shí)應(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)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 考研復(fù)習(xí)-風(fēng)景園林基礎(chǔ)考研試題附參考答案詳解【鞏固】
- 2024年消防條令綱要知識考試題庫帶答案（培優(yōu)b卷）
- 消毒清洗滅菌試題及答案
- 江蘇省連云港市灌云縣等2地2024-2025學(xué)年高二下學(xué)期第二次階段性檢測（6月）地理試卷（ 含答案）
- 河北省保定市2024-2025學(xué)年七年級下學(xué)期期末模擬考試生物試卷（含答案）
- 安徽省六安市舒城縣曉天中學(xué)2024-2025學(xué)年高二下學(xué)期第三次質(zhì)量檢測地理答題卷
- 2025年江蘇省徐州市沛縣中考三模語文試題（含答案）
- 2024年湖北省黃石市鐵山區(qū)部分學(xué)校中考一模地理試卷（含答案）
- 物理●全國甲卷丨2022年普通高等學(xué)校招生全國統(tǒng)一考試物理試卷及答案
- 智能工廠整體建設(shè)方案
- 《write.as》手機(jī)版怎么看文
- 繪本故事：睡睡鎮(zhèn)
- 酒店住宿水單模板1
- 北師大版五年級數(shù)學(xué)下冊 （分?jǐn)?shù)除法(三)）分?jǐn)?shù)除法教學(xué)課件(第2課時(shí))
- 《世界遺產(chǎn)背景下的影響評估指南和工具包》
- 供應(yīng)鏈信息管理教學(xué)課件
- 銷售管理培訓(xùn)課件
- 福建省危險(xiǎn)性較大的分部分項(xiàng)工程安全管理標(biāo)準(zhǔn)
- 工貿(mào)企業(yè)常見安全隱患剖析
- 人工智能導(dǎo)論知到章節(jié)答案智慧樹2023年東北石油大學(xué)
- 水泥混凝土路面鋼筋用量表
評論
0/150
提交評論