目錄
CSS
CSS概念
核心概念
為什么需要CSS
語法
?CSS的引入方式
內聯樣式（行內樣式）
內部樣式
外部樣式（推薦）
CSS
CSS概念
CSS（Cascading Style Sheets）層疊樣式表，又叫級聯樣式表，簡稱樣式表
CSS文件后綴名為.css
CSS用于HTML文檔中元素樣式的定義
核心概念
-
選擇器（Selectors）： 選擇器是用來選擇要應用樣式的HTML元素的模式。它可以基于元素名稱、類、ID、屬性等來匹配元素。選擇器指定了哪些元素將被樣式化。
-
屬性（Properties）： 屬性是用來定義元素樣式的關鍵字，如顏色、字體大小、邊框等。每個屬性對應一個或多個值，用于設置樣式的具體細節。
-
值（Values）： 值是屬性的具體設置，例如
color屬性的值可以是 "red"、"#00ff00"（顏色代碼）等。不同的屬性接受不同類型的值。 -
樣式規則（Rules）： 樣式規則由選擇器和一組屬性-值對組成，用于指定哪些元素應用什么樣式。例如：
p {color: blue;font-size: 16px; } -
樣式表（Stylesheets）： 樣式表是包含一系列樣式規則的文件。它可以內聯寫在HTML文檔中，也可以作為外部文件鏈接到HTML中。
-
層疊性（Cascading）： 當多個樣式規則應用在同一個元素上時，層疊性決定了哪些規則會被優先采用。層疊性遵循特定的優先級和繼承規則，從而確保樣式的有效應用。
-
盒模型（Box Model）： 盒模型是一種描述元素尺寸和布局的概念。每個元素被視為一個矩形盒子，由內容、內邊距、邊框和外邊距組成。
-
響應式設計（Responsive Design）： CSS可以用于創建響應式的網頁，使頁面能夠在不同設備和屏幕尺寸下呈現出最佳的外觀和布局。
-
偽類和偽元素（Pseudo-classes & Pseudo-elements）： 偽類和偽元素允許你選擇特定狀態下的元素或向特定元素的某些部分應用樣式，例如
:hover表示鼠標懸停狀態。 -
優先級（Specificity）： 當多個選擇器應用在同一元素上時，優先級規則決定了哪個選擇器的樣式會被應用。
-
為什么需要CSS
使用css的唯一目的就是讓網頁具有美觀一致的頁面
-
樣式控制： CSS允許你對網頁的外觀和樣式進行精確的控制。你可以設置文字顏色、字體、背景、邊框等，以創造獨特的視覺效果。
-
分離內容和樣式： 使用CSS可以將網頁的內容和樣式分離，使代碼更加結構化和可維護。這種分離使得你可以單獨修改樣式，而無需改變HTML結構。
-
跨瀏覽器兼容性： 不同的瀏覽器可能在默認樣式上有所不同。使用CSS可以確保你的網頁在不同瀏覽器上都能保持一致的外觀。
-
可重用性： 通過將樣式定義在CSS文件中，你可以在網站的不同頁面上重復使用相同的樣式，從而減少重復勞動并提高效率。
-
響應式設計： CSS可以用于創建響應式的網頁，使得網頁能夠在不同的設備和屏幕尺寸下自適應，提供更好的用戶體驗。
-
頁面布局： 使用CSS可以控制元素的位置和布局。你可以實現多列布局、居中對齊等，使網頁看起來更加整潔和專業。
-
動畫和過渡： CSS支持動畫和過渡效果，可以為元素添加平滑的過渡和動畫效果，從而增加交互性和吸引力。
-
易于維護： 將樣式集中在CSS中可以使代碼更易于維護。如果需要修改樣式，你只需修改CSS文件，而不必逐個修改每個HTML元素。
-
性能優化： 使用CSS可以減少HTML代碼中的樣式信息，從而減小文件大小，提升加載速度，改善性能。
-
統一風格： 通過為網站應用統一的樣式，你可以創造出專業、一致的品牌形象，讓用戶更容易識別和記住你的網站。
語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（樣式）
選擇器通常是您需要改變樣式的 HTML 元素
每條聲明由一個屬性和一個值組成
屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
<style>h1{color: blue;font-size: 12px;}
</style>
?CSS的引入方式
內聯樣式（行內樣式）
要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性
溫馨提示
缺乏整體性和規劃性，不利于維護，維護成本高
<p style="background: orange; font-size: 24px;">CSS<p>
內部樣式
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用?<style>?標簽在文檔頭部定義內部樣式表
溫馨提示
單個頁面內的CSS代碼具有統一性和規劃性，便于維護，但是在多個頁面之間容易混亂
<head><style> h1 { background: red; } </style>
</head>
外部樣式（推薦）
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用?<link>?標簽鏈接到樣式表。?<link>?標簽在（文檔的）頭部
<link rel="stylesheet" type="text/css" href="xxx.css">
