iT邦幫忙

2025 iThome 鐵人賽

DAY 2
0
自我挑戰組

前端轉職學習記錄系列 第 2

DAY2- CSS 基礎-引入方式

  • 分享至 

  • xImage
  •  

DAY2
之前老師在教VUE3的時候,我CSS的基礎幾乎是沒有,導致在學VUE3的時候我幾乎是硬背所有的元件。


CSS引入方式

常見:外部樣式表、內部樣式、行內樣式

  1. 外部樣式表:外部樣式表(global CSS)就是把「多頁/多元件都會用到的樣式」集中在一個或幾個檔案,讓大家共用。重點是哪些要做成全域、哪些留在元件內。
<link rel="stylesheet" href="/css/main.css">
  1. 內部樣式:只可以影響單頁
<head>
  <style>
    .card { padding: 16px; }
  </style>
</head>

  1. 行內樣式:一次性的微調或 JS 動態計算時用;大量使用會難維護。
<div style="color: #333; margin-top: 8px;">Text</div>

VUE3常見的用法:

  • 元件裡使用 <style scoped>
  • 在入口點(main.js)import全域樣式

CSS選擇器

  • 基本選擇器
    1.元素選擇器:Html標籤
    2.類別選擇器:. + class
    3.ID選擇器:#區塊(header、main-content...)
  • 組合選擇器
    1.群組選擇器:不同的HTML標籤以逗點分隔(p,h1{})
    2.後代選擇器:class裡的指定標籤https://ithelp.ithome.com.tw/upload/images/20250917/20175965T5nBx5zA9q.png

上一篇
給自己一個起點
下一篇
DAY3- CSS 基礎-選擇器-1
系列文
前端轉職學習記錄9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言