溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“如何理解css中樣式表的基本語法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解css中樣式表的基本語法”吧!
插入樣式表前后的網頁。
為了更好地理解樣式表的作用，我們先看一個CSS的應用實例。在本例子中，你很容易對比出使用CSS前后兩個網頁的區別，當然了，現在你可能讀不懂CSS部分的代碼。別擔心，這些代碼將在少后的教程中介紹。
我們首先來看一下未加入CSS的頁面。網頁里只有一段話：“菜鳥吧的站長是大傻瓜！傻瓜愛吃大西瓜！”。而且由于分別是標題1、2、3、4，頁面內字體大小也不相同，還有標題的自動換行。
它的源代碼如下：
代碼如下:
<!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>我真慘!被用來演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<!--這里將要插入CSS -->
</head>
<body>
<h2><a href="<a href="http://www.neiyidaogou.com/">http://www.neiyidaogou.com/</a>">億速云</a></h2>
<h3>的站長</h3>
<h4>是大傻瓜！傻瓜</h4><!--我就要被修該啦，郁悶 -->
<h5>愛吃大西瓜！</h5>
</body>
</html>
下面我們簡單的為它加上一點CSS，來讓我不再傻……按如下提示修改網頁的代碼：
代碼如下:
<!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>我真慘!被用來演示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://www.neiyidaogou.com/">http://www.neiyidaogou.com/</a>">億速云</a></h2>
<h3>的站長</h3>
<h4 >是大傻瓜！傻瓜</h4>
<h5>愛吃大西瓜！</h5>
</body>
</html>
讓我們來看看加入CSS之后的網頁。你很容易看出兩個網頁的差別，頁面內的文字大小統一了，而且只有標題1后面有一個換行，甚至有一部分文字被隱藏了起來。這都要歸功于上面紅色部分的代碼。它們就是CSS，下面就讓我們大概了解一下這些代碼的意義。
CSS語法簡介
加在head部分的<style type="text/css">和</style>分別被瀏覽器識別為CSS的開始和結束。而注釋標簽<!-- -->則是避免不支持CSS的瀏覽器將CSS內容作為網頁正文顯示在頁面上。
上面的內容并沒有定義任何樣式，它的任務只是告訴瀏覽器CSS代碼的位置。下面的內容是重點，正是下面這一部分的內容使得頁面的外觀發生了明顯的變化，它也就是CSS的描述部分(定義部分)：
代碼如下:
h2 {font-size: 12px;}
h3,h5 {font-size: 12px; display:inline;}
……
<h4 >是大傻瓜！傻瓜</h4>
通常情況下，CSS的描述部分是由三部分組成的，分別是選擇器、屬性和屬性值。寫法如下：
選擇器 { 屬性: 屬性值; }
例如：
代碼如下:
h2 {font-size: 12px;}
本例中選擇器也就是你想要描述的HTML標簽，其它選擇器將在后面的教程中講解。上面例子的選擇器就是h2標簽。屬性和屬性值則是說明你想要描述h2的哪一個屬性，該屬性的值為多少，例如上面例子中將h2字體大小屬性為12像素，寫成font-size: 12px。屬性和屬性值之間用一個冒號“:”分開，以一個分號“;”結束，最后別忘記用一對大括號“{}”括起來。
我們也可以為一個選擇器同時定義多個樣式，樣式之間用分號“;”隔開。也可以同時為幾個標簽同時定義一組樣式，標簽之間用逗號“,”隔開。也許這兩句話比較繞嘴，不過事實上上面例子的第二行代碼就用到了CSS的這個特性。語句“h3,h5 {font-size: 12px; display:inline;} ”同時為h3和,h5兩個標簽定義了兩個樣式。當然了，為了使你的CSS代碼更容易閱讀和維護，你可以分行書寫這些屬性：
代碼如下:
h3,h5 {
font-size: 12px;
display:inline;
}
注意1：現在講解上面代碼的最后一行，在<h4 style="display:none">中，我們沒有看到選擇器，這是因為插入CSS的位置不同，它將直接作用與當前標簽之內的元素。關于CSS不同的插入方式將在隨后的教程中討論。
注意2：CSS的書寫方式請大家根據自己的喜好決定，不過最終的目的都很明確，提高維護CSS代碼的效率。
CSS注釋
我們以一個例子介紹在CSS中插入注釋的方法：
代碼如下:
<style type="text/css">
<!--
h2 {font-size: 12px;}
/* 把標題的大小都定義為12個像素 */
h3,h5 {font-size: 12px; display:inline;}
-->
</style>
在CSS中，注釋以“/*”開始，以“*/”結束，注釋里面的內容對于瀏覽器來說是沒有意義的。
到此，相信大家對“如何理解css中樣式表的基本語法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
