Try   HackMD

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則是對網頁的提升和優化。

如何在HTML中導入CSS?


在文件中導入CSS的方式有三種,分別為「外部樣式表」、「內部樣式表」,以及「行內樣式表」這幾種方法各有優缺點,會在稍後進行說明。

  1. 外部樣式表 (External Style Sheet)

這種方法是將所有的 CSS 樣式寫在一個獨立的 .css 檔案中,並且在 HTML 文件的<head>區域使用 <link> 標籤引入該檔案。

  • 優點:這樣可以將 HTML 文件和 CSS 樣式分離,使得網頁的內容和樣式分開管理,方便維護和修改,缺點
  • 缺點:設計的網站規模較小時,設定比較麻煩;在編碼過程中,需要來回參照標籤位置。
<head>
  <link rel="stylesheet" type="text/css" href="style.css"><!--在href=""中輸入檔案位置-->
</head>
  1. 內部樣式表 (Internal Style Sheet)

這種方法是在 HTML 文件的 head 區域使用 <style> 標籤來定義 CSS樣式

  • 優點:方便使用以及進行參照
  • 缺點:當網站較龐大十可能很難尋找需要的資訊,且樣式無法被其他的文黨應用。
<head>
  <style>
    body {
      background-color: #F5F5F5;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
  1. 行內樣式 (Inline Style)
    這種方法是在 HTML 標籤中使用 style 屬性來定義 CSS 樣式,並以  分隔開來,這些樣式只適用於該標籤。
  • 優點:設定相當快速、簡便
  • 缺點:無法對樣式進行統一的管理
<p style="color: red; font-size: 16px;">這是一個紅色的段落</p>

CSS語法結構


CSS是一種用於網頁設計的樣式表語言,可以讓開發者控制網頁中的外觀和排版。在使用CSS時,我們需要了解其基本結構和語法。

CSS由選擇器、屬性和值三部分構成,

  • 選擇器用來選擇要修正的HTML元素,後面將會更詳細的介紹選擇器
  • 屬性指定要修改的HTML元素的樣式
  • 則是屬性的具體值。
p {
  color: blue;
  font-size: 14px;
}
/*設定文字的樣式*/

其中,p是選擇器,表示所有的<p>元素都會應用這個樣式規則。colorfont-size是屬性,分別指定文字顏色和字體大小,blue14px則是屬性的值。在CSS中,我們可以使用分號;將多個屬性分隔開來。

和HTML一樣,CSS也支持註解。在CSS中,註解以/*開始,以*/結束,中間的內容都會被當作註解忽略掉。

CSS選擇器


當使用 CSS 樣式來設定 HTML 元素的時候,可以使用選擇器(Selectors)來定位需要設定樣式的元素。以下是幾種不同的選擇器及其用法:

  1. 元素選擇器
    元素選擇器(Element Selector)是最基本的選擇器,它能夠根據元素的標籤名稱(如 div、p、h1 等)選擇相應的元素。只要用元素選擇器,所有的元素就會被設定相同的樣式
p {
  color: blue;
  font-size: 14px;
}
  1. ID 選擇器
    ID 選擇器(ID Selector)可以根據元素的 id 屬性來選擇相應的元素。ID 屬性在整個 HTML 文檔中應該是唯一的。例如:
<style>
#header {
  background-color: black;
  color: white;
}
</style>
<!------------------------->
<div id="header">這是網頁的頂部</div>

  1. 類別選擇器
    類別選擇器(Class Selector)可以根據元素的 class 屬性來選擇相應的元素。一個元素可以有多個 class 屬性,並且多個元素可以共用同一個 class。例如:

<style>
.highlight {
  background-color: yellow;
  color: red;
}
</style>
<p class="highlight">這是一段有類名的文字</p>

結語


學習CSS相當的重要,可以幫助你的網頁的排版,美化你的內容,所以就直接開始試試看吧。

關於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學習大綱,你可以根據你的需要和時間進行調整和修改。