版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
CSS樣式表-語法規(guī)則WEB基礎目標網(wǎng)頁的基礎概念Web標準構造CSS規(guī)則基本CSS選擇器在網(wǎng)頁中添加CSS的方法復合選擇器CSS的繼承特性
網(wǎng)頁的基礎概念
使用瀏覽器軟件顯示網(wǎng)頁Web標準1 標準的重要性2
“Web標準”概述網(wǎng)頁相關的技術走入實用階段僅短短十幾年的時間，就發(fā)生了很多重要的變化。其中最重要的一點是“Web標準”這一理念被廣泛地接受?！癢eb標準”概述
下面介紹關于網(wǎng)頁的標準——“Web標準”。網(wǎng)頁主要由3個部分組成：結構（Structure）表現(xiàn)（Presentation）行為（Behavior）用一本書來比喻，一本書分為篇、章、節(jié)和段落等部分，這就構成了一本書的“結構”，而每個組成部分用什么字體、什么字號、什么顏色等，就稱為這本書的“表現(xiàn)”?！癢eb標準”概述
由于傳統(tǒng)的圖書是固定的，不能變化的，因此它不存在“行為”。在一個網(wǎng)頁中，同樣可以分為若干個組成部分，包括各級標題、正文段落、各種列表結構等，這就構成了一個網(wǎng)頁的“結構”。每種組成部分的字號、字體和顏色等屬性就構成了它的“表現(xiàn)”。網(wǎng)頁和傳統(tǒng)媒體不同的一點是，它是可以隨時變化的，而且可以和讀者互動，因此如何變化以及如何交互，就稱為它的“行為”。因此，概括來說，“結構”決定了網(wǎng)頁“是什么”，“表現(xiàn)”決定了網(wǎng)頁看起來是“什么樣子”，而“行為”決定了網(wǎng)頁“做什么”?！敖Y構”、“表現(xiàn)”和“行為”分別對應于3種非常常用的技術，即
(X)
HTML、CSS和JavaScript。也就是說，(X)
HTML用來決定網(wǎng)頁的結構和內(nèi)容，CSS用來設定網(wǎng)頁的表現(xiàn)樣式，JavaScript用來控制網(wǎng)頁的行為。“Web標準”概述
“結構”、“表現(xiàn)”和“行為”的關系“Web標準”概述
DHTML簡介DHTML=HTML腳本語言JavaScript++層疊樣式表CSS指定一個網(wǎng)頁的元素決定元素的大小顏色和位置操縱網(wǎng)頁的元素DHTML是制作動態(tài)
HTML頁面的技術！“Web標準”概述
僅使用HTML定“結構”的頁面效果
“Web標準”概述
使用CSS設定樣式之后的效果“Web標準”概述
構造CSS規(guī)則在具體介紹CSS之前，先思考一個生活中的問題。張飛
{
身高:185cm;
體重:105kg;
性別:男;
性格:暴躁;
民族:漢族;}這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。CSS的作用就是設置網(wǎng)頁的各個組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個標題的屬性表，可以設想應該大致如下：
2級標題{
字體:宋體;
大小:15像素;
顏色:紅色;
裝飾:下劃線
}構造CSS規(guī)則再進一步，如果把上面的表格用英語寫出來：
h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}構造CSS規(guī)則CSS的思想就是首先指定對什么“對象”進行設置，然后指定對該對象的哪個方面的“屬性”進行設置，最后給出該設置的“值”。因此，概括來說，CSS就是由3個基本部分——“對象”、“屬性”和“值”組成的。構造CSS規(guī)則
基本CSS選擇器1 CSS選擇器的構成2
標簽選擇器3
類選擇器4
ID選擇器5
超鏈接偽類選擇器CSS選擇器的構成
標簽選擇器
h1{color:red;font-size:25px;}/*--關鍵代碼--*/<HEAD><STYLEtype="text/css">P{/*設置樣式：字體和背景色*/ 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標簽選擇器HTML選擇器應用H2樣式應用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類選擇器應用類選擇器：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">我是二級標題，火是這樣的</H2><PID=“water”>我是段落，水是這樣的</P></BODY> ID選擇器ID選擇器ID選擇器的定義格式為：＃ID名{…樣式規(guī)則;}應用ID選擇器：ID＝”ID名“
偽類選擇器
在IE瀏覽器中，CSS中通過設置偽類來控制鏈接的樣式<HEAD><STYLEtype="text/css">A
{/*設置超鏈接不帶下劃線*/
color:blue;
text-decoration:none;/*文本修飾：無*/}A:hover
{/*鼠標在超鏈接上方停留時，帶下劃線*/
color:red;text-decoration:underline;/*文本修飾：下劃線*/}</STYLE>HEAD><BODY><Ahref=“a.htm">俺是超鏈接，移過來我就顯示下劃線</A></BODY></HTML>特殊的偽類選擇器HTML選擇器特殊的偽類：A代表超鏈接，hover代表鼠標懸停復合選擇器交集選擇器并集選擇器后代選擇器交集選擇器
交集選擇器
p{ /*標記選擇器*/color:blue;}p.special{ /*標記.類選擇器*/color:red; /*紅色*/}.special{ /*類選擇器*/color:green;}交集選擇器
<body><p>普通段落文本（藍色）</p><h3>普通標題文本（黑色）</h3><pclass="special">指定了.special類別的段落文本（紅色）</p><h3class="special">指定了.special類別的標題文本（綠色）</h3></body>h1,h2,h3,h4,h2.special,.special,#one,p{ /*并集選擇器*/color:purple; /*文字顏色*/font-size:15px; /*字體大小*/}交集選擇器
后代選擇器
最外層是<p>標記，里面嵌套了<span>標記，<span>標記中又嵌套了<b>標記，則稱<span>是<p>的子元素，<b>是<span>的子元素。pspan{ /*嵌套聲明*/color:red; /*顏色*/}
后代選擇器的使用非常廣泛，不僅標記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行嵌套。.speciali{color:red;} /*使用了屬性special的標記里面包含的<i>*/#oneli{padding-left:5px;} /*ID為one的標記里面包含的<li>*/td.out.insidestrong{font-size:16px;} /*多層嵌套，同樣實用*/上面的第3行使用了3層嵌套，實際上更多層的嵌套在語法上都是允許的。后代選擇器
在網(wǎng)頁中添加CSS的方法1 行內(nèi)樣式2
內(nèi)嵌樣式3
鏈接樣式4
導入樣式行內(nèi)樣式您如果希望某段文字和其他段落的文字顯示風格不一樣，那么請采用“行內(nèi)樣式”。行內(nèi)樣式使用元素標簽的STYLE屬性定義。/*－－關鍵代碼--*/
<p>剩余時間：成交結束<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>應用樣式</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)樣式表局限于某個標簽，如果希望本網(wǎng)頁內(nèi)的所以同類標簽都采用統(tǒng)一樣式，這時應采用內(nèi)嵌樣式。選擇器用分號隔開外部樣式
根據(jù)樣式文件與網(wǎng)頁的關聯(lián)方式又分為：鏈接（LINK
）外部樣式表導入（import）外部樣式表樣式文件P{…..}網(wǎng)頁2網(wǎng)頁3網(wǎng)頁1鏈接外部樣式表使用LINK（鏈接）標簽，語法：<HEAD><LINK
rel=“stylesheet”type=”text/css”href=”樣式表文件.css”></HEAD>第一步：創(chuàng)建樣式表文件newstyle.css第二步：把樣式文件和網(wǎng)頁關聯(lián)樣式文件：newstyle.css
P{…..}Onel.htmanother.htm
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025計算機技術與軟件資格初級考試的市場前景試題及答案
- 人力資源管理師考試難點復習試題及答案
- 婦幼保健員社區(qū)互動試題及答案
- 二零二五年度房屋拆除與臨時安置房建設合同
- 二零二五年度一次性賠償協(xié)議：產(chǎn)品質(zhì)量責任賠償協(xié)議
- 2025年茶藝師考試偶爾出現(xiàn)的冷知識試題及答案
- 二零二五年度影視基地意向租賃合同
- 2024人力資源管理師考試內(nèi)容概述試題及答案
- 二零二五年度拖欠工資解除勞動合同法律援助機構指南范文
- 目標2025：健康管理師挑戰(zhàn)試題及答案
- 河南省駐馬店市泌陽縣部分中學聯(lián)考2024-2025學年八年級下學期3月月考數(shù)學試題（原卷版+解析版）
- 2025年湖北幼兒師范高等專科學校單招職業(yè)技能測試題庫匯編
- 2025年安徽警官職業(yè)學院單招職業(yè)適應性測試題庫帶答案
- 2025年中國外運股份有限公司招聘筆試參考題庫含答案解析
- 2024年江西應用工程職業(yè)學院單招職業(yè)技能測試題庫標準卷
- 2025年浙江溫州設計集團招聘286人高頻重點提升（共500題）附帶答案詳解
- 2025年浙江義烏市商城集團招聘筆試參考題庫含答案解析
- 《兒童流感診療及預防指南（2024醫(yī)生版）》解讀
- 愚公移山英文 -中國故事英文版課件
- 2022《輸液導管相關靜脈血栓形成中國專家共識》
- 普通話培訓課程變調(diào)、輕聲、兒化
評論
0/150
提交評論