1. CSS簡介
- css是層疊樣式表(Cascading Style Sheets)的縮寫
- css可以用來為網(wǎng)頁創(chuàng)建樣式表，通過樣式表可以對網(wǎng)頁進(jìn)行裝飾
- 所謂層疊，可以將整個網(wǎng)頁想象成是一層一層的結(jié)構(gòu)，層次高的將會覆蓋層次低的
- 而css就可以分別為網(wǎng)頁的各個層次設(shè)置樣式
- 總之，css用來設(shè)置網(wǎng)頁中元素的樣式
2. CSS編寫位置
2.1 內(nèi)聯(lián)樣式
使用css修改元素的樣式的第一種方式是，內(nèi)聯(lián)樣式，也叫行內(nèi)樣式
特點(diǎn)：
- 在標(biāo)簽內(nèi)部通過style屬性來設(shè)置元素的樣式
缺點(diǎn)：
- 使用內(nèi)聯(lián)樣式，只能對一個標(biāo)簽生效
- 希望影響到多個元素時必須在每個元素中復(fù)制一遍
- 當(dāng)樣式需要發(fā)生改變時，每個樣式都需要改變
注意：開發(fā)中絕不推薦使用內(nèi)聯(lián)樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 第一種方式：內(nèi)聯(lián)樣式(行內(nèi)樣式) -->
<!-- 字體顏色設(shè)置為紅色，像素設(shè)置為60px -->
<p style="color:red; font: size 60px;">今天天氣真不錯</p>
</body>
</html>
2.2 內(nèi)部樣式表
使用css修改元素的樣式的第二種方式是，內(nèi)部樣式表
特點(diǎn)：
- 將樣式編寫到head的style標(biāo)簽中，通過css的選擇器選中元素并為其設(shè)置各種樣式
- 可以同時為多個標(biāo)簽設(shè)置樣式，修改時只需修改一處
- 注意：style標(biāo)簽中的語法為css語法，不再是html語法
缺點(diǎn)：
- 內(nèi)部樣式只能對一個網(wǎng)頁其作用，其內(nèi)容不能跨網(wǎng)頁復(fù)用
注意：開發(fā)中不經(jīng)常使用內(nèi)部樣式表，但為了方便舉例，文章中多使用這一方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
/* 設(shè)置p標(biāo)簽的顏色為綠色，大小為60px */
color:green;
font: size 60px;;
}
</style>
</head>
<body>
</body>
</html>
2.3 外部樣式表
使用css修改元素的樣式的第三種方式是，外部樣式表
特點(diǎn)：
- 可以將css樣式編寫到一個外部css文件中，然后通過head的link標(biāo)簽引入外部的css文件
- 這代表著該樣式可以在不同頁面間進(jìn)行復(fù)用
- 這種方式可以使用瀏覽器的緩存機(jī)制，加快網(wǎng)頁的加載速度
注意：開發(fā)中推薦使用這種方式
/*該文件命名為style01.css*/
p{
color:red;
font: size 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用link標(biāo)簽，填入css文件地址 -->
<link rel="stylesheet" href="style01.css">
</head>
<body>
<p>今天天氣真不錯！</p>
</body>
</html>
3. CSS語法形式
css的基本語法有：選擇器和聲明塊
選擇器：
- 通過選擇器可以選中頁面中的指定元素，比如p的作用就是選中頁面中的所有p
p{}
聲明塊：
通過聲明塊來指定為元素設(shè)置的樣式
聲明塊由一個個聲明組成
聲明是一個名值對結(jié)構(gòu)，一個樣式名對應(yīng)一個樣式值，名和值之間以' : '連接，以' ; '結(jié)尾
color:red;
font: size 70px;
