|
|
- 何為CSS
- CSS的幾種設置方式
- 樣式規則選擇器
- 樣式規則的注釋與有效范圍
- 樣式屬性詳解
什么是CSS和CSS的設置方式
什么是CSS
CSS即:Cascading Style Sheets這幾個英文單詞的縮寫,中文為:層疊樣式表.它除了可以輕松設置網頁元素的顯示位置和格式外,還能產生濾鏡,圖像淡化,網頁淡入淡出的漸變效果.簡而言之.CSS就是要對網頁的顯示效果實現與Word一樣的排版控制.例如下的代碼:
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
即設置了一個CSS樣式.
由上可知:一個HTML元素的style屬性可以指定多種樣式風格,每種樣式 風格的名稱和它的設置值之間用冒號來分開,每種樣式風格之間用分號來分開.各種"樣式風格名稱"被稱之為"CSS屬性",樣式風格的"設置值"被稱為"CSS屬性值".這種設置網頁元素的顯示效果的方式就是CSS.
CSS的設置方式
- 內聯樣式表(inline style sheets)
例如：
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>在使用內聯樣式表時HTML4.01標準建議用戶在網頁的<head></head>標簽之間增加一個<meta>標簽,
如下: <meta http-equiv="Content-Style-Type" content="text/css">
使用這種方法有兩點不足:
1、如果要將同樣的樣式風格設置到所有的段落上，則要對每一個<P>標簽進行重復的設置。
2、一個網頁可以在多種介質或媒體上輸出，使用內聯樣式表設置的樣式會在所有的媒體上輸出時都會起作用，而沒法為不同的媒體指定不同的樣式表。
- 嵌入樣式表(Embedded style sheets)
<style type="text/css" media="screen,projection">
<!--
P{"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"}
-->
</style>
</head>
media說明這個樣式在什么介質上顯示
<!-- -->是為了那些不支持CSS的瀏覽器而寫的
在<style><style>標簽對中定義的每條樣式規則的基本格式如下：
selector{property:value;property:value……}
selector:
當定義一條樣式規則時必須指定受這個樣式作用的網頁元素，在一條樣式規則中定義的網頁元素就是selector（選擇器）,也就是選擇該樣式作用于網頁元素。
有三種樣式選擇器：
- HTML標簽，如：P、BODY、A……
- CLASS
- ID
指定那些將要被修改的樣式風格名稱，即：CSS屬性，如：color、font-size……
value:
賦給property的值，即CSS的屬性值。
如果要在不多個網頁中使用同一樣風格，則要在每一個網頁的HEAD中加入CSS定義，這就是嵌入樣式表的不足之處
- 外部樣式表(Linked style sheets)
例：
| 先建一個test.css文件，代碼如下： P{ "FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline" } |
| 再寫一個要使用該樣式表的文件，設他倆在同一文件夾下： <head> <link rel="StyleSheet" href="test.css" type="text/css" media="screen"> </head> type和media是可選的,rel和href是必須的 |
- 輸入樣式表(imported sytle sheets)
例：
| 注：所有的@import部分要放在前面 |
HTML/CSS技術：Lesson03_01 什么是CSS和CSS的設置方式，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
