互聯(lián)網(wǎng)樣式標(biāo)準(zhǔn)CSS語言課件

互聯(lián)網(wǎng)樣式標(biāo)準(zhǔn)--CSS語言byjosh.y2010年09月07日黃金灣互聯(lián)網(wǎng)樣式標(biāo)準(zhǔn)--CSS語言byjosh.y2010年0CSS語言的起源HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。

由于當(dāng)時(shí)兩種主要的瀏覽器（Netscape和InternetExplorer）不斷地將新的HTML標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到HTML規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難。

為了解決這個(gè)問題，萬維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了HTML標(biāo)準(zhǔn)化的使命，并在HTML4.0之外創(chuàng)造出樣式（Style）。

所有的主流瀏覽器均支持層疊樣式表。

CSS語言的起源HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。CSS語言的演變1996年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS1.0標(biāo)準(zhǔn)，2008年4月做了最后修訂

1998年5月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS2.0標(biāo)準(zhǔn)，并在2008年4月做了修訂

2009年9月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS2.1標(biāo)準(zhǔn)2009年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS3.0標(biāo)準(zhǔn)

CSS語言的演變1996年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CCSS語法CSS語法結(jié)構(gòu)僅僅由三部分組成：選擇符（selector）、屬性（property）和值（value）。

使用方法：selector(Property:value;)選擇符（selector）指著組樣式編碼所要針對(duì)的對(duì)象屬性（Property）是CSS樣式控制的核心，如顏色、大小、定位、浮動(dòng)方式等。值（value）是指屬性的值CSS語法CSS語法結(jié)構(gòu)僅僅由三部分組成：選擇符（selecCSS選擇符的分類類型選擇符 body{}、div{}、span{}群組選擇符 h1,h2,h3,p,spanP{font-size:12px;font-family:arial;}包含選擇符 h1span{font-weight:bold;}id選擇符 <divid="content"></div> #content{font-size:14px;line-height:130%;}class選擇符 <divclass="p1"></div> <h1class="p1"></h1> <h3class="p1"></h3> .p1{

Margin:10px;Background-color:blue;}CSS選擇符的分類類型選擇符標(biāo)簽指定式選擇符

標(biāo)簽指定式選擇符在對(duì)標(biāo)簽選擇的精確度上介于標(biāo)簽選擇符及id/class選擇符之間，也是一種經(jīng)常能夠使用到的選擇符。 針對(duì)所有id為content的h1標(biāo)簽形式

，如： h1#content{}

針對(duì)所有class為p1的h1標(biāo)簽，如：

h1.p1{}組合選擇符

CSS在選擇符的使用上可以說是非常自由，根據(jù)頁面需求，我們可以靈活使用各種選擇符進(jìn)行設(shè)計(jì)。

id為content的h1標(biāo)簽下的h2標(biāo)簽，如： h1#content

h2{} h1標(biāo)簽下的所有class為p1的標(biāo)簽和id為content的標(biāo)簽下的所有h1標(biāo)簽，如： h1

.p1,#content

h1{}

標(biāo)簽指定式選擇符偽類及偽對(duì)象

偽類及偽對(duì)象是一種特殊的類和對(duì)象，它由CSS自動(dòng)支持，屬CSS的一種擴(kuò)展型類和對(duì)象，名稱不能被用戶自定義，使用時(shí)只能夠按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。使用形式如下：

a:hover{background-color:#333333;} CSS內(nèi)置了幾個(gè)標(biāo)準(zhǔn)的偽類：

:link

a鏈接標(biāo)簽的未被訪問前的樣式；

:hover

對(duì)象在鼠標(biāo)移上時(shí)的樣式；

:active

對(duì)象被用戶點(diǎn)擊及被點(diǎn)擊釋放之間的樣式；

:visited

a鏈接對(duì)象被訪問后的樣式；

:focus

對(duì)象成為輸入焦點(diǎn)時(shí)的樣式；

:first-child

對(duì)象的第一個(gè)子對(duì)象的樣式；

:first

對(duì)于頁面的第一頁使用的樣式； CSS內(nèi)置了幾個(gè)標(biāo)準(zhǔn)偽對(duì)象：

:after

設(shè)置某一個(gè)對(duì)象之后的內(nèi)容；

:first-letter

對(duì)象內(nèi)的第一個(gè)字符的樣式設(shè)置；

:first-line

對(duì)象內(nèi)第一行的樣式設(shè)置；

:before

設(shè)置某一個(gè)對(duì)象之前的內(nèi)容。偽類及偽對(duì)象通配選擇符 CSS的通配符使用*作為關(guān)鍵字，使用方法如下：

*{color:blue;}通配選擇符CSS數(shù)值單位CSS數(shù)值單位CSS應(yīng)用方式1、行間樣式表

行間樣式表是將CSS樣式編碼編寫在XHTML標(biāo)簽之中，如： <h1style="font-size:12px;color:#000FFF;font-weight:normal">

[

...文本示例...]

</h1>2、內(nèi)部樣式表

內(nèi)部樣式表可以將樣式統(tǒng)一放置在一個(gè)固定的位置，如： <styletype="text/css"> [

...樣式內(nèi)容...] </style>3、外部樣式表

CSS樣式編碼單獨(dú)編寫在一個(gè)獨(dú)立文件之中，由網(wǎng)頁進(jìn)行調(diào)用，如： <linkrel="stylesheet"rev="stylesheet"href="style.css"type="text/css"/>CSS應(yīng)用方式1、行間樣式表為什么要進(jìn)行CSS命名首先CSS也是一種語言

和其他語言一樣，混亂的命名方式會(huì)讓使用和維護(hù)增加很多困難為什么要進(jìn)行CSS命名首先CSS也是一種語言

通用的命名規(guī)則軟件工程的命名法通常有下面三種：

匈牙利命名法

寫法:它是通過在變量名前加上相應(yīng)的小寫字母符號(hào)作為前綴,標(biāo)識(shí)出變量的作用域,類型等!

例如:pfnSmartDog,pfn類型描述,表示指向函數(shù)的指針,SmartDog對(duì)變量的描述,所以它表示指向SmartDog函數(shù)的函數(shù)指針變量

駱駝式命名法寫法:規(guī)定每一個(gè)單詞首字母應(yīng)使用大寫字母來標(biāo)記,但名稱的首字母要小寫.例如:myFunction還有一種下劃線的衍生:my_Function

帕斯卡命名法寫法:和駱駝式命名法類似,只是第一個(gè)單子字母為大寫.例如:MyFunction

通用的命名規(guī)則軟件工程的命名法通常有下面三種：

CSS的命名規(guī)則1.要區(qū)分大小寫,盡量使用小寫,特殊單詞首字母可以大寫2.要注意命名合法性,字母開頭,后面可以接數(shù)字,字母,下劃線等等3.要反映出用途和相關(guān)信息,絕對(duì)不能使用上文中的XX1,XX2,XX3CSS的命名規(guī)則1.要區(qū)分大小寫,盡量使用小寫,特殊單詞首字CSS命名的具體方法1.語義化

id=”left-side” id=”center-column” .red{color:red;}.f12{font-size:12px;}.left{float:left;}2.結(jié)構(gòu)化 id=”navbar” id=”sidebar” id=”sub_nav”

常用的布局名稱: wrap/wrappercontainersitenav

columnslayout

sidebar

logo

bannertoolbarheader

footer

homepage

title

currentsummarymsg

textbox

tipsbtnarr/arrow

文件類型:master.css主布局文件themes.css主題文件layout.css布局和版式文件base.css基本公共文件font.css字體文件forms.css表單文件print.css打印樣式文件mend.css補(bǔ)丁文件

CSS命名的具體方法1.語義化結(jié)構(gòu)化CSS實(shí)例CSS語言腳本

#header{background:#474747;height:147px;width:100%;} #top{padding:18px000;} #topimg{margin:0;padding:0;border:0;} #headerpanel{width:940px;height:95px;} #headerpanelimg{margin:00040px;padding:0;} #menu{padding-top:37px;} #menuul{text-align:center;list-style:none;margin:0;padding:000124px;} #menuulli{display:inline;margin:0;padding:0;} #menuullia{display:block;float:left;width:98px;} #menuulli.menulast{width:97px;} #menuul#activea{background:url(../../images/menubgactive.gif)no-repeat;}結(jié)構(gòu)化CSS實(shí)例CSS語言腳本

CSShack針對(duì)不同的瀏覽器寫不同的CSScode的過程，就叫CSShack書寫順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在后面CSShack針對(duì)不同的瀏覽器寫不同的CSScode的過CSS3.0與CSS2.1對(duì)比1.選擇符模塊2.印刷出版的分頁媒體模塊3.背景和邊框模塊4.多列布局模塊5.高級(jí)布局模塊6.媒體查詢模塊CSS3.0與CSS2.1對(duì)比1.選擇符模塊CSS3屬性瀏覽器支持情況CSS3屬性瀏覽器支持情況CSS3選擇器瀏覽器支持情況CSS3選擇器瀏覽器支持情況謝謝！謝謝！互聯(lián)網(wǎng)樣式標(biāo)準(zhǔn)--CSS語言byjosh.y2010年09月07日黃金灣互聯(lián)網(wǎng)樣式標(biāo)準(zhǔn)--CSS語言byjosh.y2010年0CSS語言的起源HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。

由于當(dāng)時(shí)兩種主要的瀏覽器（Netscape和InternetExplorer）不斷地將新的HTML標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到HTML規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難。

為了解決這個(gè)問題，萬維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了HTML標(biāo)準(zhǔn)化的使命，并在HTML4.0之外創(chuàng)造出樣式（Style）。

所有的主流瀏覽器均支持層疊樣式表。

CSS語言的起源HTML標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。CSS語言的演變1996年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS1.0標(biāo)準(zhǔn)，2008年4月做了最后修訂

1998年5月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS2.0標(biāo)準(zhǔn)，并在2008年4月做了修訂

2009年9月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS2.1標(biāo)準(zhǔn)2009年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CSS3.0標(biāo)準(zhǔn)

CSS語言的演變1996年12月萬維網(wǎng)聯(lián)盟（W3C）發(fā)布了CCSS語法CSS語法結(jié)構(gòu)僅僅由三部分組成：選擇符（selector）、屬性（property）和值（value）。

使用方法：selector(Property:value;)選擇符（selector）指著組樣式編碼所要針對(duì)的對(duì)象屬性（Property）是CSS樣式控制的核心，如顏色、大小、定位、浮動(dòng)方式等。值（value）是指屬性的值CSS語法CSS語法結(jié)構(gòu)僅僅由三部分組成：選擇符（selecCSS選擇符的分類類型選擇符 body{}、div{}、span{}群組選擇符 h1,h2,h3,p,spanP{font-size:12px;font-family:arial;}包含選擇符 h1span{font-weight:bold;}id選擇符 <divid="content"></div> #content{font-size:14px;line-height:130%;}class選擇符 <divclass="p1"></div> <h1class="p1"></h1> <h3class="p1"></h3> .p1{

Margin:10px;Background-color:blue;}CSS選擇符的分類類型選擇符標(biāo)簽指定式選擇符

標(biāo)簽指定式選擇符在對(duì)標(biāo)簽選擇的精確度上介于標(biāo)簽選擇符及id/class選擇符之間，也是一種經(jīng)常能夠使用到的選擇符。 針對(duì)所有id為content的h1標(biāo)簽形式

，如： h1#content{}

針對(duì)所有class為p1的h1標(biāo)簽，如：

h1.p1{}組合選擇符

CSS在選擇符的使用上可以說是非常自由，根據(jù)頁面需求，我們可以靈活使用各種選擇符進(jìn)行設(shè)計(jì)。

id為content的h1標(biāo)簽下的h2標(biāo)簽，如： h1#content

h2{} h1標(biāo)簽下的所有class為p1的標(biāo)簽和id為content的標(biāo)簽下的所有h1標(biāo)簽，如： h1

.p1,#content

h1{}

標(biāo)簽指定式選擇符偽類及偽對(duì)象

偽類及偽對(duì)象是一種特殊的類和對(duì)象，它由CSS自動(dòng)支持，屬CSS的一種擴(kuò)展型類和對(duì)象，名稱不能被用戶自定義，使用時(shí)只能夠按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。使用形式如下：

a:hover{background-color:#333333;} CSS內(nèi)置了幾個(gè)標(biāo)準(zhǔn)的偽類：

:link

a鏈接標(biāo)簽的未被訪問前的樣式；

:hover

對(duì)象在鼠標(biāo)移上時(shí)的樣式；

:active

對(duì)象被用戶點(diǎn)擊及被點(diǎn)擊釋放之間的樣式；

:visited

a鏈接對(duì)象被訪問后的樣式；

:focus

對(duì)象成為輸入焦點(diǎn)時(shí)的樣式；

:first-child

對(duì)象的第一個(gè)子對(duì)象的樣式；

:first

對(duì)于頁面的第一頁使用的樣式； CSS內(nèi)置了幾個(gè)標(biāo)準(zhǔn)偽對(duì)象：

:after

設(shè)置某一個(gè)對(duì)象之后的內(nèi)容；

:first-letter

對(duì)象內(nèi)的第一個(gè)字符的樣式設(shè)置；

:first-line

對(duì)象內(nèi)第一行的樣式設(shè)置；

:before

設(shè)置某一個(gè)對(duì)象之前的內(nèi)容。偽類及偽對(duì)象通配選擇符 CSS的通配符使用*作為關(guān)鍵字，使用方法如下：

*{color:blue;}通配選擇符CSS數(shù)值單位CSS數(shù)值單位CSS應(yīng)用方式1、行間樣式表

行間樣式表是將CSS樣式編碼編寫在XHTML標(biāo)簽之中，如： <h1style="font-size:12px;color:#000FFF;font-weight:normal">

[

...文本示例...]

</h1>2、內(nèi)部樣式表

內(nèi)部樣式表可以將樣式統(tǒng)一放置在一個(gè)固定的位置，如： <styletype="text/css"> [

...樣式內(nèi)容...] </style>3、外部樣式表

CSS樣式編碼單獨(dú)編寫在一個(gè)獨(dú)立文件之中，由網(wǎng)頁進(jìn)行調(diào)用，如： <linkrel="stylesheet"rev="stylesheet"href="style.css"type="text/css"/>CSS應(yīng)用方式1、行間樣式表為什么要進(jìn)行CSS命名首先CSS也是一種語言

和其他語言一樣，混亂的命名方式會(huì)讓使用和維護(hù)增加很多困難為什么要進(jìn)行CSS命名首先CSS也是一種語言

通用的命名規(guī)則軟件工程的命名法通常有下面三種：

匈牙利命名法

寫法:它是通過在變量名前加上相應(yīng)的小寫字母符號(hào)作為前綴,標(biāo)識(shí)出變量的作用域,類型等!

例如:pfnSmartDog,pfn類型描述,表示指向函數(shù)的指針,SmartDog對(duì)變量的描述,所以它表示指向SmartDog函數(shù)的函數(shù)指針變量

駱駝式命名法寫法:規(guī)定每一個(gè)單詞首字母應(yīng)使用大寫字母來標(biāo)記,但名稱的首字母要小寫.例如:myFunction還有一種下劃線的衍生:my_Function

帕斯卡命名法寫法:和駱駝式命名法類似,只是第一個(gè)單子字母為大寫.例如:MyFunction

通用的命名規(guī)則軟件工程的命名法通常有下面三種：

CSS的命名規(guī)則1.要區(qū)分大小寫,盡量使用小寫,特殊單詞首字母可以大寫2.要注意命名合法性,字母開頭,后面可以接數(shù)字,字母,下劃線等等3.要反映出用途和相關(guān)信息,絕對(duì)不能使用上文中的XX1,XX2,XX3CSS的命名規(guī)則1.要區(qū)分大小寫,盡量使用小寫,特殊單詞首字CSS命名的具體方法1.語義化

id=”left-side” id=”center-column” .red{color:red;}.f12{font-size:12px;}.left{float:left;}2.結(jié)構(gòu)化 id=”navbar” id=”sidebar” id=”sub_nav”

常用的布局名稱: wrap/wrappercontainersitenav

columnslayout

sidebar

logo

bannertoolbarheader

footer

homepage

title

currentsummarymsg

textbox

tipsbtnarr/arrow

文件類型:master.css主布局文件themes.css主題文件layout.css布局和版式文件base.css基本公共文件font.