溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容主要講解“如何理解css中樣式表的基本語(yǔ)法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何理解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)換行。
它的源代碼如下：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>我真慘!被用來(lái)演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<!--這里將要插入CSS -->
</head>
<body>
<h2><a href="<a href="http://kemok4.com/">http://kemok4.com/</a>">億速云</a></h2>
<h3>的站長(zhǎng)</h3>
<h4>是大傻瓜！傻瓜</h4><!--我就要被修該啦，郁悶 -->
<h5>愛(ài)吃大西瓜！</h5>
</body>
</html>
下面我們簡(jiǎn)單的為它加上一點(diǎn)CSS，來(lái)讓我不再傻……按如下提示修改網(wǎng)頁(yè)的代碼：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>我真慘!被用來(lái)演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!--
h2 {font-size: 12px;}
h3,h5 {font-size: 12px; display:inline;}
-->
</style>
</head>
<body>
<h2><a href="<a href="http://kemok4.com/">http://kemok4.com/</a>">億速云</a></h2>
<h3>的站長(zhǎng)</h3>
<h4 >是大傻瓜！傻瓜</h4>
<h5>愛(ài)吃大西瓜！</h5>
</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的描述部分(定義部分)：
代碼如下:
h2 {font-size: 12px;}
h3,h5 {font-size: 12px; display:inline;}
……
<h4 >是大傻瓜！傻瓜</h4>
通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫(xiě)法如下：
選擇器 { 屬性: 屬性值; }
例如：
代碼如下:
h2 {font-size: 12px;}
本例中選擇器也就是你想要描述的HTML標(biāo)簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h2標(biāo)簽。屬性和屬性值則是說(shuō)明你想要描述h2的哪一個(gè)屬性，該屬性的值為多少，例如上面例子中將h2字體大小屬性為12像素，寫(xiě)成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ǔ)句“h3,h5 {font-size: 12px; display:inline;} ”同時(shí)為h3和,h5兩個(gè)標(biāo)簽定義了兩個(gè)樣式。當(dāng)然了，為了使你的CSS代碼更容易閱讀和維護(hù)，你可以分行書(shū)寫(xiě)這些屬性：
代碼如下:
h3,h5 {
font-size: 12px;
display:inline;
}
注意1：現(xiàn)在講解上面代碼的最后一行，在<h4 style="display:none">中，我們沒(méi)有看到選擇器，這是因?yàn)椴迦隒SS的位置不同，它將直接作用與當(dāng)前標(biāo)簽之內(nèi)的元素。關(guān)于CSS不同的插入方式將在隨后的教程中討論。
注意2：CSS的書(shū)寫(xiě)方式請(qǐng)大家根據(jù)自己的喜好決定，不過(guò)最終的目的都很明確，提高維護(hù)CSS代碼的效率。
CSS注釋
我們以一個(gè)例子介紹在CSS中插入注釋的方法：
代碼如下:
<style type="text/css">
<!--
h2 {font-size: 12px;}
/* 把標(biāo)題的大小都定義為12個(gè)像素 */
h3,h5 {font-size: 12px; display:inline;}
-->
</style>
在CSS中，注釋以“/*”開(kāi)始，以“*/”結(jié)束，注釋里面的內(nèi)容對(duì)于瀏覽器來(lái)說(shuō)是沒(méi)有意義的。
到此，相信大家對(duì)“如何理解css中樣式表的基本語(yǔ)法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
