標籤選擇器

標籤選擇器 {
屬性: 設定值;
屬性: 設定值;
}

例如以下

h1 {
  color: blue;
  font-size: 50px;
}

CSS 除錯分析

  1. 檔案路徑是否正確
  2. 單字有沒有拼錯
  3. 格式是否正確
  4. 在 Chrome 瀏覽器頁面按右鍵»檢查 說明文字 如果 CSS code 當中有寫錯導致無法辨識，在 Element 元素就會出現畫線的錯誤顯示 如下: 說明文字

擬態選擇器 hover

除了標籤選擇器以外還可以使用擬態選擇器，使用情境：
a 標籤文字設定成黑色，但希望當滑鼠滑過去時文字可以變成紅色

這樣可以寫成這樣

a {
  color: black;
}
a:hover {
  color: red;
}

/*讓滑鼠按下時變成blue的話可以用active*/
a:active {
  color: red;
}

類別選擇器

如果有好幾個 P 段落，但其中某一個段落想要使用客製化 CSS file

INDEX.HTML 設定如下

<p>段落一</p>
<p>段落二</p>
<p class="style1">段落三</p>
<p>段落四</p>

STYLE.CSS 增加如下 code

.style1 {
  color: red;
}

class 屬性也同樣可以應用在 a 或是 li 上面

<a href="#" class="style1">連結</a>
<li class="style1">li1</li>

重點 ：類別選擇器在 CSS 檔案中一定要加".“在自訂樣式名前方，否則會無法辨識

CSS 優化文字排版

p {
  font-family: verdana; /*字型*/
  font-size: 18px; /*字型大小*/
  line-height: 1.5; /*行距: 文字大小的倍數, 也可以寫成px*/
  text-align: left; /*文字靠左, 預設不寫也是靠左*/
  text-indent: 32px; /*字首空格*/
  text-decoration: underline; /*畫線*/
  text-decoration: line-through; /*畫刪除線*/
  letter-spacing: 5px; /*字和字之間的距離*/
}

HTML 標籤加入線條

樣式順序: 線條粗細/ 線條樣式/ 顏色

h1 {
  border: 1px solid blue;
}

比較常見的線條樣式有:
實心線條: solid
間隔虛線: dashed
原點虛線: dotted

如果想要不同方向的線條 CSS

h1 {
  border-left: 1px solid blue; /*線條出現在左邊*/
  border-bottom: 1px solid blue; /*線條出現在下方*/
  border-right: 1px solid blue; /*線條出現在右方*/
  border-top: 1px solid blue; /*線條出現在上方*/
}

CSS 權重

class

如果以下這樣寫的話，下方的 box 會取代上方的 p，因為命名 Class 的權重比較高

p {
  color: red;
}
.box {
  color: blue;
}
.box2 {
  color: yellow;
}

重複 css

如果沒有命名 class，單純是 CSS 有相同段落，則後面 blue 會取代前面的 CSS red

p {
  color: red;
}
p {
  color: blue;
}

class+class

一個 class 的權重是 10 分，如果 class 內還有 class 就是 10+10 分
例如

.header .menu li {
  color: blue;
}

id

如果用 id 來指定的話，權重是 100 分
id 和 class 的差異是 id 在網頁上只會有一個，但 class 可以重複出現很多個

<p id="footer">123</p>

#footer {
  color: blue;
}

HTML 內 CSS

如果直接把 CSS 寫在 HTML 則是 1000 分
例如

<p style="color:red">123</p>

important

如果無論如何想要蓋掉別人寫的 CSS，例如 class 要蓋掉 id
可以在 code 後面加!important
!important->1000000 分

.important {
  color: blue !important;
}



Buy me a croissant