樣式表創建

創建樣式表的目的是為了修改標籤的樣式。

css（cascading style sheets）層疊樣式表，主要是為了修改網頁信息的顯示樣式。

css語法：

選擇器名稱{

	屬性1：屬性值1；

	屬性2：屬性值2

	.........

}

樣式表的創建分為行內樣式、內部樣式和外部樣式。

1、行內樣式

行內樣式表：在標籤上添加style屬性，只作用於當前標籤，不常用，一般用在出錯調試用。

語法：<標籤名稱 style=“屬性:屬性值;”></標籤名稱>

<body>
  <h1 style="color:red;">靜夜思</h1>
  <p>牀前明月光</p>
  <p>疑是地上霜</p>
  <p>舉頭望明月</p>
  <p>低頭思故鄉</p>
</body>

網頁效果為：

使用csstable製作組織樹_css

2、內部樣式

內部樣式表在<head></head>之間，之作用於當前文件，一般用於專題或者活動頁面。

語法：標籤名稱{屬性：屬性值；}

<head>
  <style>
    p{
      color:red;
      /*背景顏色*/
      background-color:pink;
    }
  </style>
</head>
<body>
  <h1>靜夜思</h1>
  <p>牀前明月光</p>
  <p>疑是地上霜</p>
  <p>舉頭望明月</p>
  <p>低頭思故鄉</p>
</body>

網頁效果為：

使用csstable製作組織樹_使用csstable製作組織樹_02

3、外部樣式

外部樣式表需要新建一個css文件，利用link或者import引入css文件。

1.在<head>

	<link rel="stylesheet"href="路徑" />

</head>

2.寫在<style>

	@import url(路徑);

</style>

注意：

在style裏，標籤千萬不要加<屬性值千萬不要加雙引號。

下面示例代碼為css文件。
p{
  color:blue;
}

下面示例代碼為html文件。

<head>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <h1>靜夜思</h1>
  <p>牀前明月光</p>
  <p>疑是地上霜</p>
  <p>舉頭望明月</p>
  <p>低頭思故鄉</p>
</body>

網頁效果為：

使用csstable製作組織樹_CSS_03

4、link和import之間的區別？

差別1：老祖宗的差別：link屬於XHTML標籤，而@import完全是CSS提供的一種方式。 link標籤除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS。

差別2：加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式。

差別3：兼容性的差別。：@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只在IE5以上的才能識別，而link標籤無此問題。

差別4：使用dom控制樣式時的差別：當使用javascript控制dom去改變樣式的時候，只能使用link標籤，因為@import不是dom可以控制的.