【網頁入門】03 .CSS標籤與規則

 

●撰寫CSS：

在前一篇 【網頁入門】02 .認識HTML、導入CSS 文章中，完成HTML連結CSS檔案的步驟後，可以開始撰寫CSS。

CSS的撰寫方式，是對應HTML內的標籤套入樣式。

首先指定標籤，將樣式寫在{}中間，並在每條樣式設定間用 ; (分號)作為結尾，例如：

body{
font-family:Verdana,微軟正黑體;
background-color: #fff;
width: 1200px;
height:100%;
}

意即：

頁面｛
字體：Verdana,微軟正黑體;
背景顏色： #fff;
寬：1200px;
高:100%;
｝

注意每項設定後一定要有分號結尾！

●權限與規則

和HTML一樣， #代表物件的ID ，. 代表物件的Class，沒有ID和Class的一般標籤直接指定即可。另外， *代表所有物件，因為抓取所有物件會消耗許多效能，載入速度會變慢，沒事盡量不要單獨使用*符號。

如果HTML文件內有
<div id="demo_1" class="top_area">
    <p class="text"> <a href="">LINK</a> </p>
    <pclass="text"><a href="">LINK2</a></p>
    <p><a href="">LINK3</a></p>
  <img src="" alt="">
</div>

的區塊，該區塊對應的樣式在CSS文件內就會寫成：

.top_area{
/*放入樣式標籤*/
}

或是

#demo_1{
/*放入樣式標籤*/
}

使用ID和Class的差異是權重不同，雖然CSS是由上到下讀取，下面寫的會蓋掉上面的內容，但如果權重不足就無法覆蓋，一般的標籤權重為1，Class是10，ID是100。

（更多權重了解，可參考這篇 小事之css權重 ，介紹得清楚明瞭！）

以上面的範例來說，如果.top_area{} 和 #demo_1{} 同時出現並分別設定不同的寬高或任何重複的屬性內容，那不論先後，瀏覽器會顯示 #demo_1{} 的設定，因為ID的權重較大，會覆蓋掉重複且權重較小的設定。


●CSS選取器

前面舉例了如何選取特定的div區塊，和區分CSS內id和class的應用時機，div區塊內通常會包含許多小標籤，或許多層的結構，如何指定到想要的標籤區塊，就需要了解CSS的選取規則。

CSS裡的選取規則，可參閱 30個你必須記住的CSS選擇器 這篇文章，或可以參閱 Ｗ3CSchool 官方網站練習。（點選右上角的地球圖示可選擇語言）

試著練習描述這些權重、指定物件的不同：

div *   >>>>>>權重: 1+0 = 1
div p>a { /*放入樣式標籤*/} >>>>>>權重: 1+1+1=3
.top_area p + a { /*放入樣式標籤*/} >>>>>>權重: 10+1+1=12
#demo_1 .top_area  a {/*放入樣式標籤*/} >>>>>>權重: 100+10+1=111
.top_area .text + a {/*放入樣式標籤*/} >>>>>>權重: 10+10+1=21

●常用樣式標籤

認識下面的常見標籤，嘗試自行修改、增加或撰寫CSS內容。

[字型]  font-family: arial,Verdana,微軟正黑體; (依序讀取，若使用者電腦無字型則會顯示為預設字體)

[字體大小]   font-size: 12pt (或使用px/em/rem/vw/vh 為單位) 參見【網頁入門】05.區塊元素與行內元素、常見單位應用

[寬] width: px/vw/vh; (區塊或圖片)

[高] height: px/vw/vh; (區塊或圖片)

[極限寬值/極限高值] max-width:; / max-height: ;

[最小寬值/最小高值] min-width:; / min-height: ;

[內間距]  padding: px/vw/vh/em/rem;

[外間距]  margin: px/vw/vh/em/rem;

[顯示設定：區塊元素/行內元素/行內區塊/彈性盒/網格] display: block,inline,inline-block,flex,grid/none (隱藏);
實際應用參見:【網頁設計入門】06 .Float、flex與grid切版
[溢出設定] overflow: hidden /scroll/visible/inherit ; 參見: overflow屬性用法讓你掌握控制捲軸效果

[底色]  background-image: #FFFFF;

[文字顏色] color: #CCC;

[邊框：粗細 類型 顏色 透明度］border: 1px solid(dotted/dashed)  red或rgba(/指定數值以逗點隔開/) 或 rgb(/數值以逗點隔開/) 或hsl() hsla() .6(透明度，不透明值為1，或略過不寫);
[外框線] outline: 同border寫法; （範例： outline: 1px dotted #66666 .8 ; ）

[圓角] border-radius: px;

[文字對齊］taxt-align: left/center/right ;

[字距］letter-spacing: 3px ;

[行距］line-height: 1.6;

※當行距與容器同高時，文字上下置中對齊。
[文字粗細］font-weight: 300 / normal / bold ;

更多HTML及CSS標籤應用可參閱 W3Schools ，多利用官方網站內的練習可以快速增加認識的樣式和編寫的熟悉度。