網頁設計 CSS

網頁設計 CSS

星期日, 3月 18, 2018 0 留言 A+ a-


CSS（全名：Cascading Style Sheets，中文：層疊樣式表）

是用來描述 HTML 或 XML（包含SVG 或XHTML 等各種XML 變形）文件外觀的樣式表語言。

CSS Selector（CSS 選擇器、選取器）

有三個類型：標籤、類別、ID。
  1. 標籤（tag）
  2. 類別（class）→ .aa .bb .cd（類別可以重複使用）
  3. ID（id）→ #dd #ee #fg（ID 不可以重複使用）

HTML 與 CSS 寫法上的差異

HTML

 <標籤 屬性="值" 屬性="值"......>......</標籤>

舉例：<table> 是表格標籤，
width 是屬性代表表格寬度，後面寬度值 600，
border 是屬性代表框線，後面的1是框線的粗細值，</table> 是表格標籤的結束。
<table width="600" border="1"></table>

CSS

在 CSS 中 ; 表示結束。所有的 Selector 一定要放在 style 裡面。
剛開始如果不知道怎麼用 CSS ，就照著下面說的：「如果標籤可以解決問題，就先用標籤解決。」
因為類別可以重複使用，所以可以套在會重複用到的地方。如果只有一個地方要用，就使用 ID 。

 Selector{
屬性:值;
屬性:值;
......
}

下面舉例是在標題上面全部套好一個顏色，
在指定（下方有表格的）幾個標題想要更改另一個顏色，
最後又有另一個標題（有項目清單的）想再給它不同顏色。
以上情況剛好可以說明 CSS Selector 三個類型的用法。

  • 標籤（tag）

在 h3 的標籤，套上16進位 39f 的顏色。
<style type="text/css">
h3{
  color:#39f;
}
</style>

  • 類別（class）
在 h301 的標籤，套上16進位 6c6 的顏色。
<style type="text/css">
.h301{
  color:#6c6;
}
</style>

用類別要再到選定的 h3 下指令，不然只寫了上面的也不會有反應。
<h3 class="h301">......</h3>

  • ID（id）
在 h302 的標籤，套上16進位 f00 的顏色。
<style type="text/css">
#h302{
  color:#f00;
}
</style>

ID 同樣的要再到選定的 h3 下指令，不然也不會有反應。
<h3 id="h302">......</h3>
中澤

訂閱： 張貼留言 (Atom)