2項目二css樣式表基礎_第1頁
2項目二css樣式表基礎_第2頁
2項目二css樣式表基礎_第3頁
2項目二css樣式表基礎_第4頁
2項目二css樣式表基礎_第5頁
已閱讀5頁，還剩20頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第二章CSS樣式表基礎01

初步認識CSS302

CSS語法結構分析03

將CSS應用于網頁01.節標題什么是CSS3CSS3發展簡史CSS3基本語法CSS的語法結構2.1.1什么是CSS3

CSS是層疊樣式表的簡稱，這是一種用來表現HTML或XML等文件樣式的計算機語言。我們都知道網頁是由內容和格式組成的，網頁上的文字和圖片是內容，文字的大小、字體、顏色等都是格式，而樣式表就是種控制網頁格式的技術。CSS不但可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁元素進行格式化。在網頁制作時使用CSS技術，可以對網頁的布局、字體、顏色、背景和其他效果實現更加精確的控制。2.1.2CSS3發展簡史

1.CSS的出現；從1990年Web被Tim

Berners-Lee和Robert

Cailliau發明出來，到1994年Web開始進入人們的生活，樣式就以各種形式存在著，只是最初的HTML只包含很少的顯示屬性。

2.CSS1；哈坤.利在1994年芝加哥的一次會議上第一次提出了CSS的建議，而當時波特.波斯正在設計一款名叫Argo的瀏覽器，他們決定共同設計CSS。

3.CSS2；1997年初，W3C內組織了專管CSS的工作組，由克里斯.里雷負責，討論了一套內容和表現效果分離的方式，在1998年5月份，推出了CSS第二版本。

4.CSS32.1.3CSS3基本語法

CSS的語法結構如下：選擇器{樣式屬性：屬性值；樣式屬性：取值；}其中，選擇器可以是多種形式的，例如要定義HTML標記中H2的樣式，可以使用以下代碼：H2{font-family:黑體;font-size:24px;}以上代碼表示，選擇器字體屬性為黑體，字體大小為24px。02.CSS語法結構分析CSS3屬性選擇器元素選擇器群組選擇器包含選擇器CLASS及ID選擇器子元素選擇器相鄰兄弟選擇器偽類及偽對象通配選擇器2.2.1CSS3屬性選擇器

屬性CSS名稱說明字體屬性font-family設置或檢索文本的字體

font-size設置或檢索文本字體的大小

font-style設置或檢索文本的字體樣式，即字體風格，主要設置字體是否為斜體。取值范圍：normal|italic|oblique

font-weight用于設置字體的粗細，取值范圍：Normal|bold|bolder|lighter|number顏色及背景屬性color設置文本的顏色

background-color設置背景顏色

background-image設置元素的背景圖像文本屬性text-align設置文本的對齊方式，如：左對齊、右對齊、居中對齊、兩端對齊

text-indent設置文本第一行的縮進量，取值可以是一個長度或一個百分比

vertical-align設置文本的縱向位置邊框屬性border-style設置邊框的樣式

border-width設置邊框的寬度

border-color設置邊框的顏色

border-left設置左邊框的屬性尺寸及定位屬性width設置元素的寬度

height設置元素的高度

left定位元素的左邊距

top定位元素的頂邊距

position設定瀏覽器如何來定位元素，absolute表示絕對定位，需要同時使用left、right、top、bottom等屬性進行絕對定位

z-index設置層的層疊先后順序和覆蓋關系2.2.2元素選擇器

最常見的CSS選擇器是元素選擇器，也就是最基本的選擇器。如果設置HTML的樣式，選擇器通常就是某個HTML元素，比如p、n1、em、a，也可以是HTML本身2.2.2元素選擇器

2.2.3群組選擇器

更改一下以上案例，假設希望h5和段落都顯示為紅色。為達到這個目的，最容易的做法是使用以下聲明：h5,p{color:red}將h5和p選擇器放在規則左邊，然后用逗號分隔，這樣就定義了一個規則。其右邊的樣式{color:red}將應用到這兩個選擇器所引用的元素。逗號告訴瀏覽器，規則中包含兩個不同的選擇器。如果沒有這個逗號，那么規則的含義將完全不同。也可以將任意多個選擇器分組在一起，對此沒有任何限制。2.2.4包含選擇器

包含選擇器又稱后代選擇器，后代選擇器可以選擇作為某元素后代的元素。我們可以定義后代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。2.2.5CLASS及ID選擇器

1.CLASS選擇器如果有兩個不同類別的標簽，如<P>和<H2>標簽，它們都采用了相同的樣式，如何讓他們共同設置同一樣式呢？這里可以采用CLASS類選擇器。需要注意的是：類名前面有一個“.”號，類的名稱可以是任意英文單詞，或以英文開頭與數字的組合，一般我們會以功能或者顯示效果簡要命名。但是，與直接定義HTML中的標記樣式不同的是：這段代碼僅僅是定義了樣式，并沒有應用樣式，如果要應用樣式中的某個類，還需要在正文中添加如下代碼：<PCLASS="類名">.....</P><H2CLASS="類名">.....</H2>2.2.5CLASS及ID選擇器

2.ID選擇器ID選擇器使用HTML元素的ID屬性。與CLASS選擇器不同的是，ID名前面是“#”號，ID的名稱可以是任意取名，但在整個網頁中必須唯一，不能重名。由于ID選擇器的功能與CLASS選擇器一樣，并且有時容易與HTML標簽的ID屬性相沖突，所以一般不推薦使用。2.2.6子元素選擇器

子元素選擇器(Childselectors)只能選擇作為某元素子元素的元素(IE6不支持子元素選擇器）。如果用戶不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器。例如，如果用戶希望選擇只作為h1元素子元素的strong元素，可以按照如下規則寫：h1>strong{color:red;}2.2.7相鄰兄弟選擇器

如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器(Adjacentsiblingselector)。例如，如果要增加緊接在h1元素后出現的段落的上邊距，可以這樣寫：h1+p｛margin-top:50px；｝這個選擇器讀作：“選擇緊接在h1元素后出現的段落，h1和p元素擁有共同的父元素”。請記住，用一個結合符只能選擇兩個相鄰兄弟中的第二個元素。相鄰兄弟結合符還可以結合其他結合符。2.2.8偽類及偽對象

還有一種特殊的用法，就是指定某個標簽的個別屬性的樣式，許多資料上也稱為“偽類”選擇器。常見的就用就是對于超鏈接，超鏈接最初不帶下劃線，當用戶鼠標移動到超鏈接的上方時，顯示紅色的下劃線；當用點擊時超鏈接又變成綠色，并且變得沒有下劃線。偽對象也叫偽元素，用于向某些選擇器設置特殊效果。偽元素的語法如下：selector:pseudo-element｛property:value;｝CSS類也可以與偽元素配合使用：selector.class:pseudo-element｛property:value;｝：first-line偽元素"first-line”偽元素用于向文本的首行設置特殊樣式。2.2.9通配選擇器

和很多語言一樣，“*”這個符號在CSS里代表所有，即通配選擇器。例如：*｛font-size:12px;｝這個例子表示將網頁中所有元素的字體定義為12像素，當然這是舉個例子，一般不會做這么極端的定義。在實際應用中，更多的可能如下：*｛margin:0;padding:0;｝2.2.9通配選擇器這個定義的含義是將所有元素的外邊距和內邊距定義為0，而在具體需要設定內外邊距的時候，再具體定義。從這個例子可以看出，通配選擇器的作用更多是用于對元素的一種統一預設定。通配選擇器也可以用于選擇器組合中：div*｛color:#FF0000;｝該例子表示在<div>標簽內的所有字體顏色為紅色。一種例外的情況：body*｛font-size:120%;｝這時候它表示相乘，當然body也可以換成別的選擇器標簽。由于這種效果取決的因素較多，一般不常使用。03.將CSS應用于網頁行內樣式表內部樣式表外部樣式表2.3.1行內樣式表

如果希望某段文字和其他段落文字的顯示風格不一樣，那么采用“行內樣式”比合適。行內樣式使用元素標簽的STYLE屬性定義，例如，兩段文字需要采用不同的字體顏色顯示，則可在標簽內加上style屬性。這種方法簡單有效，適合于單個標簽，但是，如果有許多同類的標簽，如都是P>標名，希望采用同一樣式，如果在每個<P>標簽內都加上重復的樣式代碼，那將比較麻煩。這是可以采用內嵌樣式，即把樣式統一放置在<HEAD>標簽內。2.3.2內部樣式表

內嵌樣式表也稱為嵌入樣式表，它放置在<HEAD>標簽內，格式如下：<HEAD><STYLETYPE="TEXT/CSS">//1……樣式規則……</STYLE></HEAD>其中<STYLE></STYLE>分別代表樣式的開始和結束。定義好某個標簽(如<p>)的樣式后，所有同類的標簽(如<p＞)都將采用該樣式。2.3.3外部樣式表

無論是行內樣式還是內嵌樣式，都實現了在同一張網頁內，各個標簽可以采用自己希望的樣式。但是，這還遠遠不夠，因為在開發網站時，可能希望整個網站的所有網頁都采用同一樣式，這怎么辦呢？這時候可以把這些樣式從<HEAD>標簽中提取出來，放在一個單獨的文件，然后和每張網頁關聯,這種做法就是外部樣式表。根據樣式文件與網頁的關聯方式，可分為兩種：鏈接外部樣式表和導入樣式表。1.鏈接外部樣式表鏈接外部樣式表是指通過HTML的LINK標簽，把樣式文件和網頁建立關聯，而這個<LINK>標簽必須放到頁面的<HEAD>區域內，其語法格式如下：<head><linkrel="stylesheet"type="text/css"href="樣式表文件.css"></head>在該語法中，瀏覽器從樣式表文件中以文檔格式讀出定義的樣式表。Rel="stylesheet"是指在頁面中使用的是外部樣式表；type=“textcss”是指文件的類型是樣式表文本；href參數用來指定文件的地址，可以是絕對地址或相對地址。2.3.3外部樣式表

具體創建步驟如下所示：(1)創建外部樣式表文件：新建文本文檔，把以前寫在<HEAD>中的樣式規則寫入這個文件即可，保存時以.CSS為擴展名。(2)把樣式文件和網頁關聯：假定某個網站中的3-9.

溫馨提示

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

評論

0/150

提交評論