一、HTML中插入CSS
1、外部樣式表
定義：將樣式定義放在一個單獨的文件中，需要時在文檔中引用
步驟：
a、建立一個文件名爲myStyle.css的樣式表
h1, h2, h3{ color : blue;}
h1 { font-size: 18pt }
h2 { font-size: 16pt }
h3 { font-size: 14pt }
b、在<head>段使用<link>標記，可將一個外部樣式表文件鏈接到文檔中
<head>
<link rel="stylesheet" type="text/css" href=''myStyles.css" />
</head>
2、嵌入式樣式表
定義：用<style>元素將樣式包含在網頁內部，其作用僅限該網頁
注：<style>必須出現在<head>段內
格式：
<style type="text/css">
…樣式定義…
</style>
優點：樣式規則和標記元素在一個頁面裏，可以快速將兩者擰在一起，方便測試
3、內聯樣式表
定義：標記中包含一個style屬性，允許指定在標記顯示時的樣式
格式：
<h1 style="color: red">紅色標題列</h1>
二、語法
1、聲明分組
定義：在一個聲明塊內，可以有多個聲明。每個聲明必須以分號隔開
p {padding: 5px ; margin: 2px}
2、選擇器分組
注：可以分組放在一起，避免重複，每個選擇器必須以逗號隔開
h1, h2, h3 {padding : lem}
3、註釋
- /*註釋在此*/
- padding: 2px /*註釋在此*/
- /*
多行
註釋
*/
三、選擇器
1、元素選擇器
格式：元素 { 屬性：值；}
p { color : red; }
2、類選擇器
格式：.類名 {屬性：值；}
.big { color : red; }
例如：
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p class="big">This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li class="big">List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
</html></span>p.big{ color : red;} //隻影響p
注：先要定義class屬性值
3、id選擇器
格式：#id名 {屬性：值；}
#p {color :red ;}
div#p {color: red; }
4、包含選擇器
格式：div p {}
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<strong><h1>Heading <em>here</em></h1>
<p>head <em>sit</em></p></strong>
</body>
</html></span>p em {color: red; }是將<p>內的<em>元素格式化爲紅色，而<h1>內的<em>不會變
5、通配符選擇器
格式：*{ }
* {color: red; }
用於選擇所有元素
6、僞類選擇器
- a:link 是用在未訪問的鏈接的選擇器
- a:visited 是用在以訪問過的鏈接的選擇器
- a:hover 是用在鼠標光標放在其上的鏈接的選擇器
- a:active 是用在獲得焦點（比如，被點擊）的鏈接上的選擇器
三、字體
1、設置字體名稱（font-famile）
如：宋體，Times New Roman, Arial
2、設置字體傾斜程度（font-style）
屬性值：normal(默認)、italic（傾斜）、oblique（更傾斜）
3、設置字重（font-weight）
normal(400)、bold(700)、900是最總的字體
4、設置字體大小(font-size)
常用值：12px、14px、16px
四、文本屬性
1、橫向對齊（text-align）
屬性值：left right center
2、文本修飾 （text-decoration）
屬性值：none(默認)、underline(下劃線)、overline(上劃線)、line-through(刪除線)、blink(閃爍)
3、行高（line-height）
五、字體顏色和背景
1、文本顏色（color）
2、背景顏色（background-color）
初值爲透明
3、背景圖片（background-image）
4、背景圖片重複（background-repeat）
取值：repeat(默認)、no-repeat、repeat-x、repeat-y
六、字體設置及文本屬性練習
1.用CSS實現下面古詩屬性
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
text-align: center;
color: blue;
}
h1 {
color: red;
}
.p1 {
color: green;
}
.p2 {
background-color: orange;
}
.p3 {
background-color: yellow;
font-style: italic;
}
.p4 {
background-color: pink;
}
.p5 {
background-color: black;
font-style: oblique;
}
</style>
</head>
<body>
<div>
<h1>古詩兩首</h1>
<p class="p1"><b>靜夜思</b></p>
<p class="p2">李白</p>
<p class="p3">牀上明月光</p>
<p class="p4"><b>疑是地上霜</b></p>
<p class="p5">舉頭望明月</p>
<p class="p4"><b>低頭思故鄉</b></p>
<p class="p1"><b>春曉</b></p>
<p class="p2">孟浩然</p>
<p class="p3">春眠不覺曉</p>
<p class="p4"><b>處處聞啼鳥</b></p>
<p class="p3">夜來風雨聲</p>
<p class="p4"><b>花落知多少</b></p>
</div>
</body>
</html></span>2、用CSS實現下列格式輸出
<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a {
color: red;
}
.b {
color: purple;
}
.g {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="a">腦袋</li>
<li class="a">上肢</li>
<ul>
<li class="b">軀幹</li>
<li class="b">左臂</li>
<ul>
<li>左大臂</li>
<li>左小臂</li>
<li>左手</li>
<ol>
<li>大拇哥</li>
<li>二拇哥</li>
<li>三拇哥</li>
<li>無名指</li>
<li>小拇指</li>
</ol>
</ul>
</ul>
<ul>
<li class="g">右臂</li>
<ul>
<li>右大臂</li>
<li>右小臂</li>
<li>右手</li>
<ol>
<li>大拇哥</li>
<li>二拇哥</li>
<li>三拇哥</li>
<li>無名指</li>
<li>小拇指</li>
</ol>
</ul>
</ul>
</ul>
</body>
</html></span>