# CSS 入門介紹 ###### tags: `C語言` `創課社講義` `網頁` `CSS` *作者:陳宥端* >CSS是 **Cascading Style Sheets**的縮寫，是一種用於網頁設計的樣式的語言，用來美化網頁或是進行排版。它可以讓開發者將網頁的設計與內容分離，使得網頁的設計更加靈活和易於維護。 ### 目錄 --- 1. 為甚麼要用CSS 2. 與HTML不同的地方 3. 如何在HTML中導入CSS 4. CSS語法結構 5. CSS選擇器 6. CSS學習大剛 ### 為甚麼要用CSS --- CSS是一種用於設計網頁樣式和佈局的語言。它可以控制網頁的外觀和感覺，例如字體、顏色、大小、邊框、背景、間距、對齊等。CSS可以使網頁更具視覺吸引力，提高用戶體驗和易用性。 學習CSS的重要性在於它是前端開發的基礎。CSS使網頁的設計更靈活，並且可以使網頁與眾不同。使用CSS可以使網頁更快、更容易維護和更新。此外，CSS還可以幫助網頁排名更高，因為搜索引擎喜歡易於閱讀和組織的內容。 CSS的優點包括： 1. 可以分離樣式和內容，使代碼更易於維護和更新。 2. 可以讓網頁更具視覺吸引力和專業性。 3. 可以提高網頁的可用性和易用性，使用戶更容易找到所需的內容。 4. 可以提高網頁的速度和性能，因為CSS樣式表可以在單獨的文件中緩存，從而加快網頁的加載速度。 ### 與HTML有甚麼不同呢 --- HTML與CSS的區別在於，HTML是一種用於創建網頁內容(元素)的語言，而CSS是用於設計網頁樣式和佈局的語言。HTML定義了網頁的結構和內容(元素) ，CSS則控制了網頁的外觀和感覺。可以將HTML視為網頁的基礎，而CSS則是網頁的裝飾。HTML是必不可少的，而CSS則是對網頁的提升和優化。 <div style="page-break-after: always;"></div> ### 如何在HTML中導入CSS? --- 在文件中導入CSS的方式有三種，分別為「外部樣式表」、「內部樣式表」，以及「行內樣式表」這幾種方法各有優缺點，會在稍後進行說明。 1. 外部樣式表 (External Style Sheet) 這種方法是將所有的 CSS 樣式寫在一個獨立的 `.css `檔案中，並且在 HTML 文件的` <head> `區域使用 `<link>` 標籤引入該檔案。 * 優點：這樣可以將 HTML 文件和 CSS 樣式分離，使得網頁的內容和樣式分開管理，方便維護和修改，缺點 * 缺點：設計的網站規模較小時，設定比較麻煩；在編碼過程中，需要來回參照標籤位置。 ```html <head> <link rel="stylesheet" type="text/css" href="style.css"><!--在href=""中輸入檔案位置--> </head> ``` 2. 內部樣式表 (Internal Style Sheet) 這種方法是在 HTML 文件的 head 區域使用 `<style>` 標籤來定義 CSS樣式 * 優點：方便使用以及進行參照 * 缺點：當網站較龐大十可能很難尋找需要的資訊，且樣式無法被其他的文黨應用。 ```HTML <head> <style> body { background-color: #F5F5F5; font-family: Arial, sans-serif; } </style> </head> ``` 3. 行內樣式 (Inline Style) 這種方法是在 HTML 標籤中使用 `style` 屬性來定義 CSS 樣式，並以 `；`　分隔開來，這些樣式只適用於該標籤。 * 優點：設定相當快速、簡便 * 缺點：無法對樣式進行統一的管理 ```html <p style="color: red; font-size: 16px;">這是一個紅色的段落</p> ``` <div style="page-break-after: always;"></div> ### CSS語法結構 --- CSS是一種用於網頁設計的樣式表語言，可以讓開發者控制網頁中的外觀和排版。在使用CSS時，我們需要了解其基本結構和語法。 CSS由選擇器、屬性和值三部分構成， * **選擇器**用來選擇要修正的HTML元素，後面將會更詳細的介紹選擇器 * **屬性**指定要修改的HTML元素的樣式 * **值**則是屬性的具體值。 ```css p { color: blue; font-size: 14px; } /*設定文字的樣式*/ ``` 其中，`p`是選擇器，表示所有的`<p>`元素都會應用這個樣式規則。`color`和`font-size`是屬性，分別指定文字顏色和字體大小，`blue`和`14px`則是屬性的值。在CSS中，我們可以使用**分號**` ; `將多個屬性**分隔**開來。 和HTML一樣，CSS也支持註解。在CSS中，註解以`/*`開始，以`*/`結束，中間的內容都會被當作註解忽略掉。 ### CSS選擇器 --- 當使用 CSS 樣式來設定 HTML 元素的時候，可以使用選擇器（Selectors）來定位需要設定樣式的元素。以下是幾種不同的選擇器及其用法： 1. 元素選擇器 元素選擇器（Element Selector）是最基本的選擇器，它能夠根據元素的標籤名稱（如 div、p、h1 等）選擇相應的元素。只要用元素選擇器，所有的元素就會被設定相同的樣式 ```CSS p { color: blue; font-size: 14px; } ``` <div style="page-break-after: always;"></div> 2. ID 選擇器 ID 選擇器（ID Selector）可以根據元素的 id 屬性來選擇相應的元素。ID 屬性在整個 HTML 文檔中應該是**唯一的**。例如： ```html <style> #header { background-color: black; color: white; } </style> <!-------------------------> <div id="header">這是網頁的頂部</div> ``` 3. 類別選擇器 類別選擇器（Class Selector）可以根據元素的 class 屬性來選擇相應的元素。一個元素可以有多個 class 屬性，並且多個元素可以共用同一個 class。例如： ```css <style> .highlight { background-color: yellow; color: red; } </style> <p class="highlight">這是一段有類名的文字</p> ``` ### 結語 --- >學習CSS相當的重要，可以幫助你的網頁的排版，美化你的內容，所以就直接開始試試看吧。 <div style="page-break-after: always;"></div> ## 關於CSS的大剛 以下是一份從基礎到進階的CSS要學習的東西，當然不用每一項都會，這份表可以給大家可以根據網頁現在想易達到的效果，來選擇要學習的內容 ##### 1. 基礎 - CSS選擇器和屬性 - CSS樣式的優先級 - CSS盒模型 - CSS display屬性和定位 ### 2. 樣式表 - 外部樣式表 - 內部樣式表 - 行內樣式表 - 優先級和繼承 #### 3. 選擇器 - 基本選擇器 - 關係選擇器 - 属性選擇器 #### 4. 盒模型 - 內容、內邊距、邊框、外邊距 - 盒子模型的顯示方式 - 設置盒子模型的大小和位置 #### 5. 布局 - 浮動和清除 - 定位和z-index - Flexbox - Grid布局 #### 6. 動畫和過渡 - CSS3過渡 - CSS3動畫 - 使用JavaScript和CSS創建交互效果 #### 9. 優化和應用 - 優化CSS代碼 - 響應式設計 - 瀑布流布局 - CSS框架和預處理器 以上是一份基本的CSS學習大綱，你可以根據你的需要和時間進行調整和修改。