CSS基础-静宜大学资讯学院.PPT

CSS基礎 靜宜大學 資管系 楊子青 大綱 CSS概念 CSS基本格式 在HTML網頁套用CSS的方法 CSS的選擇器 1. CSS概念 Cascading Style Sheets (串接樣式表) 能夠重新定義HTML標籤的顯示樣式，以便符合網頁設計者的需求 CSS優點：讓網頁的內容與格式分開處理 內容由寫作人員撰寫；版面由美工人員設計 修改內容時，不應更動到版面；更換版面時，也沒理由影響內容 增加網頁設計彈性，讓網頁更容易維護 統一網站風格 加快網頁載入的速度 語法簡單、撰寫容易 CSS的應用 量身訂做HTML標記樣式 移動網頁上的元件 利用濾鏡功能，製作各式絢麗文字或圖片特效 CSS實例 /html/tryit.asp?filename=tryhtml_styles 2. CSS基本格式 Selector {property1: value1; property2: value2; … } CSS語法分成兩大部分 在大括號前是選擇器（Selector），可以選擇套用樣式的標籤 在括號之中的是重新定義顯示樣式的樣式規則 實例： 3. 在HTML網頁套用CSS的方法 方法一：行內宣告(Inline )：局部套用的CSS 直接寫在HTML標籤裡，使用style屬性定義顯示樣式 其影響範圍僅限於該標籤所套用的文字或圖片，通常是使用在div和span物件標籤，例如： div style=position: absolute; top: 50px; width: 130px; height: 130px …. /div 附註：style屬性position: absolute，定義物件以絕對位置顯示，即指定標籤的顯示位置，因此能在網頁上進行定位和重疊顯示。 在HTML網頁套用CSS的方法 方法二：內嵌宣告(Embedding)：內建網頁的CSS 在網頁head…head標籤內，使用style標籤定義CSS樣式，其影響範圍是整頁網頁內容 可以重新定義HTML標籤，或自訂Classes樣式類別，例如： style type=text/css p { font-size: 10pt; color: red; } /style 在HTML網頁套用CSS的方法 方法三：連結外部樣式檔(Linking) 樣式並不是放在HTML網頁之中，而是自成獨立檔案，其副檔名為【.css】。 在建立外部樣式表檔案後，在head區塊使用link標籤來連接外部樣式表檔案，其基本語法如下所示： link rel=stylesheet type=text/css href=樣式檔的路徑/檔名 4. CSS的選擇器 (1) 標記名稱 (型態選擇器，Type Selectors) 只需單純選擇HTML的標籤，就可以定義大括號括起的樣式組，此樣式組可以重新定義標籤樣式 例1：p標籤的新樣式： p { font-size: 14pt; color: yellow; background-color: blue; } 上述樣式選擇器選擇p標籤，表示在HTML網頁中的所有p標籤都套用後面的樣式組。 例2：div { font-size: 16px; color: #FFFFFF;} CSS的選擇器 (2) 通用選擇器(Universal selector) 選擇所有標記 (*) 例如： * { font-size: 16px; color: #ff0000;} CSS的選擇器 (3) 巢狀選擇器（Descendant Selectors） 當HTML元素擁有子孫元素時，為了避免與其他元素同名的子孫元素產生衝突，可以使用巢狀選擇器指明樣式套用的元素。 例如：在div和span標籤都有p子元素： divp內容介紹/p/div spanp本書特色/p/span 若要指明元素父子關係，讓p顯示不同的樣式： div p { font-size: 12pt; color: blue;} span p { font-size: 14pt; color: yellow;} CSS選擇器選擇div的子元素p和span的子元素p，只需使用空白分隔，就可以指明元素之間的父子階層關係 CSS的選擇器 (4) 群組選擇器(Grouping Selectors) 如果有很多不同HTML元素是使用相同的CSS樣式，可使用群組選擇器，來指定這些元素的樣式。 例如：div和p元素要使用相同的樣式，CSS語法為： div, p { text-align: center