Day11：CSS-基本介紹

2022 iThome 鐵人賽

DAY 11

Modern Web

30天複習網頁前端設計!系列第 11 篇

14th鐵人賽

2022-09-26 22:34:12

358 瀏覽

分享至

CSS是什麼?

階層樣式表(全名：Cascading Style Sheets)
幫結構化文件(HTML/XML)添加樣式
CSS專注於樣式的設定，HTML專注於文件結構
不能單獨使用，需搭配HTML或XML一起使用

CSS的基本架構

除了選擇器名稱以外，其他都必須被大括號({})給包住。
在每一個宣告裡面，屬性跟屬性值之間必須用冒號(:)做區分。
在每一個規則裡面可以包含有許多宣告，但不同的宣告之間必須使用分號(;)來區分。
*補充：CSS註解方式與HTML不同，為/*內容*/

CSS的套用方式

在HTML文件中的<head></head>中輸入link:css，並按下Enter鍵，就會顯示

<link rel="stylesheet" href="style.css">

<link>-是一種後設元素(meta element)只能放在標頭裡，可以載入外部檔案。
rel="stylesheet"-告訴文件載入的資源是樣式表，所以瀏覽器就知道要用讀 CSS 的方式去處理載入的內容。
href="style.css"-描述路徑，讓瀏覽器找得到檔案。

存檔HTML文件，並在瀏覽器中顯示，就可以看到CSS套用的結果。

CSS的多重選擇

可以宣告多個CSS設定。

h1 {
    font-family: "Helvetica", "Arial", sans-serif;
}

font-family-指定字形

參考資料：https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics
https://tw.alphacamp.co/blog/css-guide-box-model

Day10：HTML-其他標籤

Day12：CSS-基本選擇器

系列文

30天複習網頁前端設計! 共 27 篇

RSS系列文訂閱系列文

5 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

108 組

團體組數

1 組

累計文章數

111 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙

30天複習網頁前端設計!系列 第 11 篇