[JavaWeb] CSS——基礎選擇器，字型和文字樣式

阿新 • • 發佈：2021-08-29

層疊樣式表（Cascading style sheets），給頁面中的HTML標籤設定樣式。

1 基礎認識

層疊樣式表（Cascading style sheets），給頁面中的HTML標籤設定樣式

1.1 CSS語法規則

位置：css寫在style標籤中，style標籤一般寫在head標籤裡面，title標籤下面
常見屬性
- color：文字顏色
- font-size：文字大小
- background-color：顏色背景
- width：寬度
- height：高度

1.2 CSS引入方式

內嵌式：CSS 寫在style標籤中

style標籤雖然可以寫在頁面任意位置，但是通常約定寫在 head 標籤中
外聯式：CSS 寫在一個單獨的.css檔案中,需要通過link標籤在網頁中引入
行內式：CSS寫在標籤的style的屬性中，配合js使用

2 基礎選擇器

作用：選擇頁面中對應的標籤，方便後續設定樣式

標籤選擇器

通過標籤名，找到頁面中所有這類標籤，設定樣式
```
標籤名{
    css屬性名：屬性值；
}
```
類選擇器

通過類名，找到頁面中所有帶有這個類名的標籤，設定樣式
```
.類名{
	css屬性名：屬性值；
}
```
注意：
1. 所有標籤上都有class屬性，class屬性的屬性值稱為類名（類似於名字）。
2. 類名可以由數字、字母、下劃線、中劃線組成，但不能以數字或者中劃線開頭。
3. 一個標籤可以同時有多個類名，類名之間以空格隔開。
4. 類名可以重複，一個類選擇器可以同時選中多個標籤。
id選擇器
```
#id屬性值{
    css屬性名：屬性值；
}
```
注意
1. 所有標籤上都有id屬性
2. id屬性值在一個頁面中是唯一的。
3. 一個標籤上只能有一個id屬性值
4. 一個id選擇器只能選中一個標籤
id一般配合js使用

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: large;
            color: brown;
        }
        .common{
            font-size: large;
            color: brown;
        }
        #one{
            font-size: large;
            color: brown;
        }
    </style>
</head>
<body>
    <p>讓赤色的旗兒飄滿全球</p>
    <div class="common">讓赤色的旗兒飄滿全球</div>
    <span id="one">讓赤色的旗兒飄滿全球</span>
</body>
</html>

3 字型和文字樣式

3.1字型樣式

字型大小：font-size

取值數字+px，預設16px
字型粗細：font-weight

取值nomal（400）預設、bold（700）加粗
字型樣式：font-style

取值normal預設、italic傾斜
字體系列：font-family

取值具體字型1,具體字型2,具體字型3,具體字型4,...,字體系列
- 具體字型："Microsoft YaHei"、微軟雅黑、黑體、宋體、楷體等……
- 字體系列：sans-serif、serif、monospace等……
注意
1. 從左往右按照順序查詢，如果電腦中未安裝該字型，則顯示下一個字型，如果都不支援，此時會根據作業系統，顯示最後字體系列的預設字型
2. 如果字型名稱中存在多個單詞，推薦使用引號包裹，最後一項字體系列不需要引號包裹
屬性連寫：font

取值 style weight size family;

需按順序，只能省略前兩個，如果省略了相當於設定了預設值，

3.2 文字樣式

文字縮排：text-indent

取值數字+px或數字+em

1em等於當前標籤font-size的大小
文字水平對齊方式：
1. text-align
  - 取值 left/center/right
  - 適用文字，span標籤，a標籤，input標籤，img標籤
  - 屬性值需要給以上元素的父元素設定
2. margin
  - 取值數字+auto
  - 適用div標籤、p標籤
  - 直接給當前元素本身設定即可
文字修飾：text-decoration

取值underline/none
行高：line-height

取值數字+px或（當前標籤font-size的倍數）