當前位置:才華齋>設計>網頁設計>

CSS-層疊樣式表基礎教程

網頁設計 閱讀(5.26K)
CSS-層疊樣式表基礎教程
  層疊樣式表(Cascading Style Sheets,簡寫CSS),網頁可以使用CSS來決定檔案的顏色、字型、排版等顯示特性。CSS最主要的目的是將檔案的結構和內容(用HTML或其他相關的語言寫的)與檔案的顯示樣式(CSS)分隔開來。比如HTML中H2標誌這一個二級標題,它在級別上比一級標題H1低,比三級標題H3高,這個就是結構上的資訊。  HTML檔案中的每一個class或id都可以有自己的顯示特徵,而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML自己需要的,有的是專門為CSS設定的。  使用CSS的優點有:  1.一個整個網站或其中一部分網頁的顯示資訊被集中在一個地方,要改變它們很方便;  2.不同的讀者可以有不同的樣式,比如有的讀者需要字型比較大;  檔案本身的範圍變小了,它的結構簡單了,它不需要包含顯示的資訊。  CSS資訊可以來自:  1.作者樣式  ①作者可以在HTML文件<head>標籤中使用<link>標籤呼叫獨立的外部樣式表(CSS檔案)  ②作者可以將CSS資訊內嵌在HTML頁面內(元素直接使用style屬性)  ③作者可以在HTML文件<head>標籤中定義嵌入式樣式表  ④作者可以直接在HTML頁面內定義+呼叫樣式表  2.讀者樣式  ⑤讀者可以在其瀏覽器內設立一個地區性的CSS檔案。這個CSS檔案可以用在所有的'HTML檔案上  3.瀏覽器的樣式  ⑥假如外部沒有特別指定一個樣式的話,一般瀏覽器自己有一個內在的樣式。  其優先順序為:  內嵌樣式(在HTML元素內部)>  內部呼叫樣式(在HTML元素周圍)>  內部嵌入樣式表(位於<head>標籤內部)>  外部樣式表>(<link>呼叫呼叫外部樣式表)  區域性CSS檔案>  瀏覽器預設設定  一、CSS規則由兩個主要的部分構成:選擇器,以及一條或多條宣告(屬性+值),也就是呼叫+定義。  1.元素選擇器,文件的元素就是最基本的選擇器。  ---------  <H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>  上面的例子可以變成這樣:H2是選擇器,color和background是屬性,red和white是值(如果值為多個單詞,則要加引號)。  <H2>使用CSS</H2>  H2 { color: red; background: white; }  ---------  選擇器,id選擇器以"#"來定義。  #red {color:red;}  <p id="red">這個段落是紅色。</p>  --------  3.類選擇器,類選擇器以一個點號顯示(類名的第一個字元不能使用數字)。  er {text-align: center}  <h1 class="center">  This heading will be center-aligned  </h1>  4.屬性選擇器,對帶有指定屬性的HTML元素設定樣式。  下面的例子為帶有title屬性的所有元素設定樣式:  [title]  {  color:red;  }  5.p+CSS  p+css是一種常見的網頁佈局方法。p是用來排版的,而css是用來定義p的樣式。p+css通常採用外鏈的方式來呼叫層疊樣式表文件(),用id和class來標識區分網頁中不同結構的特徵。  二、行內樣式表  除在HTML內直接「定義+呼叫」之外(如上.),也可於HTML內直接使用style屬性。  用style屬性設定顏色、字型和尺寸如下:  <html>  <body>  <h1 style = "font-family:verdana">文章標題</h1>  <p style = "font-family:arial;color:red;font-size:20px;">文字內容</p>  <p style="color:red; background:yellow; font-weight:bold;">