【HTML】2初探CSS-2.3 認識CSS-引入字型、使用權、選擇器、字級

*2 初探CSS
➤2.3 認識CSS-引入字型、使用權、選擇器、字級

HI各位棧友們好，接觸CSS(Cascading Style Sheets)時，首先需了解其功能主要在於讓您可以直接在網頁上套上自己想要的版型、樣式~~(可以想像HTML是個女人，CSS是化妝品)~~，換言之就是透過CSS選擇器(類別、id選擇器)底下的屬性和屬性值，來更改排版、內距、外距、色調等，雖說boostrape4的類別已經可以直接在標籤內達到調整外距、內距、文字色調等。第三方框架其實還有很多種如.tailwindcss、PURE、materialize、 Zurb Foundation等都可以去參考一下。
至於boostrape本身就已帶有normal.css所以您可以不必再去載入reset.css或是normal.css。

1.透過google fonts更改字型

(1)首先先去google fonts下載自己想要的文字類型。下圖中點選打勾處紅圈白十字的icon來選取自己要的字型。

(2)點選後右下角會出現2 Families Selected 請把它點開。

(3)點開後可以選取STANDARD和@IMPORT這兩個方式效果相同。
其差別在於<link>是html專用的標籤，而非有效的樣式指令，<link>功能在於引入CSS，在樣式表中是無法使用link標籤的。

#.此時加到頁面後，字型就會變更囉

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    @import url('https://fonts.googleapis.com/css?family=Chilanka|Noto+Sans+TC&display=swap');
      h1 { font-family: 'Noto Sans TC', sans-serif; }
      h2 { font-family: 'Chilanka', cursive; }
  </style>
  <title>CSS初探2_3</title>
</head>
<body>
<h1>Hello World</h1>
<h2>World Map</h2>
</body>
</html>

(4)補充一下:
不論是用<link>或@IMPORT拉入樣式表，外部的css是不能放上<style></style>標籤的。另外若是您想要在行內標籤設定css也是可行(如下):
<div style='color:blue;'>Hello World</div>

2.CSS的使用權順序

我們常常會看到有使用行內標籤設定、style標籤、link標籤、@IMPORT指令。
而其順序於CSS樣式優先權是 : 行內 > style > link > import
通常不建議採取放在<style></style>內，因為實際上架後對於SEO較為不佳。
*行內標籤
<div style='color:blue;'>Hello World</div>
*style標籤
<style> h1{color:'blue';} </style>
*link標籤
<link rel="stylesheet" href="./test.css">
*import指令
<style> @import url("./test.css"); </style>

3.選擇器介紹

CSS規則裡，有許多不同類型的選擇器(Selector)，萬用選擇器、類別選擇器、ID選擇器、屬性選擇器、子選擇器、後代選擇器、偽類選擇器、類型選擇器。
(PS.這邊內容頗多........我之後會慢慢補充👀)

4.網頁字級、大小

字級單位以往常看的px(pixel)，主要為像素尺寸，當我們在chrome瀏覽器按下F12來檢視各載具尺寸的呈現其實也都是以px為基準。而現行boostrap4所採用字級的rem則是1rem=16px。
*絕對數值
pt: 點
一點相當於1/72英吋(1pt約略是1.33px)。適用於印刷品也適用於螢幕呈現。
px: 像素
像素大小會依使用者的螢幕寬高和像素深度而有變化。因此其適用於螢幕呈現，而不適用於印刷上。早期的網頁很常以1024*768呈現。
又如拍片常用的Full HD則是1920*1080，4K則是3840*2160，怎麼會扯到影片?那是因為html5可以<video>標籤崁入mp4檔案，您可以自己透過AE軟體設計約略10-20秒的短動畫當整個背景形象，會更有視覺感。

*相對數值
em:
其文字大小會隨著父階層的大小而受影響(亦即最外層我用1.6em而內層是1em，內層是會被變更為1.6em的)。
rem:
和em的差別在文字基準取決決最外層的html文字大小。適用在RWD型的網站，不管父階層的大小為何，都不會影響內層的文字大小。
vw:
瀏覽器依據寬度百分比來做調整，若寬度用30vw，則表示占用畫面寬度30%。
vh:
瀏覽器依據高度百分比來做調整，若高度用30vh，則表示占用畫面高度30%。