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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

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

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

DIV+CSS布局基礎CSS的盒子模型

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

右

下

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

屬性:上

左右

下

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

左右

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

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

邊框:樣式

寬度

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

background:顏色

圖片

水平位置

垂直位置

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

方法:clear:both

父節點觸發，例如oveflow:hidden定位（4種）Static

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

relative

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

absolute

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

fixed

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論