【心得】連結CSS的方法

2021 iThome 鐵人賽

DAY 4

自我挑戰組

前進切版之路! CSS微體驗系列第 4 篇

13th鐵人賽

豹告

2021-09-13 14:24:28

2177 瀏覽

分享至

在沒有CSS裝潢以前的HTML看起來....
就是一堆文字擠在一起的毛胚房ಠ౪ಠ

看起來當然不是那麼的好看...
今天就來介紹該怎麼讓CSS文件跟HTML連結~變身成漂亮的樣子吧!

第一種：直接放在elements內--inline-style

<p style="font-size: 20px; color:#f00;">Lorem ipsum dolor sit amet, consectetur, adipisicing elit.</p>

這種方式雖然可以看HTML就知道每一個element樣式，但是設定一多看起來就會有點花俏，若是遇到很多個<p>需要字體大小20xp、紅色時，要一直重複寫這段套到<p>上面

哪天如果要改應該會噴一斗血

第二種：用`<style>`放到HTML內--Internal Style Sheet

這種方式可以寫在同一份HTML裡面
跟第一種方式比較起來會讓HTML乾淨許多~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<!--- CSS樣式 --->
<style>
	p{
		font-size: 20px;
		color:#f00;
	}
</style>
<!-------------->

<body>
	<p>Lorem ipsum dolor sit amet, consectetur, adipisicing elit.?</p>
</body>
</html>

第三種另外建立一份CSS--External Style Sheet

在HTML裡面用<link>連結到CSS檔案

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur, adipisicing elit.?</p>
</body>
</html>

注意連結位址(href="")的部分，如果使用的是相對位址就要從HTML開始出發呦!

而一份HTML可以有多個<link>
比如各家瀏覽器對於標題字體大小、字體粗細、內外距都有不同的設定，為了有統一的視覺效果，重置所有設定的重置CSS是很重要的!

由於HTML的讀取是從上而下
重置使用的CSS要放在自訂的CSS前面，如此自訂的CSS樣式才能蓋過去

<!DOCTYPE html>
<html lang="zh-TW">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>練習</title>
    
        <!-- 重置的CSS -->
        <link rel="stylesheet" href="CSS/reset.css">
        <!-- 自訂的CSS -->
        <link rel="stylesheet" href="CSS/style.css">
</head>