Web前端學(xué)習(xí)之CSS課件_第1頁
Web前端學(xué)習(xí)之CSS課件_第2頁
Web前端學(xué)習(xí)之CSS課件_第3頁
Web前端學(xué)習(xí)之CSS課件_第4頁
Web前端學(xué)習(xí)之CSS課件_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁客戶端編程基礎(chǔ)之CSS學(xué)習(xí)樣式表(CSS)概述HTML只不過是構(gòu)成一個文本文件的一系列標(biāo)簽，而具體指定其構(gòu)成標(biāo)簽是如何顯示的，就需要用到樣式表了。導(dǎo)入樣式表之后，在HTML中許多無法實(shí)現(xiàn)的功能均可實(shí)現(xiàn)，而且，HTML會變得簡潔，容量也會減少。從而會大幅度的使網(wǎng)頁的更新或修改等操作變得非常容易。另外，從HTML中去除了有關(guān)顯示方面的限制，因此，網(wǎng)頁就能夠在更多的環(huán)境中使用，增加了網(wǎng)頁的通用性。CSS基礎(chǔ)CSS的基本語法選擇器{屬性:值}選擇器用來表示樣式表的應(yīng)用部分。在其后的大括號中要寫上想要應(yīng)用的樣式。如果指定設(shè)置的屬性值有很多的話，各屬性值之間要用分號隔開。如：選擇器{屬性1:值1;屬性2:值2;…}CSS的選擇器在類選擇器等情況下區(qū)分大小寫，在重定義標(biāo)簽選擇器下不區(qū)分大小寫，屬性值則一律不區(qū)分大小寫。所以這里建議，不管什么選擇器，所有都小寫，以避免混擾。CSS基礎(chǔ)CSS樣式表代碼根據(jù)其擺放的位置可以分為三種單個網(wǎng)頁共同使用：在網(wǎng)頁的<head>~</head>之內(nèi)使用

<styletype=“text/css”> <!-- ~

--> </style>這里的<!---->符號用來讓那些不支持CSS樣式表的瀏覽器當(dāng)作HTML的注釋。這種擺放的CSS只能在本頁使用。CSS基礎(chǔ)多個網(wǎng)頁共同使用。如果編寫的CSS代碼在多個網(wǎng)頁中應(yīng)用，則需要建立一個單獨(dú)的CSS文件，在需要應(yīng)用的網(wǎng)頁中加入

<linkrel=“stylesheet”href=“URL”type=“text/css”/>

標(biāo)簽調(diào)用。URL表示CSS文件的存放路徑（建議使用相對路徑）CSS文件的后續(xù)名(擴(kuò)展名)為.CSS在建設(shè)網(wǎng)站時建議使用這種方式，這樣可以用同一個或幾個CSS文件控制整個網(wǎng)站的表現(xiàn)風(fēng)格與形式。修改維護(hù)起來也特別方便。CSS基礎(chǔ)在單個標(biāo)簽中使用。在網(wǎng)頁中所有HTML標(biāo)簽中都可以使用style屬性來單獨(dú)為某一個標(biāo)簽設(shè)置CSS樣式。如：<pstyle=“color:#f00;”></p>在XHTML1.1中已經(jīng)不推薦使用style屬性，所以盡量不要使用這種方法。CSS基礎(chǔ)CSS的優(yōu)先級 樣式表不僅只有網(wǎng)頁設(shè)計(jì)人員能夠設(shè)置，根據(jù)不同的瀏覽器，用戶也可以自由應(yīng)用不同的樣式表。另外瀏覽器也有默認(rèn)的樣式表，一開始就會應(yīng)用這個默認(rèn)的樣式表。也就是說，對于同一個網(wǎng)頁文件，“設(shè)計(jì)人員”，“用戶”和“瀏覽器”這3者都可能會同時應(yīng)用樣式表，從而導(dǎo)致了樣式表的優(yōu)先級問題。這三者的優(yōu)先級順序如下：設(shè)計(jì)人員的樣式表用戶的樣式表瀏覽器默認(rèn)的樣式CSS基礎(chǔ)設(shè)計(jì)人員設(shè)計(jì)的樣式表中可能也會出現(xiàn)沖突的現(xiàn)象，比如以下例子：<styletype=“text/css”><!-- p{color:#f00;} .student{color:#00f;}--></style><pclass=“student”>張三</p>對于文字“張三”，樣式表中定義的兩個樣式表p與.student都對其起作用，那么只能是一個有效。這里謹(jǐn)記是應(yīng)用“就近原則”選擇，那個樣式表離“張三”最近，就用哪個，所以“張三”文字顯示為藍(lán)色（#00F）。CSS基礎(chǔ)可以使用!important關(guān)鍵字改變其優(yōu)先級。!important關(guān)鍵字寫在要優(yōu)先的屬性值后面。例如上面例子將p的樣式改寫如下：p{color:#f00!important;}則文字“張三”顯示為紅色（#f00）。CSS基礎(chǔ)CSS按照選擇器的格式大致可以分為以下四種：重定義HTML標(biāo)簽：選擇器寫的就是HTML的標(biāo)簽，意思是對其起作用范圍內(nèi)的該標(biāo)簽重新定義一個樣式，例如p{color:#f00;}作用就是最其起作用范圍內(nèi)的所有<p>標(biāo)簽中的文字重新定義為紅色。重定義HTML標(biāo)簽的選擇器寫的標(biāo)簽名不區(qū)分大小，建議用小寫重定義HTML標(biāo)簽的選擇器寫的一定要是HTML的合法標(biāo)簽名重定義HTML標(biāo)簽的樣式一旦建立，會對其作用范圍內(nèi)的標(biāo)簽自動應(yīng)用如果對于多個HTML標(biāo)簽使用同一種樣式的，可以使用以下格式簡寫： p,h1,a{color:#00f;font-size:12px;}

表示對p、h1、a三個標(biāo)簽內(nèi)的文字重新設(shè)置為藍(lán)色，12px大小*表示所有HTML標(biāo)簽CSS基礎(chǔ)類選擇器。就是建立一個類，并為這個類定義一些樣式，在需要應(yīng)用的標(biāo)簽內(nèi)以class=“類名”的形式套用，例如：.student{color:#00f;}<pclass=“student”>張三<p>類名的前邊一定要加上一個小數(shù)點(diǎn)(.)以表示這是個類選擇器而不是重定義標(biāo)簽類名建議起得有意思，避免起abcd等沒有意思的名字在需要應(yīng)用類選擇器的標(biāo)簽內(nèi)用上class屬性套用在標(biāo)簽內(nèi)用class屬性套用時不需要加上小數(shù)點(diǎn)一個標(biāo)簽要套用多個類的樣式，可以使用空格隔開。例如<pclass=“studentname”>張三</p>CSS基礎(chǔ)ID選擇器。ID選擇器就是建立一個ID名稱，并為其設(shè)置樣式，在需要應(yīng)用的標(biāo)簽內(nèi)以id=“ID選擇器名”的形式調(diào)用，例如#student{color:#00f;}<pid=“student”>張三<p>ID名的前邊一定要加上一個(#)以表示這是個ID選擇器而不是重定義標(biāo)簽ID名建議起得有意思，避免起abcd等沒有意思的名字在需要應(yīng)用ID選擇器的標(biāo)簽內(nèi)用上id屬性套用在標(biāo)簽內(nèi)用id屬性套用時不需要加上(#)號id屬性在標(biāo)簽中是一個比較特殊的名稱，相當(dāng)于一個人的名字，在以后學(xué)習(xí)的javascript中需要使用。而一般來說，兩個人的名字最好不要相同，網(wǎng)頁中任何兩個標(biāo)簽的id名也最好不要相同，以免編寫javascript代碼時運(yùn)行出錯。CSS基礎(chǔ)偽類選擇器。簡單點(diǎn)說，偽類選擇器的前一部分是屬于HTML標(biāo)簽，后面部分不屬于HTML標(biāo)簽，只是屬于HTML標(biāo)簽的某一個狀態(tài)，期間用冒號(:)隔開。最常見的四個偽類選擇器：a:link鏈接的初始狀態(tài)a:visited鏈接點(diǎn)擊后的狀態(tài)a:hover鼠標(biāo)處于鏈接上的狀態(tài)a:actived鏈接被激活中的狀態(tài)(這個很少用)以上的四個狀態(tài)設(shè)置時一定要按上面的順序，否則會出錯還有一些相對少用的偽類:first-line :first-child:first:left:right:lang等等，這里不再詳細(xì)學(xué)習(xí)，具體可看相應(yīng)的技術(shù)書籍CSS的繼承關(guān)系之前介紹的各種的選擇器均可以通過不同的繼承關(guān)系來設(shè)置，例如：#studentp{color:#00f;}指定只有在id名為student的標(biāo)簽元素后應(yīng)用類選擇器name的標(biāo)簽元素才有效，即<divid="student"><p>張三</p></div><p>李四</p>只有“張三”是藍(lán)色的，“李四”則不是。類似的嵌套用法還有很多，也很靈活，具體要在以后的實(shí)際學(xué)習(xí)，應(yīng)用中掌握

DIV+CSS布局基礎(chǔ)CSS的盒子模型

HTML的所有標(biāo)簽都可以通過以下盒子模型來設(shè)置其樣式盒子模型組成邊距：margin邊框線：border內(nèi)容周圍的填充：padding內(nèi)容：contentDIV+CSS布局基礎(chǔ)盒子模型的實(shí)際寬度=內(nèi)容的寬度+填充*2+邊框*2+邊距*2盒子模型的實(shí)際高度=內(nèi)容的高度+填充*2+邊框*2+邊距*2盒子模型的3D層次背景顏色與背景圖象同時設(shè)置，則背景圖象會把背景顏色蓋住，如果背景圖象有透明部分，則可以通過透明部分看到背景顏色背景顏色與背景圖象應(yīng)用不到邊距(margin)部分區(qū)域同時設(shè)置背景顏色與背景圖片可以簡寫為以下格式：background:顏色圖片DIV+CSS布局基礎(chǔ)在HTML的標(biāo)簽中，有部分已經(jīng)是可以直接應(yīng)用以上盒子模型的各項(xiàng)內(nèi)容，我們稱之為塊級(Blocklevel)標(biāo)簽。有部分是作為文章的一部分包含在內(nèi)的標(biāo)簽，我們稱之為行內(nèi)(inline)標(biāo)簽。以下是常用的塊級標(biāo)簽與行內(nèi)標(biāo)簽：塊級標(biāo)簽：div，dl，form，h1~h6，hr，ol，p，table，ul行內(nèi)標(biāo)簽：a，button，iframe，img，input，label，select，span，textarea塊級標(biāo)簽與行內(nèi)標(biāo)簽最明顯的區(qū)別：塊級標(biāo)簽會默認(rèn)情況下會自動另起一行；而行內(nèi)標(biāo)簽則不會。塊級標(biāo)簽向行內(nèi)標(biāo)簽轉(zhuǎn)換使用display:inline樣式；行內(nèi)標(biāo)簽向塊級標(biāo)簽轉(zhuǎn)換使用display:block樣式。行內(nèi)標(biāo)簽設(shè)置為塊級標(biāo)簽后也會自動換行，可以設(shè)置浮動屬性清除其自動換行。如float:left;DIV+CSS布局基礎(chǔ)margin-topborder-toppadding-top內(nèi)容：contentmargin-rightmargin-bottommargin-leftborder-rightborder-bottomborder-leftpadding-rightpadding-bottompadding-leftDIV+CSS基礎(chǔ)代碼的簡寫：所有跟上，下，左，右有關(guān)的屬性可以統(tǒng)一寫成： 屬性:上

右

下

左 的格式如果左右的值剛好相等，則可以簡寫成

屬性:上

左右

下

的格式如果上下，左右分別剛好相等，則可以簡寫成 屬性:上下

左右

的格式如果上下左右全部相同，則可以寫成 屬性:上下左右

的格式DIV+CSS基礎(chǔ)凡涉及到邊框樣式(實(shí)線或虛線等)，寬度，顏色的樣式代碼，可以簡寫成

邊框:樣式

寬度

顏色;凡涉及到背景圖片，背景顏色，背景水平位置，背景垂直位置，是否固定等，一律可以簡寫成

background:顏色

圖片

水平位置

垂直位置

是否固定的格式浮動熟悉浮動元素不會占用空間任何一個浮動都要最后都要清楚浮動，使其占用空間

方法:clear:both

父節(jié)點(diǎn)觸發(fā)，例如oveflow:hidden定位（4種）Static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

溫馨提示

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

最新文檔

評論

0/150

提交評論