建站
咨詢
售后
建站咨詢
新聞中心
本篇內(nèi)容主要講解“如何理解css中樣式表的基本語(yǔ)法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何理解css中樣式表的基本語(yǔ)法”吧!
目前成都創(chuàng)新互聯(lián)公司已為上千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、麻城網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
插入樣式表前后的網(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è)里只有一段話：“菜鳥吧的站長(zhǎng)是大傻瓜！傻瓜愛(ài)吃大西瓜！”。而且由于分別是標(biāo)題1、2、3、4，頁(yè)面內(nèi)字體大小也不相同，還有標(biāo)題的自動(dòng)換行。
它的源代碼如下：
代碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">
content="text/html; charset=gb2312" />
https://www.cdcxhl.com/">創(chuàng)新互聯(lián)
的站長(zhǎng)
是大傻瓜！傻瓜
愛(ài)吃大西瓜！
下面我們簡(jiǎn)單的為它加上一點(diǎn)CSS，來(lái)讓我不再傻……按如下提示修改網(wǎng)頁(yè)的代碼：
代碼如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">
content="text/html; charset=gb2312" />
https://www.cdcxhl.com/">創(chuàng)新互聯(lián)
的站長(zhǎng)
是大傻瓜！傻瓜
愛(ài)吃大西瓜！
讓我們來(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部分的分別被瀏覽器識(shí)別為CSS的開始和結(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;}
……
是大傻瓜！傻瓜
通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：
選擇器 { 屬性: 屬性值; }
例如：
代碼如下:
h2 {font-size: 12px;}
本例中選擇器也就是你想要描述的HTML標(biāo)簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h2標(biāo)簽。屬性和屬性值則是說(shuō)明你想要描述h2的哪一個(gè)屬性，該屬性的值為多少，例如上面例子中將h2字體大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個(gè)冒號(hào)“:”分開，以一個(gè)分號(hào)“;”結(jié)束，最后別忘記用一對(duì)大括號(hào)“{}”括起來(lái)。
我們也可以為一個(gè)選擇器同時(shí)定義多個(gè)樣式，樣式之間用分號(hào)“;”隔開。也可以同時(shí)為幾個(gè)標(biāo)簽同時(shí)定義一組樣式，標(biāo)簽之間用逗號(hào)“,”隔開。也許這兩句話比較繞嘴，不過(guò)事實(shí)上上面例子的第二行代碼就用到了CSS的這個(gè)特性。語(yǔ)句“h3,h5 {font-size: 12px; display:inline;} ”同時(shí)為h3和,h5兩個(gè)標(biāo)簽定義了兩個(gè)樣式。當(dāng)然了，為了使你的CSS代碼更容易閱讀和維護(hù)，你可以分行書寫這些屬性：
代碼如下:
h3,h5 {
font-size: 12px;
display:inline;
}
注意1：現(xiàn)在講解上面代碼的最后一行，在
中，我們沒(méi)有看到選擇器，這是因?yàn)椴迦隒SS的位置不同，它將直接作用與當(dāng)前標(biāo)簽之內(nèi)的元素。關(guān)于CSS不同的插入方式將在隨后的教程中討論。
注意2：CSS的書寫方式請(qǐng)大家根據(jù)自己的喜好決定，不過(guò)最終的目的都很明確，提高維護(hù)CSS代碼的效率。
CSS注釋
我們以一個(gè)例子介紹在CSS中插入注釋的方法：
代碼如下:
在CSS中，注釋以“/*”開始，以“*/”結(jié)束，注釋里面的內(nèi)容對(duì)于瀏覽器來(lái)說(shuō)是沒(méi)有意義的。
到此，相信大家對(duì)“如何理解css中樣式表的基本語(yǔ)法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)頁(yè)題目：如何理解css中樣式表的基本語(yǔ)法
網(wǎng)頁(yè)地址：http://fisionsoft.com.cn/article/pgiggj.html
