1.語法
1.1 內聯樣式，內部樣式，外部樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.內部樣式：在head元素裏面的style標籤裏寫樣式
此樣式可以被當前頁面衆多元素複用。 -->
<style>
/*CSS的註釋是這樣的*/
h2 {
color: blue;
}
</style>
<!-- 3.外部樣式:在單獨的css文件中寫的樣式，那個網頁
引用該文件，這個網頁就能複用這些樣式 -->
<link rel="stylesheet" href="my.css"/>
</head>
<body>
<!-- 1.內聯樣式：在元素的style屬性內直接
寫樣式，此樣式無法複用 -->
<h1 style="color:red;">CSS</h1>
<h2>CSS有三種用法</h2>
<p>1.內聯樣式</p>
<p>2.內部樣式</p>
<p>3.外部樣式</p>
</body>
</html>
同目錄下的my.css
p {
color: yellow;
}
效果圖：
1.2 繼承性，層疊性，優先級
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*1.繼承性：父類的樣式可以被子元素繼承。（顏色字體）*/
body{
font-family: "微軟雅黑","文泉驛正黑","黑體";
}
/*2.層疊性：給一個元素設置不同的聲明，其效果會疊加。*/
h1 {
color: red;
}
/*........*/
h1{
font-size: 50px;
}
/*3.優先級：給同一個元素設置相同的聲明，
效果以後者爲準，也就是就近原則。*/
h2 {
color: green;
}
/*....*/
h2 {
color: yellow;
}
}
</style>
</head>
<body>
<h1>李老師</h1>
<h2>範傳奇</h2>
</body>
</html>
效果圖：
2.選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.元素選擇器*/
/*2.類選擇器：選擇class等於某值的所有元素
。class是程序員根據邏輯自己給元素增加的分類。*/
.girl {
color: pink;
}
/*3.id選擇器：選擇id等於某值的唯一的元素。*/
#p4 {
color: yellow;
}
/*4.選擇器組：寫出一組選擇器，選中每個選擇器所對應的
目標的並集*/
.girl,#p4 {
font-weight: bold;
}
/*5.派生選擇器*/
/*5.1選擇某元素的子孫*/
#p5 b {
color: red;
}
/*5.2選擇某元素的兒子*/
#p5>b {
font-size: 30px;
}
/*僞類選擇器：根據元素的狀態選擇元素*/
/*6.1選擇未訪問過的超鏈接*/
a:link {
color: green;
}
/*6.2選擇已訪問過的超鏈接*/
a:visited {
color: red;
}
/*6.3選擇激活態（正在點）的按鈕*/
#i1:active {
background-color: blue;
}
/*6.4選擇有焦點的文本框/密碼框/文本域*/
#i2:focus {
background-color: green;
}
/*6.5選擇鼠標懸停態（觸碰）的圖片*/
img:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<p class="girl">李老師呀李老師</p>
<p>範傳奇呀範傳奇</p>
<p class="girl">王克晶呀王克晶</p>
<p id="p4">瞧你們那點破事</p>
<p id="p5">
北京市<u>海濱區<b>北三環</b>西路</u>甲18號<b>中鼎大廈</b>B座8層
</p>
<p>
<a href="http://www.tmooc.cn">達內</a>
<a href="http://doc.tedu.cn">文檔</a>
<a href="http://www.xiabian.cn">瞎編</a>
</p>
<p>
<input type="button" value="按鈕" id="i1"/>
</p>
<p>
<input type="text" id="i2"/>
</p>
<p>
<img alt="" src="../images/01.jpg">
</p>
</body>
</html>
效果圖：
