亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css教程之樣式表的基本語法(一)

  發(fā)布時間：2014-04-08 14:56:32   作者：佚名   我要評論
這篇文章主要介紹了css樣式表的基本語法，下面還有第二部分,需要的朋友可以參考下

插入樣式表前后的網(wǎng)頁。

為了更好地理解樣式表的作用，我們先看一個CSS的應(yīng)用實例。在本例子中，你很容易對比出使用CSS前后兩個網(wǎng)頁的區(qū)別，當(dāng)然了，現(xiàn)在你可能讀不懂CSS部分的代碼。別擔(dān)心，這些代碼將在少后的教程中介紹。

我們首先來看一下未加入CSS的頁面。網(wǎng)頁里只有一段話：“菜鳥吧的站長是大傻瓜！傻瓜愛吃大西瓜！”。而且由于分別是標(biāo)題1、2、3、4，頁面內(nèi)字體大小也不相同，還有標(biāo)題的自動換行。

它的源代碼如下：

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a >
<html xmlns="<a >
<head>
<title>我真慘!被用來演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<!--這里將要插入CSS -->
</head>
<body>
<h1><a href="<a href="http://chabaoo.cn/">http://chabaoo.cn/</a>">腳本之家</a></h1>
<h2>的站長</h2>
<h3>是大傻瓜！傻瓜</h3><!--我就要被修該啦，郁悶 -->
<h4>愛吃大西瓜！</h4>
</body>
</html>

下面我們簡單的為它加上一點(diǎn)CSS，來讓我不再傻……按如下提示修改網(wǎng)頁的代碼：

復(fù)制代碼
代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a >
<html xmlns="<a >
<head>
<title>我真慘!被用來演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!--
h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
-->
</style>
</head>
<body>
<h1><a href="<a href="http://chabaoo.cn/">http://chabaoo.cn/</a>">腳本之家</a></h1>
<h2>的站長</h2>
<h3 style="display:none">是大傻瓜！傻瓜</h3>
<h4>愛吃大西瓜！</h4>
</body>
</html>

讓我們來看看加入CSS之后的網(wǎng)頁。你很容易看出兩個網(wǎng)頁的差別，頁面內(nèi)的文字大小統(tǒng)一了，而且只有標(biāo)題1后面有一個換行，甚至有一部分文字被隱藏了起來。這都要?dú)w功于上面紅色部分的代碼。它們就是CSS，下面就讓我們大概了解一下這些代碼的意義。

CSS語法簡介

加在head部分的<style type="text/css">和</style>分別被瀏覽器識別為CSS的開始和結(jié)束。而注釋標(biāo)簽<!-- -->則是避免不支持CSS的瀏覽器將CSS內(nèi)容作為網(wǎng)頁正文顯示在頁面上。

上面的內(nèi)容并沒有定義任何樣式，它的任務(wù)只是告訴瀏覽器CSS代碼的位置。下面的內(nèi)容是重點(diǎn)，正是下面這一部分的內(nèi)容使得頁面的外觀發(fā)生了明顯的變化，它也就是CSS的描述部分(定義部分)：

復(fù)制代碼
代碼如下:

h1 {font-size: 12px;}
h2,h4 {font-size: 12px; display:inline;}
……
<h3 style="display:none">是大傻瓜！傻瓜</h3>

通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：

選擇器 { 屬性: 屬性值; }

例如：

復(fù)制代碼
代碼如下:

h1 {font-size: 12px;}

本例中選擇器也就是你想要描述的HTML標(biāo)簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h1標(biāo)簽。屬性和屬性值則是說明你想要描述h1的哪一個屬性，該屬性的值為多少，例如上面例子中將h1字體大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個冒號“:”分開，以一個分號“;”結(jié)束，最后別忘記用一對大括號“{}”括起來。

我們也可以為一個選擇器同時定義多個樣式，樣式之間用分號“;”隔開。也可以同時為幾個標(biāo)簽同時定義一組樣式，標(biāo)簽之間用逗號“,”隔開。也許這兩句話比較繞嘴，不過事實上上面例子的第二行代碼就用到了CSS的這個特性。語句“h2,h4 {font-size: 12px; display:inline;} ”同時為h2和,h4兩個標(biāo)簽定義了兩個樣式。當(dāng)然了，為了使你的CSS代碼更容易閱讀和維護(hù)，你可以分行書寫這些屬性：

復(fù)制代碼
代碼如下:

h2,h4 {
font-size: 12px;
display:inline;
}

注意1：現(xiàn)在講解上面代碼的最后一行，在<h3 style="display:none">中，我們沒有看到選擇器，這是因為插入CSS的位置不同，它將直接作用與當(dāng)前標(biāo)簽之內(nèi)的元素。關(guān)于CSS不同的插入方式將在隨后的教程中討論。

注意2：CSS的書寫方式請大家根據(jù)自己的喜好決定，不過最終的目的都很明確，提高維護(hù)CSS代碼的效率。

CSS注釋

我們以一個例子介紹在CSS中插入注釋的方法：

復(fù)制代碼
代碼如下:

<style type="text/css">
<!--
h1 {font-size: 12px;}
/* 把標(biāo)題的大小都定義為12個像素 */
h2,h4 {font-size: 12px; display:inline;}
-->
</style>

在CSS中，注釋以“/*”開始，以“*/”結(jié)束，注釋里面的內(nèi)容對于瀏覽器來說是沒有意義的。

相關(guān)文章

最新評論