Day 16 網頁三兄弟 - CSS - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 16

Security

學分的追逐，資安的啟程系列第 16 篇

Day 16 網頁三兄弟 - CSS

15th鐵人賽

ruo3531

團隊好想放假大學

2023-10-01 19:21:47

140 瀏覽

分享至

今天要來水講的是 CSS

什麼是 CSS (Cascading Style Sheets) ?

CSS，或稱為階層樣式表，是一種用於定義網頁外觀和排版的樣式語言

簡而言之，CSS 使我們能夠為 HTML 文檔添加風格和設計，以實現各種視覺效果和版面配置

它是網頁設計的重要組成部分，有助於提高網站的可讀性和吸引力

引用 CSS

在網頁中我們可以透過三種方式在網頁使用 CSS ，引用優先順序從低到高分別是

External style 外部連結樣式

寫在 <link> 裡面

<link rel="stylesheet" type="text/css" href="檔案位置">

Internal style 內嵌樣式

寫在 <style> 裡面

<head>
  <style>
	/*   CSS內容   */
  </style>
</head>

Inline style 行內樣式

寫在標籤的 style 屬性裡面

<h1 style="color:red"></h1>

CSS 選擇器

CSS 可以透過選擇器來指定元素使用對應的 CSS

可以在 HTML 的標籤加上 class 或 id 來幫助 css 的使用

id : 是唯一的，一個 HTML 頁面上各個元素的 id 不能相同
class : 可重複使用，多個元素可以共用相同的 class

各種不同的選擇器

body{
  background-color: black;
  /* body tag 中的背景會變黑 */
}

.class-name {
  color: red;
  /* class-name 中的文字會變紅 */
}

#id-name {
  color: blue;
  /* id-name 中的文字會變藍 */
}

範例

HTML

<div id="header">這是頁首</div>

<p class="highlight">這是一個突出顯示的段落</p>
<p class="highlight">這是另一個突出顯示的段落</p>

CSS

#header {
  color: red;
}

.highlight {
  color: blue;
}

網頁結果

常見的 CSS

文字類

屬性	說明
`font-family`	設定字型
`font-size`	設定字型大小
`font-weight`	設定字型粗細
`font-style`	設定字型樣式（斜體 italic 、正常 normal）
`color`	設定文字顏色，可以用顏色名稱、十六進制顏色值或 RGB 顏色值
`text-align`	設定文字水平對齊方式 ( 左對齊 left、右對齊 right 、置中 center )
`line-height`	設定行高
`text-decoration`	設定文字裝飾（下劃線 underline 、刪除線 line-through 、上劃線 overline 等）

更多免費字體可以參考 https://fonts.google.com/

使用方法 : <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=字體名字">

背景

屬性	說明
`background-color`	設定背景顏色，可以用顏色名稱、十六進制顏色值或 RGB 顏色值
`background-image`	設定背景圖片
`background-repeat`	設定背景圖片的重複方式 ( 重複 repeat 、不重複 no-repeat)
`background-size`	設定背景圖片的尺寸

background-image 用法 : background-image : url(圖片位置)

邊框

屬性	說明
`border`	設定邊框樣式、寬度和顏色
`border-radius`	設定邊框圓角
`border-color`	設定邊框顏色，可以使用顏色名稱、十六進制顏色值或 RGB 顏色值
`border-width`	設定邊框寬度
`border-style`	設定邊框樣式 ( 實線 solid、點線 dotted、虛線 dashed )

border 用法 : border : 1px solid red 代表寬度為 1 的紅色實線

border-width 、border-style 、border-color 都是 border 的子屬性，可以在裡面設四個值分別代表上、右、下、左四個邊的樣式

其他

屬性	說明
`margin`	設定外邊距
`padding`	設定內邊距
`width`	設定元素寬度
`height`	設定元素高度
`position`	設定元素定位方式（相對定位 relative 、絕對定位 absolute 等）
`display`	設定元素顯示方式（區塊 block 、行內 inline 、隱藏 none 等）
`opacity`	設定元素透明度，0表示完全透明，1表示完全不透明
`z-index`	設定元素層級，數字越大越上層

margin 、padding 若有四個值的話，分別代表上、右、下、左

CSS 動畫

CSS 也可以來做簡單的動畫，這是一些常見的動畫屬性跟一個簡單範例

屬性	說明
`animation`	設定動畫效果的總體屬性
`animation-name`	指定動畫的名稱
`animation-duration`	設定動畫持續時間
`animation-timing-function`	設定動畫的時間函數（加速度曲線）
`animation-delay`	設定動畫開始之前的延遲時間
`animation-iteration-count`	設定動畫的重複次數
`animation-direction`	設定動畫播放方向（正向 normal 、反向 reverse 、交替 alternate 等），預設為正向

範例

叫 cat 的 class 會由左往右移的動畫

.cat{   
    width: 200px;
    height: 200px;
    border-radius: 100px;
    position: absolute; 
    animation-name: MoveCat;    /*動畫名稱，需與 keyframe 名稱對應*/
    animation-duration: 4s;    /*動畫持續時間，單位為秒*/
    animation-delay: 2s;    /*動畫延遲開始時間*/
    animation-iteration-count: infinite;    /*動畫次數，infinite 為無限次*/    
}


/* 關鍵影格(@keyframe) , 寫在外面*/
@keyframes MoveCat {    
    0% { left: 0; }
    25% { left: 20%; }
    50% { left: 40%; }
    75% { left: 60%; }
    100% { left: 80%; }
}

/*簡單寫法*/
@keyframes MoveCat {
    from { left: 0; } 
    to { left: 80%; }
}

Bootstrap

Bootstrap 是一個開源的前端框架，旨在協助網頁開發者輕鬆且迅速地建立現代化、具有吸引力和響應式設計的網頁和網頁應用程序。它由 Twitter 團隊開發和維護，並已成為業界標準之一。Bootstrap 提供了一系列的 CSS、JavaScript、預設樣式和可重用組件，可用於節省開發時間、提高網頁設計質量以及確保跨平台兼容性

引用

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>