【DAY05】CSS(2)

2023 iThome 鐵人賽

DAY 5

Modern Web

30天全端：關於網站實作的聊聊系列第 5 篇

15th鐵人賽 css教學

Bonnie1226

團隊消波塊上的海洋貓貓

2023-09-20 14:33:00

217 瀏覽

分享至

上回提到如何與CSS語法，感受到有很多強大的美化功能～

但其實光有CSS是不夠的，還要和HTML合作才能真正地用出來！

那如何與HTML合作呢？有三種常用的方法

inline CSS : 在HTML標籤中，使用style屬性，直接加入CSS
- 直接寫，但很亂且不好管理
internal CSS : 在HTML檔案的<head>中加入<style>標籤來編寫CSS
external CSS : 將CSS寫在另一個檔案，藉由link標籤引入CSS文檔
- 網頁開發主要寫法
- 分門別類放會更加清楚，要更改時可以只要查看CSS檔即可，不用到每個HTML檔更改

了解這三種方式後，接下來分別詳細一點介紹

inline CSS

實作方式(在html檔)

<p style = "color:red;  
      background-color:blue;
		  font-size:18pt;">要顯示的字</p>

internal CSS

實作方式(在html檔) →所有有用此標籤(此例為p)的效果會一起更改：（

<head>
  <style>
    p{
      color:red;  
      background-color:blue;
		  font-size:18pt;
    }
  </style>
</head>
<body>

external CSS

實作方式

在CSS檔(此例為style.css): 定義屬性

<div class = "style">div.style{
  background-color:blue;
  font-size:18pt;
}

在html檔 : 加上屬性

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class = "style">
</body>