版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
的基本語(yǔ)法和使用演示文稿當(dāng)前1頁(yè)，總共31頁(yè)。的基本語(yǔ)法和使用當(dāng)前2頁(yè)，總共31頁(yè)。課堂內(nèi)容第七章CSS第一節(jié)、CSS簡(jiǎn)介一、什么是CSS
二、為什么要使用CSS
三、CSS的使用方法四、CSS的基本語(yǔ)句結(jié)構(gòu)五、CSS的類型
第二節(jié)、CSS屬性及濾鏡
一、CSS的屬性
二、CSS濾鏡三、CSS的聲明四、CSS的沖突小結(jié)、本節(jié)內(nèi)容學(xué)習(xí)方法當(dāng)前3頁(yè)，總共31頁(yè)。一、什么是CSS？
CSS是CascadingStyleSheets（層疊樣式表單）的簡(jiǎn)稱。通常又稱作樣式表，是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。實(shí)際操作篇
CSS層疊樣式表第一節(jié)CSS簡(jiǎn)介當(dāng)前4頁(yè)，總共31頁(yè)。二、為什么要使用CSS？
CSS樣式可靈活、精確地控制網(wǎng)頁(yè)外觀，控制的內(nèi)容包括布局、字體、顏色、背景和其它效果。優(yōu)點(diǎn)：
1、內(nèi)容和形式分離。
網(wǎng)頁(yè)前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來(lái)處理。生成的HTML文件代碼精簡(jiǎn)，更小打開(kāi)更快。
2、改版網(wǎng)站更簡(jiǎn)單容易了。
不用重新設(shè)計(jì)排版網(wǎng)頁(yè)，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁(yè)面，只需要改動(dòng)CSS文件就完成了所有改版。對(duì)于門戶網(wǎng)站來(lái)說(shuō)改版就像換件衣服一樣簡(jiǎn)單容易。
3、搜索引擎更友好，排名更容易靠前。
實(shí)際操作篇
CSS層疊樣式表當(dāng)前5頁(yè)，總共31頁(yè)。三、常用的CSS使用方法
編輯工具：任何文本編輯工具樣式表使用方法一般有三種：
1）文檔頭部插入：適用于單個(gè)網(wǎng)頁(yè)應(yīng)用2）行內(nèi)插入：適用于頁(yè)面中一、兩個(gè)地方才用到CSS3）外部鏈接樣式文件：適用于多個(gè)網(wǎng)頁(yè)都用到CSS
實(shí)際操作篇
CSS層疊樣式表當(dāng)前6頁(yè)，總共31頁(yè)。
1）文檔頭部插入<styletype=“text/css”>……</style>
如：<html>
<head>
<title>文檔標(biāo)題</title>
<styletype=“text/css”>
<!--
body{font:10pt“Arial”}
h1{font:15pt/17pt“Arial”;font-weight:bold;color:maroon}
h2{font:13pt/15pt“Arial”;font-weight:bold;color:blue}
p{font:10pt/12pt“Arial”;color:black}
-->
</style>
</head>
<body>請(qǐng)注意，這里將style對(duì)象的type屬性設(shè)置為“text/css”，是允許不支持這類型的瀏覽器忽略樣式表單。
具體請(qǐng)看操作演示實(shí)際操作篇
CSS層疊樣式表當(dāng)前7頁(yè)，總共31頁(yè)。2）行內(nèi)插入
<pstyle=“font-size：14pt；color：blue”>藍(lán)色14號(hào)文字</p>
這是采用<Style=“”>的格式把樣式寫(xiě)在html中的任意行內(nèi)，這樣比較方便靈活具體請(qǐng)看操作演示實(shí)際操作篇
CSS層疊樣式表當(dāng)前8頁(yè)，總共31頁(yè)。3）外部鏈接樣式文件先建立外部樣式表文件（.css），然后使用HTML的link對(duì)象。示例如下：
<head>
<title>文檔標(biāo)題</title>
<linkrel=stylesheethref="/dhtmlet.css"type="text/css">
</head>這種方法非常適宜同時(shí)定義多個(gè)文檔。它能使多個(gè)文檔同時(shí)使用相同的樣式，從而減少了大量的冗余代碼具體看操作演示實(shí)際操作篇
CSS層疊樣式表當(dāng)前9頁(yè)，總共31頁(yè)。利用CSS面板創(chuàng)建外部CSS文件1）選擇新建CSS標(biāo)簽，彈出如下對(duì)話框，選擇新建；2）將CSS樣式表命名、保存；3）外部CSS文件創(chuàng)建好后，就可在HTML文檔中，使用“LINGK”標(biāo)簽調(diào)用外部的CSS文件定義的樣式了。
實(shí)際操作篇
CSS層疊樣式表當(dāng)前10頁(yè)，總共31頁(yè)。四、CSS的基本語(yǔ)句結(jié)構(gòu)
Selector{property:value}
參數(shù)說(shuō)明：
Selector
：選擇符
property:屬性value
：屬性值
屬性和屬性值之間用冒號(hào)(:)隔開(kāi)。多個(gè)定義之間用分號(hào)(;)隔開(kāi)
<styletype="text/css">
<!--
body{font:10pt"Arial"}
h1{font:15pt"Arial";font-weight:bold;color:maroon}
p{font:10pt"Arial";color:black}
-->
</style>實(shí)際操作篇
CSS層疊樣式表當(dāng)前11頁(yè)，總共31頁(yè)。五、CSS的類型CSS的類型有三種方式：類、ID、標(biāo)簽、復(fù)合內(nèi)容
下面分別舉例說(shuō)明實(shí)際操作篇
CSS層疊樣式表當(dāng)前12頁(yè)，總共31頁(yè)。1、類方式
1）它可被任何HTMLtag所應(yīng)用
2）語(yǔ)法：.Classname{property:value}
3）引用：以<Pclass=“m”>的方法引用CSS樣式比如<style>.blueone{color:blue}</style><H2class="blueone">BlueH2</H2><Pclass="blueone">Blueparagraph</P>
實(shí)際操作篇
CSS層疊樣式表當(dāng)前13頁(yè)，總共31頁(yè)。2、標(biāo)簽方式1）重新定義HTML的tags,比如P,DIV,TD等.如你用CSS定義了它們,在整頁(yè)中,這個(gè)Tag的性質(zhì)就按照你的定義來(lái)顯示了.2）語(yǔ)法：tag{property:value}
比如我們想叫TD的顏色是紅的
TD{color:red}
這里還要告訴你CSS的一個(gè)特點(diǎn),它可定義好幾個(gè)selector在一個(gè)rule里.比如
H1,H2,TD{color:red}這個(gè)定義就能讓所有的H1,H2,和TD的顏色都為紅色.
實(shí)際操作篇
CSS層疊樣式表當(dāng)前14頁(yè)，總共31頁(yè)。3、ID方式1）IDselector其實(shí)跟獨(dú)立classselector的功能一樣.而區(qū)別在于它們的語(yǔ)法和用法不同,以及對(duì)于Javascript操縱HTML元素有幫助.
2）它的語(yǔ)法：#IDname{property:value}
假如我們有下面的定義：#yelowone{color:yellow}我們可以運(yùn)用這個(gè)定義到任何的有同樣ID名字的tag,比如<style>#redone{color:red}</style><PID=“redone”>樣式表</P>
你可能覺(jué)得既然IDselector和獨(dú)立classselector功能一樣,為什么兩者都存在呢.有ID的HTML元素可以被CSS-P和JavaScript來(lái)操縱.當(dāng)前15頁(yè)，總共31頁(yè)。4、復(fù)合內(nèi)容（基于選擇的內(nèi)容）
1）若要定義同時(shí)影響兩個(gè)或多個(gè)標(biāo)簽、類或ID的復(fù)合規(guī)則，請(qǐng)選擇“復(fù)合內(nèi)容”選項(xiàng)并輸入用于復(fù)合規(guī)則的選擇器。
2）語(yǔ)法：td,h1,p{color:#939;｝
3）可定義鏈接的四種狀態(tài)：
Link－表示超鏈接的文本在鏈接未被訪問(wèn)時(shí)的風(fēng)格
；
Visited－表示鏈接被訪問(wèn)過(guò)后的風(fēng)格
；
Hover－表示鼠標(biāo)指向鏈接但未點(diǎn)擊時(shí)的鏈接風(fēng)格
Active－表示鼠標(biāo)點(diǎn)擊鏈接時(shí)鏈接風(fēng)格
實(shí)際操作篇
CSS層疊樣式表當(dāng)前16頁(yè)，總共31頁(yè)。實(shí)際操作篇
CSS層疊樣式表第二節(jié)CSS的屬性及濾鏡一、CSS屬性介紹1、類型屬性對(duì)文字的各項(xiàng)屬性進(jìn)行設(shè)置。
當(dāng)前17頁(yè)，總共31頁(yè)。2、背景屬性：
實(shí)際操作篇
CSS層疊樣式表當(dāng)前18頁(yè)，總共31頁(yè)。3、區(qū)塊屬性區(qū)塊指的就是網(wǎng)頁(yè)中的文本、圖像、層等網(wǎng)頁(yè)元素。這個(gè)屬性主要用于控制區(qū)塊中的內(nèi)容的間距、對(duì)齊方式、文字縮進(jìn)等等實(shí)際操作篇
CSS層疊樣式表當(dāng)前19頁(yè)，總共31頁(yè)。4、容器屬性
CSS的容器屬性包括邊距、填充距、邊框和寬度、高度、浮動(dòng)、清除等屬性。CSS將網(wǎng)頁(yè)中所有的塊元素都看作是包含在一個(gè)盒子（BOX）中實(shí)際操作篇
CSS層疊樣式表當(dāng)前20頁(yè)，總共31頁(yè)。邊距屬性填充距屬性當(dāng)前21頁(yè)，總共31頁(yè)。邊框?qū)傩援?dāng)前22頁(yè)，總共31頁(yè)。圖文混排當(dāng)前23頁(yè)，總共31頁(yè)。5、定位屬性主要是在頁(yè)面的布局和控制上進(jìn)行定義
實(shí)際操作篇
CSS層疊樣式表當(dāng)前24頁(yè)，總共31頁(yè)。6、css對(duì)擴(kuò)展的定義
擴(kuò)展分類包含兩個(gè)部分。一個(gè)是分頁(yè)符，是為了打印的頁(yè)面設(shè)置分頁(yè)符用的。
視覺(jué)效果是為網(wǎng)頁(yè)中的元素添加特殊的效果用的。光標(biāo)：可以指定在某個(gè)元素上要使用的光標(biāo)形狀。濾鏡：這是一個(gè)很奇妙的參數(shù)，共包括16種濾鏡，用這些濾鏡，甚至可以替代photoshop的一部分功能。當(dāng)前25頁(yè)，總共31頁(yè)。二、CSS濾鏡
Alpha濾鏡
Blur濾鏡
Chroma濾鏡
Dropshadow濾鏡
FlipH、FlipV濾鏡
Glow濾鏡
Gray濾鏡
Invert濾鏡
Light濾鏡
Mask濾鏡
Shawdow濾鏡
Wave濾鏡
X-ray濾鏡
實(shí)際操作篇
CSS層疊樣式表當(dāng)前26頁(yè)，總共31頁(yè)。四、CSS的沖突處理規(guī)則：
1、當(dāng)兩個(gè)CSS樣式發(fā)生沖突時(shí)，瀏覽器按照與文本關(guān)系近的CSS樣式來(lái)顯示；
1）分別創(chuàng)建.red和.green兩個(gè)CSS樣式：實(shí)際操作篇
CSS層疊樣式表當(dāng)前27頁(yè)，總共31頁(yè)。
2）在標(biāo)簽<P>中引用green，在標(biāo)簽<span>中引用red。顯示結(jié)果如下圖：
實(shí)際操作篇
CSS層疊樣式表當(dāng)前28頁(yè)，總共31頁(yè)。
2、當(dāng)HTML與CSS樣式發(fā)生沖突時(shí)，瀏覽器按CSS樣式中定義的屬性來(lái)顯示。
1）先在<p>和<p/>間用HTML的<fontcolor=“#0000ff”>..</font>定義文字為藍(lán)色；
實(shí)際操作篇
CSS層疊樣式表當(dāng)前29頁(yè)，總共31頁(yè)。
2）再在font之后
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 宜昌地理合格考試題及答案
- 20263M（中國(guó)）秋招面試題及答案
- 未來(lái)五年新形勢(shì)下醫(yī)用內(nèi)窺鏡清洗機(jī)行業(yè)順勢(shì)崛起戰(zhàn)略制定與實(shí)施分析研究報(bào)告
- 2026飛鶴乳業(yè)(寧夏)生態(tài)牧業(yè)有限公司招聘18人備考題庫(kù)附答案
- 三臺(tái)縣2025年縣級(jí)事業(yè)單位面向縣內(nèi)鄉(xiāng)鎮(zhèn)公開(kāi)選調(diào)工作人員（16人）考試備考題庫(kù)附答案
- 中冶交通2026屆校園招聘?jìng)淇碱}庫(kù)附答案
- 樂(lè)山市教育局2025年下半年公開(kāi)選調(diào)事業(yè)單位工作人員參考題庫(kù)附答案
- 北京中國(guó)石油大學(xué)教育基金會(huì)招聘2人參考題庫(kù)必考題
- 北京朝陽(yáng)區(qū)六里屯街道辦事處招聘18名城市協(xié)管員考試備考題庫(kù)必考題
- 四川鐵道職業(yè)學(xué)院2025年公開(kāi)選調(diào)工作人員考試備考題庫(kù)必考題
- 中南財(cái)經(jīng)政法大學(xué)研究生論文撰寫(xiě)規(guī)范(2025年版)
- 2026-2031年中國(guó)計(jì)算機(jī)輔助設(shè)計(jì)（CAD）軟件行業(yè)市場(chǎng)發(fā)展趨勢(shì)與前景展望戰(zhàn)略研究報(bào)告
- 2026年包頭輕工職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)附答案
- 新產(chǎn)品轉(zhuǎn)產(chǎn)流程標(biāo)準(zhǔn)操作手冊(cè)
- 中職學(xué)生安全教育培訓(xùn)課件
- 潔凈室風(fēng)機(jī)過(guò)濾單元(FFU)施工規(guī)范
- 取代反應(yīng)的課件
- 民法典與生活同行宣傳手冊(cè)
- 腫瘤壞死因子受體相關(guān)周期性綜合征診療指南
- 財(cái)務(wù)調(diào)賬管理辦法
- 老年醫(yī)學(xué)科老年綜合評(píng)估表
評(píng)論
0/150
提交評(píng)論