我們學習CSS要明白一個重要的問題,CSS主要是解決與實現表現(CSS)與結構(HTML)的分離。我們編寫完HTML之后,如何通過CSS對HTML實現控制呢。
1、 行內樣式
2、 內嵌樣式
3、 鏈接樣式
4、 導入樣式
我們這一節課的示例就先從行內樣式開始
行內樣式:就是直接在HTML上寫樣式,就是HTML上加屬性style=””這種形式。如<p style=”color:#f00”>divcss8</p>,但是這種方法并不是被我們推薦的,因為不利于實現表現與結構分離。也為后期維護帶來很多不必要的困難。我們只需要知道即可。
內嵌樣式:針對當前一個網頁可以使用的樣式,一般寫在html的<head></head>標記中。而且要使用一個示明,我們的樣式都要寫到這個聲明中如下:
復制代碼代碼如下:
<style type=”text/css”>寫我們的樣式</style>
我們看一個示例文件為我們段落文字改成紅色的:
復制代碼代碼如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>divcss8第一示例</title>
<style type=”text/css”>
p
{
color:#f00;
}
</style>
</head>
<body>
<p>divcss8</p>
<h2>www.divcss8.com</h2>
</body>
</html>
我們在這里又有一個新的知識點。如果我們想給段落添加一個樣式的話。我們可以通過兩步實現,第一步先找到這個段落,第二步添加CSS樣式屬性(PS:這些屬性咱們現在可以理解為已經提供好的,咱們使用即可)。
那咱們現在就看一下這個CSS選擇器:
CSS選擇器的分類:
1、 HTML標簽選擇器
2、 群組選擇器
3、 包含選擇器
4、 自定義選擇器有可以分為兩種
a) Class選擇器
b) ID選擇器
HTML標簽選擇器:就是直接使用BODY中的HTML標記做為選擇符,就像我們第一示例那樣。
但是這種選擇器有一種局限性。假設我們有兩個段落。要設置不一樣的效果。那怎么辦呢?當然我們選擇器必須結合起來用才可以。
假如我們要為網頁中的H2和P的文字都要改成紅色的,怎么辦呢?這時候群組選擇器就派上用場了。我們看個示例文件
復制代碼代碼如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
新聞熱點
疑難解答