風格與樣式 CSS

重要度:⭐⭐⭐⭐⭐難度:⭐⭐⭐

Previous基本結構 HTML Next設計工具與動畫庫

Last updated 3 years ago

Was this helpful?

風格與樣式 CSS

重要度:⭐⭐⭐⭐⭐難度:⭐⭐⭐

CSS 階層式樣式表

本章節將會跳過CSS預編譯相關知識。

建議您在閱讀完本章節後，在參考此篇文章。

CSS 可以給予網頁美麗的樣式與簡單的動畫效果。

網頁瀏覽器透過CSS來定義元素樣式。

使用方式

有兩種使用方式。

直接在 HTML 中指定 CSS 屬性值。
引入CSS檔案。

對於初學者，我建議使用第二種方式。

我們會使用 <link rel="stylesheet" type="text/css" href="style.css"> 來引入 css 檔。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高中生的前端設計入門</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
  <h1 id="title">我的第一個標題</h1>
   
  <p class="paragraph">我的第一個段落。</p>
  
</body>
</html>

CSS 選擇器

可以透過CSS選擇器來指定元素並賦予樣式。

指定元素有四種方法:

id
class
標籤指定
內嵌指定

這四種 CSS 選擇器有修飾上的優先級，即：

內嵌指定 > id > class > 標籤指定。

在CSS中我們經常透過id與class來指定特定元素。

id 使用 # 來指定。

#title{
    color:red;
}

class 使用 . 來指定。

.paragraph{
    color:red;
}

標籤指定。

h1{
    color:red;
}

內嵌指定。

<h1 id="title" style="color:red;">我的第一個標題</h1>

你可以使用子選擇器，來指定再某元素內的元素。

div h1{
    color:red;
}

任務 1 : 在第一個<p>不變色的情況下讓<div>內的<p>變為深藍色(#1d4eff)。

提示請使用子選擇器。

任務 2 : 請將改成顏色漸變改成紅色(#ff0000)到橘色(#ff5500)。

-webkit-keyframes 在 Microsoft Edge、Safari 和 Chrome 經本人測試均可成功運行，但仍然可能出現問題，這代表您的瀏覽器版本過舊，請更新到較新瀏覽器版本。

箱型模型 CSS Box Model

CSS 箱型模型在影響網頁排版的部分具有很大的影響力。

每個 HTML元素都有其CSS箱型模型。

border : 框線。

padding : 內邊距。

margin : 外邊距。

content: 內容。

以下是單獨指定某一屬性的順序:

padding: 上下左右 / 上右下左。

padding: 5px 20px;

指定上下邊距寬 : 5px 左右邊距寬 : 20px。

指定上下界寬 : 5px 左右寬 : 20px。

區塊元素和行內元素

這些元素可以透過 display 屬性更改，CSS規範規定，每個元素都有display屬性與默認的display值。

區塊元素

1.區塊(block)元素都會另起一行。

2.高度，行高以及頂和底邊距都可控制。

3.默認情况下，其寬度自動填滿其父元素寬度，即寬度100%。

4.可以設置寬高 width hight。

行內元素常見包括span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup...等等。

行內元素

1.和其他元素都在一行上，相臨的行内元素會排列在同一行，直到一行排不下，才會換行，其寬度隨元素的内容而變化。

2.設置寬高無效，只能由内容撐起来，即行内元素設置width，height屬性無效。

3.設置上下margin、padding無效，左右padding 、margin有效。

4.水平方向的padding-left 、padding-right、margin-left、margin-right都會產生效果，但上下方向的padding-top、padding-bottom、margin-top 、 margin-bottom不會產生邊距效果。

Previous基本結構 HTML Next設計工具與動畫庫

Last updated 3 years ago

Was this helpful?

CSS 階層式樣式表

本章節將會跳過CSS預編譯相關知識。

建議您在閱讀完本章節後，在參考此篇文章。

CSS 可以給予網頁美麗的樣式與簡單的動畫效果。

網頁瀏覽器透過CSS來定義元素樣式。

使用方式

有兩種使用方式。

直接在 HTML 中指定 CSS 屬性值。
引入CSS檔案。

對於初學者，我建議使用第二種方式。

我們會使用 <link rel="stylesheet" type="text/css" href="style.css"> 來引入 css 檔。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>高中生的前端設計入門</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 
  <h1 id="title">我的第一個標題</h1>
   
  <p class="paragraph">我的第一個段落。</p>
  
</body>
</html>

CSS 選擇器

可以透過CSS選擇器來指定元素並賦予樣式。

CSS 選擇器有多種方法可使用，這邊只教最常用的四種。更多選擇器你可以在找到。

指定元素有四種方法:

id
class
標籤指定
內嵌指定

這四種 CSS 選擇器有修飾上的優先級，即：

內嵌指定 > id > class > 標籤指定。

在CSS中我們經常透過id與class來指定特定元素。

id 使用 # 來指定。

#title{
    color:red;
}

class 使用 . 來指定。

.paragraph{
    color:red;
}

標籤指定。

h1{
    color:red;
}

內嵌指定。

<h1 id="title" style="color:red;">我的第一個標題</h1>

你可以使用子選擇器，來指定再某元素內的元素。

div h1{
    color:red;
}

任務 1 : 在第一個<p>不變色的情況下讓<div>內的<p>變為深藍色(#1d4eff)。

提示請使用子選擇器。

任務 2 : 請將改成顏色漸變改成紅色(#ff0000)到橘色(#ff5500)。

-webkit-keyframes 在 Microsoft Edge、Safari 和 Chrome 經本人測試均可成功運行，但仍然可能出現問題，這代表您的瀏覽器版本過舊，請更新到較新瀏覽器版本。

箱型模型 CSS Box Model

CSS 箱型模型在影響網頁排版的部分具有很大的影響力。

每個 HTML元素都有其CSS箱型模型。

border : 框線。

padding : 內邊距。

margin : 外邊距。

content: 內容。

以下是單獨指定某一屬性的順序:

padding: 上下左右 / 上右下左。

padding: 5px 20px;

指定上下邊距寬 : 5px 左右邊距寬 : 20px。

指定上下界寬 : 5px 左右寬 : 20px。

區塊元素和行內元素

HTML元素分為。

這些元素可以透過 display 屬性更改，CSS規範規定，每個元素都有display屬性與默認的display值。

區塊元素

1.區塊(block)元素都會另起一行。

2.高度，行高以及頂和底邊距都可控制。

3.默認情况下，其寬度自動填滿其父元素寬度，即寬度100%。

4.可以設置寬高 width hight。

行內元素常見包括span、em、i、b、strong、a、img、input、br、select、textarea、q、bdo、sub、sup...等等。

行內元素

1.和其他元素都在一行上，相臨的行内元素會排列在同一行，直到一行排不下，才會換行，其寬度隨元素的内容而變化。

2.設置寬高無效，只能由内容撐起来，即行内元素設置width，height屬性無效。

3.設置上下margin、padding無效，左右padding 、margin有效。