理解CSS

Sonui發表於2024-07-17
CSS

位元組青訓營學習筆記 - CSS

CSS是什麼

介紹:

CSS(Cascading Style Sheets)是一種用來定義HTML頁面的樣式的語言

透過其我們可以

  • 設定字型和顏色

  • 設定位置和大小

  • 新增動畫效果

  • 為不同的裝置適配不同的樣式

使用CSS

<!-- 外鏈 -->
<!-- 多個頁面通用時使用 -->
<link rel="stylesheet" href="css/style.css">
<!-- 嵌入 -->
<!-- 單頁面內多個元素通用時使用 -->
<style>
    body {
        background-color: #f5f5f5;
    }
</style>
<!-- 內聯 -->
<!-- 單個元素設定特殊樣式時使用 -->
<p style="color: #46A59A;">Hello World</p>

工作流程

graph LR A(載入HTML)-->B(解析HTML)-->C(建立DOM樹)-->D(展示頁面) B-->E(載入CSS)-->F(解析CSS)-->G(新增樣式到DOM節點)-->C

選擇器

三種方式

  • 標籤名、類名或ID

  • 屬性

  • DOM樹中的位置

還有一個特殊的選擇器: * 統配選擇器, 可以選擇所有元素

選擇器例項


/* id選擇器 */
#id {
    color: red;
}

/* 類名選擇器 */
.class {
    color: blue;
}

/* 標籤選擇器 */
p {
    color: green;
}

/* 屬性選擇器 */
/* 匹配 <input disable/> */
[disabled] {
    background-color: #ccc;
}

input[disabled] {
    background-color: #ccc;
}

input[type="text"] {
    background-color: #ccc;
}

/* herf以#開頭 */
a[href^="#"] {
    background-color: #ccc;
}

/* herf以.jpg結尾 */
a[href$=".jpg"] {
    background-color: #ccc;
}

偽類

當元素屬於某個狀態時, 可以使用偽類

/* 預設狀態 */
a:link{
    color: #46A59A;
}

/* 點選之後 */
a:visited {
    color: #46A59A;
}

/* 滑鼠移入 */
a:hover{
    color: #46A59A;
}

/* 滑鼠離開 */
a:active {
    background-color: #ccc;
}

/* 被選中 */
:focus {
    background-color: #ccc;
}

/* 結構偽類 */
/* 第一個子元素 */
:first-child {
    background-color: #ccc;
}

/* 最後一個 */
:last-child {
    background-color: #ccc;
}

組合(重點)

名稱 語法 說明 例項
直接組合 AB 滿足A同時也滿足B input:focus
後代組合 A B 選擇A的子孫B div a
親子組合 A>B 選擇A的子元素B div>a
兄弟選擇器 A~B 如果B在A後且同級則選擇它 a~img
相鄰選擇器 A+B 如果B緊跟在A後則選擇它 a+img

當選擇多個時, 透過 , 隔開, 稱為選擇器組

顏色

三原色

  • R: red
  • G: green
  • B: blue

透過三色可以設定顏色, 數值從0-255

#8fac87 與 rgb(143, 172, 135) 為兩種設定顏色的方法，前者為後者三色的值轉為16進位制後拼接

HSL

透過三方面來區分顏色

  • Hue: 色調 顏色(0-360)
  • Saturation: 飽和度 越高越鮮豔(0-100)
  • Lightness: 亮度 越高顏色越亮(0-100)

使用方式: hsl(0, 100%, 50%)

透明度

rgba(255, 0, 0, 0.5): 透明度為50%的紅色

hsla(0, 100%, 50%, 0.6): 透明度為60%的紅色

#ff0000ff: 透明度為255的紅色

字型


/* 字型族 */
body {
    /* 從前往後匹配直到遇到擁有的字型 */
    /* sans-serif 為通用字型 無襯線 一定要在最後加一個通用字型族*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

使用網路字型

@font-face{
    font-family: "MyFont";
    src: url("http://example.com/font.woff");
}

body {
    font-family: "MyFont", sans-serif;
}

字型樣式

大小:

font-size: <font-size> 字型大小

font-size 可以是一個數值加單位, 如 px, em, rem

樣式:

font-style: <font-style> 字型樣式

  • normal: 正常
  • italic: 斜體
  • oblique: 傾斜
  • initial: 初始值
  • inherit: 繼承

字重:

font-weight: <font-weight> 字型重量, 數值越大越粗

行高:

設定兩行文字之間的間距

line-height: <line-height> 行高

組合設定:

body {
    /* 斜體 粗細 大小/行高 字型族*/
    font: italic bold 1.5em/1.7 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

對齊:

text-align: <text-align> 文字對齊

  • left: 左對齊
  • right: 右對齊
  • center: 居中
  • justify: 兩端對齊
  • initial: 初始值

間距:

letter-spacing: <letter-spacing> 字元間距

word-spacing: <word-spacing> 單詞間距

首行縮排:

text-indent: <text-indent> 首行縮排

文字修飾:

text-decoration: <text-decoration> 文字修飾

  • none: 無修飾
  • underline: 下劃線
  • overline: 上劃線
  • line-through: 刪除線
  • initial: 初始值
  • inherit: 繼承

不可見字元處理:

white-space: <white-space> 不可見字元處理

  • normal: 正常
  • nowrap: 不換行
  • pre: 單詞首字母緊靠
  • pre-wrap: 單詞首字母緊靠, 其他字元換行
  • pre-line: 單詞首字母緊靠, 其他字元不換行
  • initial: 初始值
  • inherit: 繼承

相關文章