網頁

2019/7/22

CSS 內部樣式表(Internal style sheet) 在HTML文件的<style>設定CSS

CSS樣式可直接在HTML文件的<style>...</style>標籤內進行設定,又稱為內部樣式表(Internal style sheet)

請先參考CSS 行內樣式(Inline styles) 在HTML元素的style屬性設定CSS


CSS是與HTML搭配使用的,所以需要建立一份HTML文件welcome.html。請參考在Visual Studio Code建立第一個HTML文件

welcome.html建立好後將內容修改如下。

welcome.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <h1>您好,歡迎光臨</h1> 
  
  <p>普通段落文字</p> 

</body>
</html>

在瀏覽器開啟畫面如下。



到這裡為止HTML文件中的任何元素並未施加任何CSS設定。接下來會針對<p>標籤來套用CSS。


<head>...</head>間加入<style>標籤如下。

welcome.html

<!DOCTYPE html>
<html>
<head>

  <style><!-- style元素 -->
  </style>

</head>
<body>

  <h1>您好,歡迎光臨</h1> 
  
  <p>普通段落文字</p> 

</body>
</html>

CSS內部樣式表就是把CSS設定在<style>...</style>內。
<style>標籤習慣放在<head>...</head>中。

與CSS行內樣式的差別是,內部樣式表必須定義CSS樣式要套用在哪個HTML元素上,而「CSS選擇器(CSS selectors)」即用來選取要套用的HTML元素對象。



例如下面用CSS元素選擇器(Type selector)把元素<p>的文字顏色(color)改為藍色,背景顏色(background-color)改為黃色。

welcome.html

<!DOCTYPE html>
<html>
<head>

  <style> 
    p {
      color:blue;
      background-color: yellow;
    }
  </style>

</head>
<body>

  <h1>您好,歡迎光臨</h1>
  
  <p>普通段落文字</p>

</body>
</html>

上例中CSS內部樣式表設定開頭的p即為元素選擇器,選擇的對象為<p>元素,然後將要修改的CSS屬性放在選擇器後的大括弧{ ... }中。

在瀏覽器開啟畫面如下。



除了元素選擇器外,還有很多種其他選擇器,請參考CSS selectors


接著新增以下CSS設定來修改<h1>的樣式,把文字顏色變成紅色。

welcome.html

<!DOCTYPE html>
<html>
<head>

  <style>
    h1 {
      color:red;
    }
    p {
      color:blue;
      background-color: yellow;
    }
  </style>

</head>
<body>

  <h1>您好,歡迎光臨</h1>
  
  <p>普通段落文字</p>

</body>
</html>

同樣地,h1為元素選擇器,選擇的對象為<h1>元素。

在瀏覽器開啟畫面如下。



以上即為使用CSS內部樣式表(Internal style sheet) 來改變HTML元素的樣式。


參考:

沒有留言:

張貼留言