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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

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

HTML的所有標簽都可以通過以下盒子模型來設(shè)置其樣式盒子模型組成邊距：margin邊框線：border內(nèi)容周圍的填充：padding內(nèi)容：contentDIV+CSS布局基礎(chǔ)盒子模型的實際寬度=內(nèi)容的寬度+填充*2+邊框*2+邊距*2盒子模型的實際高度=內(nèi)容的高度+填充*2+邊框*2+邊距*2盒子模型的3D層次背景顏色與背景圖象同時設(shè)置，則背景圖象會把背景顏色蓋住，如果背景圖象有透明部分，則可以通過透明部分看到背景顏色背景顏色與背景圖象應用不到邊距(margin)部分區(qū)域同時設(shè)置背景顏色與背景圖片可以簡寫為以下格式：background:顏色圖片DIV+CSS布局基礎(chǔ)在HTML的標簽中，有部分已經(jīng)是可以直接應用以上盒子模型的各項內(nèi)容，我們稱之為塊級(Blocklevel)標簽。有部分是作為文章的一部分包含在內(nèi)的標簽，我們稱之為行內(nèi)(inline)標簽。以下是常用的塊級標簽與行內(nèi)標簽：塊級標簽：div，dl，form，h1~h6，hr，ol，p，table，ul行內(nèi)標簽：a，button，iframe，img，input，label，select，span，textarea塊級標簽與行內(nèi)標簽最明顯的區(qū)別：塊級標簽會默認情況下會自動另起一行；而行內(nèi)標簽則不會。塊級標簽向行內(nèi)標簽轉(zhuǎn)換使用display:inline樣式；行內(nèi)標簽向塊級標簽轉(zhuǎn)換使用display:block樣式。行內(nèi)標簽設(shè)置為塊級標簽后也會自動換行，可以設(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ǔ)凡涉及到邊框樣式(實線或虛線等)，寬度，顏色的樣式代碼，可以簡寫成

邊框:樣式

寬度

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

background:顏色

圖片

水平位置

垂直位置

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

方法:clear:both

父節(jié)點觸發(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)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論