iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Modern Web

給心理人的前端網頁開發系列 第 5

[給心理人的前端網頁開發] 05 關卡〇:簡介 CSS

  • 分享至 

  • xImage
  •  

在文章〈關卡〇:新手入門之說聲 Hello World〉,我們看到了 HTML、CSS、JavaScript 如何組合成一個網頁。不過 CSS 究竟是什麼、以及在 Hello World 網頁中的幾行 CSS 語法到底是什麼意思呢?這篇文章將逐一介紹。

div {
  color: red;
  font-size: 108px;
}

一、CSS 是啥

如果將網頁比喻成房屋的話,那 CSS 就是網頁的油漆壁紙與裝潢風格。

CSS 是一種風格頁面語言(Cascading Stylesheets;階層樣式表),可以調整 HTML 元素的樣式表現。主要由 選擇器 - 大括號對 - 屬性 - : - 屬性值 - ;,這些東西所構成。一個選擇器包含的設定,可以說是一個規則 (rule)。

選擇器 {
  屬性: 屬性值;
  屬性1: 屬性1值;
  屬性2: 屬性2值;
}

選擇器(selector)可能是一個 class (自訂的 CSS 類別名稱)、或是一個 HTML 中的標籤名稱(tag name,也可以叫做元素 element)。 屬性則是被選擇到的元素可調整的屬性,例如 顏色 (color)文字大小 (font-size)屬性值為該屬性可接受的設定值,例如 color 屬性可設定 red、#ff0000 等顏色。

瀏覽器載入網頁時,會先讀取 HTML 檔案蓋好骨架、接著會載入 CSS 樣式設定。瀏覽器會去找選擇器有針對哪些標籤名稱做設定,並根據屬性與屬性值去做樣式調整。

在關卡〇,我們只需要先知道 CSS 這個語言,是由許多的 rule 組成就好。

延伸教學

二、Hello World 中,幾行 CSS 語法的意思

div {

}

一個樣式規則的選擇器。這邊的選擇器是一個 div 標籤名稱,意思是網頁上所有的 div 都會套用到這個規則中屬性與屬性值的設定。

color: red;

一個屬性與屬性值的設定。這邊的屬性 color 是指文字的顏色,屬性值red 是指紅色。所以這個設定會讓文字變成紅色。

 font-size: 108px;

一個屬性與屬性值的設定。這邊的屬性 font-size 是指文字的大小,屬性值 108px 是指大小為 108px (px 是像素點的意思,一種常用在螢幕上的面積單位)。所以這個設定會讓文字大小變成 108px。

小結

看完今天的文章可以知道

  • CSS 的簡介:CSS 檔案由 rule 組成,rule 包含選擇器、屬性、屬性值
  • 在 Hello World 範例中的 CSS 語法意思 (div, color, font-size)

明天將繼續簡介 JavaScript。


上一篇
[給心理人的前端網頁開發] 04 關卡〇:簡介 HTML
下一篇
[給心理人的前端網頁開發] 06 關卡〇:簡介 JavaScript
系列文
給心理人的前端網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言