欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

它的源代碼如下：

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a >
<html xmlns="<a >
<head>
<title>我真慘!被用來(lái)演示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://www.dbjr.com.cn/">http://www.dbjr.com.cn/</a>">腳本之家</a></h1>
<h2>的站長(zhǎng)</h2>
<h3 style="display:none">是大傻瓜！傻瓜</h3>
<h4>愛(ài)吃大西瓜！</h4>
</body>
</html>

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

CSS語(yǔ)法簡(jiǎn)介

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

上面的內(nèi)容并沒(méi)有定義任何樣式，它的任務(wù)只是告訴瀏覽器CSS代碼的位置。下面的內(nèi)容是重點(diǎn)，正是下面這一部分的內(nèi)容使得頁(yè)面的外觀發(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)簽。屬性和屬性值則是說(shuō)明你想要描述h1的哪一個(gè)屬性，該屬性的值為多少，例如上面例子中將h1字體大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個(gè)冒號(hào)“:”分開(kāi)，以一個(gè)分號(hào)“;”結(jié)束，最后別忘記用一對(duì)大括號(hào)“{}”括起來(lái)。

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

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

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

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

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

CSS注釋

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

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

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

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

相關(guān)文章

最新評(píng)論