iT邦幫忙

2023 iThome 鐵人賽

DAY 6
1

簡介

了解了網頁的基本構造與常用元素後,是不是覺得畫面似乎不只這樣、為什麼我的畫面這麼簡單,是不是少了點什麼?

CSS 颯爽登場!

起初,網頁的樣式沒有任何規範,都寫在 HTML 內,結果 HTML 文件變得複雜,可以說是樣式的大戰國時代。CSS( Cascading Style Sheets,中文為階層樣式表) 的概念首先在 1994 年由 Håkon Wium Lie 提出,最初的建議規範(CSS1)是 W3C 在1996 年末建立的。經過不斷新增、修改、演化後,成為了現在我們所認知的 CSS。目前的主要版本為 CSS3,從 CSS3 開始,CSS 的功能被拆成一個個的模塊,這樣方便各自更新與修改,而它仍然在持續進化/新增中。

CSS 不是標準的程式語言、也不是標記語言(目前最廣泛使用的標記語言是 HTML),而是網頁的樣式語言、也是網頁的風格(style)。簡單來說,網頁的外觀如排版(layout)、顏色、背景等,都可以藉客製化 CSS 來達到需求。

那要如何把這些設定好的樣式套用到 HTML 上呢?

擺放位置


Fig. 1. 行內樣式(inline style)的範例

可以直接在 HTML 內寫上 CSS,如 Fig. 1. ,替 button 加上 style 屬性,然後把 CSS 宣告在 style 內。


Fig. 2. 寫在 head 的 style 裡面 & 使用 link 引入外部連結

也可以寫在 head 裡頭,用一個 style 標籤包起來,裡面再放上各種 CSS 的宣告,如 Fig. 2.。

也可以直接寫成一個檔案,再從外部載入這包 CSS 檔案,如 Fig. 2. 的 head 內的兩個 link。使用時在 HTML 的 <head> 內以 link 標示 css 檔案的連結,rel 表示類型是樣式表。若需載入多個樣式檔案,依序放上 link 即可。瀏覽器會依擺放順序讀取並解析所有資訊與 CSS,這樣瀏覽器載入 HTML 檔案時,就會知道「喔喔,(我家可愛的) HTML 要穿這件衣服!」。

但目前主流是使用 link 來載入外部樣式,這樣 HTML 的程式碼不會過度冗長;且當專案規模大、檔案數較多時,也方便後續維護。

讓我們開始認識基本的使用法吧!


基本規則(ruleset)


Fig. 3. CSS 的規則,MDN (https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)

大多數 CSS 都長得一樣:都有選擇器(selector),大括號 { } 內會宣告成對的屬性(property)與屬性值(property value)。每次宣告完畢後,用分號表示這行已結束。


阿要怎麼使用呢?以下舉文字的 CSS 屬性們作為例子:

文字(font)

  • 單獨使用可以設定系統字體
  • 可以是以下語法的縮寫,至少需使用 font-size、font-family
    • font-family:指定字型
      • 除了指定字型外,至少需加上一個通用字型(generic font)。防止在指定字型失效時,不同裝置上顯示的結果不同。
    • font-size:文字大小。單位可以是 px、%、cm、em、rem 等
    • font-stretch:有多種字型可選時,會自動選擇最適合的大小。
    • font-style:文字的「樣式」。例如 italic 為斜體字。
    • font-variant:設定文字(英文)是否為小型大寫字母(small capitals,簡稱 small caps,語法 small-caps)。
      • 注意:首字大寫、其他小寫的狀態才能正常呈現效果。
    • font-weight:字重;字的粗細程度。
      • 數字 100-900,也可以用 bold、small 等字。
    • line-height:行高。
      • 預設值:normal,預設值,約為1.2。由該元素的 font-family 決定
      • 純數值:一個整數或帶小數點的數字
        • 推薦使用,可防止繼承時出包。
        • 值的計算為該元素的字體大小 * 給定的純數值
      • 長度:px、em、rem、vh、vw 等等
      • 百分比(%):與元素自身字體大小相關,可能會算出意料外的值。
        • 值的計算為該元素的字體大小 * % 值
      • 關於 a11y:主段落建議行高為1.5

https://ithelp.ithome.com.tw/upload/images/20230907/20161801rF1Ngdu3xP.png
Fig. 4. 簡單的為 p 做了不同的 CSS 設定

code 如下

<div class="box">
  <p>嗨你好</p>
  <p>我是</p>
  <p>一隻</p>
  <p>海獺</p>
</div>
p{
  background-color: rgb(193, 215, 246);
}

p:nth-child(1) {
  font-size: 40px;
}

p:nth-child(2) {
  font-style: italic;
}

p:nth-child(3) {
  font-weight: 800;
}

p:nth-child(4) {
  color: cadetblue;
  font-weight: 800;
}

嗯……是不是覺得除了第一個 p 之外,其他好像都不太認識?
簡單來說,我替每個 p 都做了點不同的樣式設定,唯一一個共通的部分是背景顏色。

下一篇文章會為各位介紹選擇器(selectors)們。


參考資料

  • CSS 基本 - 學習該如何開發 Web | MDN,https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics
  • Why CSS Selectors are the most useful Selenium WebDriver locators? | PineBoat,https://www.pineboat.in/post/css-selectors-selenium-webdriver-find-element-xpath-replaced/
  • CSS | MDN,https://developer.mozilla.org/zh-TW/docs/Web/CSS
  • CSS Introduction,https://www.w3schools.com/css/css_intro.asp
  • CSS 教學:認識語法規則與基本功 - ALPHA Camp,https://tw.alphacamp.co/blog/css-guide-box-model
  • 為什麼不會有 CSS4? ~      X'sOin,https://blog.xsoin.com/2018/07/css4.html
  • 繼CSS3後的新模組. CSS是什麼 | by Sean Yeh | Web Design Zone | Medium,https://medium.com/web-design-zone/%E7%B9%BCcss3%E5%BE%8C%E7%9A%84%E6%96%B0%E6%A8%A1%E7%B5%84-8875780a8b15
  • CSS 字體 - 1Keydata CSS 語法教學,https://www.1keydata.com/css-tutorial/tw/font.php
  • CSS font-variant property,https://www.w3schools.com/cssref/pr_font_font-variant.php

上一篇
D5 - HTML - 補充:絕對路徑與相對路徑
下一篇
D7 - CSS - 選擇器們 - 基本、分組與組合
系列文
GPT 救救我!菜雞小海獺的前端成長之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言