CSS

為什麼要使用CSS？ CSS用於定義網頁的樣式，包括針對不同設備和屏幕尺寸的顯示設計，佈局和變體。 CSS語法例子在此示例中，所有<p>元素都將居中對齊，並帶有紅色文本顏色：

p {
  color: red;
  text-align: center;

p 是CSS中的選擇器（它指向要設置樣式的HTML元素：<p>）。 color是一個屬性，並且red是屬性值 text-align是一個屬性，並且center是屬性值

CSS選擇器

CSS選擇器用於“查找”（或選擇）要設置樣式的HTML元素。

我們可以將CSS選擇器分為五類：

簡單選擇器（根據名稱，ID，類選擇元素）
組合器選擇器（根據它們之間的特定關係選擇元素）
偽類選擇器（根據特定狀態選擇元素）
偽元素選擇器（選擇元素的一部分並設置其樣式）
屬性選擇器（基於屬性或屬性值選擇元素）

CSS元素選擇器

元素選擇器根據元素名稱選擇HTML元素。

CSS ID選擇器

id選擇器使用HTML元素的id屬性來選擇特定元素。

元素的ID在頁面中是唯一的，因此ID選擇器用於選擇一個唯一的元素！

要選擇具有特定ID的元素，請寫一個井號（＃），後跟該元素的ID。

以下CSS規則將應用於id =“ para1”的HTML元素： 
#para1 {
  text-align: center;
  color: red;
}

注意： ID名稱不能以數字開頭！

CSS類選擇器

類選擇器選擇具有特定類屬性的HTML元素。要選擇具有特定類的元素，請寫一個句點（。）字符，後跟類名。

在此示例中，所有帶有class =“ center”的HTML元素將為紅色且居中對齊：

.center {
  text-align: center;
  color: red;
}

CSS通用選擇器

通用選擇器（*）選擇頁面上的所有HTML元素。

以下CSS規則將影響頁面上的每個HTML元素： 

* {
  text-align: center;
  color: blue;
}

插入CSS的三種方法

有三種插入樣式表的方法：

外部CSS
內部CSS
內聯CSS
外部CSS

使用外部樣式表，只需更改一個文件即可更改整個網站的外觀！

每個HTML頁面的頭部必須在元素內包含對外部樣式表文件的引用。

例子外部樣式是在HTML頁面的

部分內的元素內定義的：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

外部樣式表可以在任何文本編輯器中編寫，並且必須以.css擴展名保存。

外部.css文件不應包含任何HTML標記。 注意：請勿在屬性值和單位之間添加空格（例如margin-left: 20 px;）。正確的方法是：margin-left: 20px;

內部CSS

如果一個HTML頁面具有唯一樣式，則可以使用內部樣式表。內部樣式在<style>元素的頭部部分內定義。

內聯CSS

內聯樣式可用於為單個元素應用唯一樣式。要使用內聯樣式，請將style屬性添加到相關元素。樣式屬性可以包含任何CSS屬性。例子內聯樣式是在相關元素的“樣式”屬性中定義的：

<!DOCTYPE html>
<html>
<body>
 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

提示：內聯樣式失去了樣式表的許多優點（通過將內容與表示混合在一起）。謹慎使用此方法。

CSS註釋

註釋用於解釋代碼，以後在您編輯源代碼時可能會有所幫助。

瀏覽器將忽略註釋 CSS註釋放置在<style>元素內，以開頭/和結尾/

css顏色

CSS顏色

CSS背景色

該background-color屬性指定元素的背景色。

CSS背景圖片

該background-image屬性指定要用作元素背景的圖像。默認情況下，將重複圖像，以使其覆蓋整個元素。

CSS邊框樣式

該border-style屬性指定要顯示的邊框類型。

允許以下值：

dotted -定義虛線邊框
dashed -定義虛線邊框
solid -定義實線邊框
double -定義一個雙邊框
groove-定義3D溝槽邊框。效果取決於邊框顏色值
ridge-定義3D棱形邊框。效果取決於邊框顏色值
inset-定義3D嵌入邊框。效果取決於邊框顏色值
outset-定義3D起始邊框。效果取決於邊框顏色值
none -沒有邊界
hidden -定義一個隱藏的邊框
該border-style屬性可以具有一到四個值（用於頂部邊框，右側邊框，底部邊框和左側邊框）。

CSS邊距

CSSmargin屬性用於在任何定義的邊界之外的元素周圍創建空間。

使用CSS，您可以完全控制邊距。有一些屬性可以為元素的每一側（上，右，下和左）設置邊距。

CSS具有用於為元素的每一側指定邊距的屬性：

margin-top
margin-right
margin-bottom
margin-left

所有邊距屬性都可以具有以下值：自動-瀏覽器計算邊距長度-以px，pt，cm等為單位指定邊距。％ -指定包含元素寬度百分比的邊距繼承-指定應從父元素繼承邊距允許使用負值。

CSS填充

CSSpadding屬性用於在任何定義的邊界內在元素內容周圍生成空間。

使用CSS，您可以完全控制填充。有一些屬性可以為元素的每一側（頂部，右側，底部和左側）設置填充。

填充-單面

CSS具有用於為元素的每一側指定填充的屬性：

padding-top
padding-right
padding-bottom
padding-left

所有填充屬性都可以具有以下值：

長度-以px，pt，cm等指定填充。
％ -指定包含元素寬度的百分比的填充
繼承-指定填充應從父元素繼承
注意：不允許使用負值。

CSS設置高度和寬度

height和width特性被用來設置一個元件的高度和寬度。

height和width屬性不包括填充，邊框或邊距。它設置元素的內邊距，邊框和邊距內區域的高度/寬度。

CSS高度和寬度值

該height和width屬性可能具有以下值：

auto-這是默認設置。瀏覽器計算高度和寬度
length -以px，cm等為單位定義高度/寬度。
% -定義包含塊的百分比的高度/寬度
initial -將高度/寬度設置為其默認值
inherit -高度/寬度將從其父值繼承

CSS大綱

輪廓線是在元素周圍繪製的一條線，超出邊框，以使元素“突出”。

CSS具有以下大綱屬性：

outline-style
outline-color
outline-width
outline-offset
outline

注意：輪廓與邊框不同！與邊框不同，輪廓繪製在元素邊框的外部，並且可能與其他內容重疊。同樣，輪廓線也不是元素尺寸的一部分；元素的總寬度和高度不受輪廓線寬度的影響。

CSS輪廓樣式

該outline-style屬性指定輪廓的樣式，並且可以具有下值之一：
dotted -定義虛線輪廓
dashed -定義虛線輪廓
solid -定義了堅實的輪廓
double -定義雙重輪廓
groove -定義3D溝槽輪廓
ridge -定義3D脊形輪廓
inset -定義3D插入輪廓
outset -定義3D起始輪廓
none -沒有輪廓
hidden -定義一個隱藏的輪廓

文字對齊

該text-align屬性用於設置文本的水平對齊方式。

文字裝飾

該text-decoration屬性用於設置或刪除文本裝飾。該值text-decoration: none;通常用於從鏈接中刪除下劃線

文字轉換

該text-transform屬性用於在文本中指定大寫和小寫字母。它可用於將所有內容轉換為大寫或小寫字母，或將每個單詞的首字母大寫

文字縮進

該text-indent屬性用於指定文本第一行的縮進

文字陰影

該text-shadow屬性為文本添加陰影。最簡單的用法是只指定水平陰影（2px）和垂直陰影（2px）

通用字體家族

在CSS中，有五個通用字體系列：

襯線字體在每個字母的邊緣都有一個較小的筆觸。它們營造出一種形式感和優雅感。
Sans-serif字體線條簡潔（不附加小筆劃）。它們營造出現代而簡約的外觀。
等寬字體-此處所有字母均具有相同的固定寬度。它們產生機械外觀。 
草書字體模仿了人類的筆跡。
幻想字體是裝飾性/俏皮字體。

什麼是網絡安全字體？

Web安全字體是在所有瀏覽器和設備上普遍安裝的字體。

後備字體

但是，沒有100％完全網絡安全的字體。總是有可能找不到字體或未正確安裝字體。因此，始終使用後備字體非常重要。這意味著您應該在font-family 屬性中添加類似的“備份字體”列表。如果第一個字體不起作用，瀏覽器將嘗試下一個，然後嘗試下一個，依此類推。始終以通用字體系列名稱結尾列表。

適用於HTML和CSS的最佳Web安全字體

以下列表是適用於HTML和CSS的最佳Web安全字體：

Arial（無襯線）
Verdana（無襯線）
Helvetica（無襯線）
Tahoma（sans-serif）
Trebuchet MS（無襯線）
時報新羅馬書（serif）
佐治亞州（serif）
加拉蒙德（Serif）
快遞新的（等寬字體）
Brush Script MT（草書）

字體樣式

該font-style屬性主要用於指定斜體文本。此屬性具有三個值：

正常-文本正常顯示
斜體-文字以斜體顯示
斜線-文字為“傾斜”（斜線與斜體非常相似，但支持較少）

例子

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

字型粗細

該font-weight屬性指定字體的粗細

字體變體

該font-variant屬性指定是否以小寫字體顯示文本。

字體大小

該font-size屬性設置文本的大小。

能夠管理文本大小在網頁設計中很重要。但是，您不應使用字體大小調整來使段落看起來像標題，或者標題看起來像段落。

始終使用正確的HTML標記，例如

-

用於標題，而

用於段落。

SS字體屬性

為了縮短代碼，也可以在一個屬性中指定所有單個字體屬性。

該font屬性是以下項的簡寫屬性：

font-style
font-variant
font-weight
font-size/line-height
font-family
注：該font-size和font-family 值是必需的。如果缺少其他值之一，則使用其默認值。

CSS圖標

通過使用圖標庫，可以輕鬆地將圖標添加到HTML頁面。

如何添加圖標

將圖標添加到HTML頁面的最簡單方法是使用圖標庫，例如Font Awesome。將指定的圖標類的名稱添加到任何內聯HTML元素（如或）中。下面的圖標庫中的所有圖標都是可縮放的矢量，可以使用CSS（大小，顏色，陰影等）進行自定義。字體真棒圖標要使用Font Awesome圖標，請訪問 (fontawesome.com)，登錄並在HTML頁面的部分中獲取要添加的代碼：

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

CSS鏈接

四個鏈接狀態為：

a:link -正常的，未訪問的鏈接
a:visited -用戶訪問過的鏈接
a:hover -用戶將鼠標懸停在鏈接上時的鏈接
a:active -點擊後的鏈接

HTML列表和CSS列表屬性

在HTML中，列表主要有兩種類型：

無序列表（

CSS列表屬性使您可以：

為有序列表設置不同的列表項標記
為無序列表設置不同的列表項標記
將圖像設置為列表項標記
向列表和列表項添加背景色

CSS佈局-display屬性

該display屬性是用於控制佈局的最重要的CSS屬性。

顯示屬性

該display屬性指定是否/如何顯示元素。每個HTML元素都有一個默認的顯示值，具體取決於元素的類型。大多數元素的默認顯示值是block或 inline。點擊顯示面板

塊級元素

塊級元素總是從新行開始，並佔據可用的全部寬度（盡可能向左和向右伸展）。 <div>元素是塊級元素。 fontawesome.com 塊級元素的示例：

-

<表格> <標題> <頁腳> <部分> 內聯元素內聯元素不會從新行開始，僅佔用必要的寬度。這是段落中的內聯元素。內聯元素的示例：顯示：無； ``` display: none;通常與JavaScript一起使用，以隱藏和顯示元素，而無需刪除和重新創建它們。如果您想知道如何實現此目標，請看此頁面上的最後一個示例。該<script>元件使用display: none; 的默認值。

CSS佈局-position屬性

該position屬性指定用於元素的定位方法的類型（靜態，相對，固定，絕對或粘性）。

頭寸屬性

該position屬性指定用於元素的定位方法的類型。

有五個不同的位置值：

static
relative
fixed
absolute
sticky

然後使用top，bottom，left和right屬性定位元素。但是，除非position 先設置該屬性，否則這些屬性將不起作用。根據位置值，它們的工作方式也不同。

CSS溢出

該overflow屬性指定在元素的內容太大而無法放入指定區域時是剪輯內容還是添加滾動條。該overflow屬性具有以下值：

visible- 默認。溢出不會被裁剪。內容在元素框外渲染
hidden -溢出被裁剪，其餘內容將不可見
scroll -剪輯了溢出，並添加了滾動條以查看其餘內容
auto-與相似scroll，但僅在必要時添加滾動條
CSSfloat屬性指定元素應如何浮動。
CSSclear屬性指定哪些元素可以在已清除元素旁邊以及在哪一側浮動。

浮動財產

該float屬性用於定位和格式化內容，例如，使圖像向左浮動到容器中的文本。該float屬性可以具有以下值之一：

left -元素浮動到其容器的左側
right -元素浮動在其容器的右側
none-元素不會浮動（將顯示在文本中剛出現的位置）。這是默認值
inherit -元素繼承其父級的float值

在最簡單的用法中，該float屬性可用於在圖像周圍包裹文本。

明確的財產
該clear屬性指定哪些元素可以在清除的元素旁邊以及在哪一側浮動。
該clear屬性可以具有以下值之一：
none-允許兩面都浮動。這是默認值
左側-左側不允許有浮動元素
右側-右側不允許有浮動元素
兩者-左側或右側均不允許使用浮動元素
繼承-元素繼承其父元素的清除值

使用clear 屬性的最常見方法是在float 元素上使用屬性後。清除浮點數時，應將清除點與浮點數匹配：如果某個元素浮在左側，則應清除左側。您的浮動元素將繼續浮動，但清除的元素將顯示在網頁下方。下面的示例將浮點數向左清除。

CSS佈局-顯示：內聯塊

顯示：內聯塊值與相比display: inline，主要區別在於display: inline-block允許在元素上設置寬度和高度。此外，使用時 display: inline-block，將遵守頂部和底部邊距/填充，但display: inline不遵守。與相比display: block，主要區別在於display: inline-block該元素後沒有添加換行符，因此該元素可以位於其他元素旁邊。使用內聯塊創建導航鏈接一種常見的用法display: inline-block 是水平而不是垂直顯示列表項。以下示例創建水平導航鏈接

CSS組合器

組合器可以解釋選擇器之間的關係。

一個CSS選擇器可以包含多個簡單選擇器。在簡單的選擇器之間，我們可以包含一個組合器。

CSS中有四種不同的組合器：

後代選擇器（空格）
子選擇器（>）
相鄰的兄弟選擇器（+）
通用同級選擇器（〜）