什麼是CSS？
CSS是層疊樣式表（cascading style sheets）
CSS是給html化妝的。
如何使用CSS？
三種方式：
內聯方式
內部樣式
外部樣式
<!doctype html>
<html>
<head>
<title>如何使用CSS</title>
<meta charset="utf-8"/>
<!-- 內部樣式 -->
<style type="text/css">
h2 {
color:red;
}
</style>
<!-- 引用style.css -->
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<!-- style屬性中寫內聯樣式 -->
<h1 style="color:blue;">使用CSS</h1>
<h2>CSS有3種用法</h2>
<p>1.內聯樣式</p>
<p>2.內部樣式</p>
<p>3.外部樣式</p>
</body>
</html>
CSS語法：
語法規範
規則特性
樣式優先順序
語法規範：
多個樣式規則組成
每個樣式有兩個部分：選擇器和樣式宣告
規則特性：
繼承性
層疊性
優先順序
相同的樣式，如果重複定義，以最後一次的定義為準
<!doctype html>
<html>
<head>
<title>樣式特性</title>
<meta charset="utf-8"/>
<style type="text/css">
/*繼承性*/
body {
font-family:'微軟雅黑','文泉驛正黑','黑體';
}
/*層疊性*/
h1 {
color:red;
}
h1 {
background-color: #ccc;
}
/*優先順序*/
p {
color:red;
}
p {
color:blue;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<h1>CSS很好</h1>
<p>用了就知道</p>
</body>
</html>
CSS選擇器：
元素選擇器
類選擇器
id選擇器
選擇器組
派生選擇器
偽選擇器
<!doctype html>
<html>
<head>
<title>選擇器</title>
<meta charset="utf-8"/>
<style type="text/css">
/*類選擇器，選中所有class="importent"的元素*/
.importent {
color:red;
}
/*ID選擇器，根據id選中唯一的元素*/
#a1 {
color:blue;
}
/*選擇器組，給一組選擇器選中的所有元素統一設定樣式*/
.importent, #a1 {
background-color:#ccc;
}
/*派生選擇器：後代、子元素*/
/*後代選擇器*/
/*在p1下選擇所有的b元素*/
#p1 b {
color:red;
}
/*子元素選擇器*/
/*>表示只找兒子，不找孫子*/
#p1>b {
font-size:50px;
}
/*偽類選擇器*/
/*選擇從來沒點選過的超連結*/
a:link {
color:blue;
}
/*選擇已經訪問過的超連結*/
a:visited {
color:red;
}
/*選擇啟用(正被點中)的元素*/
#btn:active {
background-color:blue;
}
/*選擇滑鼠懸停的目標*/
img:hover {
width:450px;
height:350px;
}
/*選擇有焦點的文字框*/
#t1:focus {
background-color: red;
}
</style>
</head>
<body>
<h1 id="a1">Hello.</h1>
<h2 class="importent">How are you?</h2>
<h3 class="importent">I'm fine, thank you.</h3>
<p id="p1">
北京市<u>海淀區<b>北三環</b>西路</u>甲18號<b>中鼎</b>大廈B7
</p>
<p><a href="http://www.tmooc.cn">百度</a></p>
<p><input type="button" value="點我" id="btn"/></p>
<p><img src="../images/pig.png"/></p>
<p><input type="text" id="t1"/></p>
</body>
</html>
解釋圖片如下：
CSS宣告
border與box
背景
背景色，背景圖片
border屬性：用來設定元素的邊框
四邊設定：border：width style color；
<!doctype html>
<html>
<head>
<title>border</title>
<meta charset="utf-8"/>
<style type="text/css">
/*四邊設定border*/
p {
border:1px dashed #ccc;
width:500px;
height:100px;
}
h1 {
border-left:15px solid #ccc;
border-bottom:2px solid #ccc;
}
div {
width:300px;
height:55px;
border:1px solid red;
overflow:auto;
}
</style>
</head>
<body>
<h1>達記-蒼老師傳</h1>
<p>蒼者，Java老師也！</p>
<div>
蒼老師，系達內優秀的Java講師，Java教學改革的先驅！
同時也是一名攝影大師，他拍的片都很麼麼噠，人送綽號小冠希！
他最擅長捕捉肉體和靈魂的契合點，折射出對人性的思考與鞭撻！
</div>
</body>
</html>
單邊設定：
border-left：width style color；
border-right：width style color；
border-top：width style color；
border-bottom：width style color；
border 顏色表示的三種方法
overflow：當內容溢位元素框是如何處理
visible
hidden
scroll
auto
box模型
框模型（box model）定義了元素邊框處理元素邊距，邊框和外邊距的方式
border
margin
padding
四邊設定
單邊設定
<!doctype html>
<html>
<head>
<title>box</title>
<meta charset="utf-8"/>
<style type="text/css">
p {
border:1px dashed blue;
}
div {
width:100px;
height:50px;
border:3px solid red;
}
/*四邊設定內外邊距*/
#d2 {
padding:20px;
margin:40px;
background-color:#ccc;
}
/*單邊設定*/
#d3 {
padding:20px 40px 20px 40px;
margin:20px 40px 20px 40px;
}
#d4 {
padding-top:20px;
padding-right:40px;
padding-bottom:20px;
padding-left:40px;
margin-top:20px;
margin-right:40px;
margin-bottom:20px;
margin-left:40px;
}
/*對邊設定*/
#d5 {
padding:20px 40px;
margin:20px auto;
}
</style>
</head>
<body>
<h1>box模型</h1>
<p>塊實際佔寬=width+2padding+2margin+2border</p>
<p>塊實際佔高=height+2padding+2margin+2border</p>
<!-- 預設情況下，div的內外邊距都是0 -->
<div id="d1">d1</div>
<div id="d2">d2</div>
<div id="d3">d3</div>
<div id="d4">d4</div>
<div id="d5">d5</div>
</body>
</html>
背景
背景色
background-color屬性用於為元素設定背景色，
該屬性接受任何合法的顏色值
背景圖片
background-image屬性用於設定背景圖片
預設值是none，表示背景上沒有放置任何圖片
預設情況下，背景圖片在水平和垂直方向上重複出現建立一種稱為牆紙的
效果
background-repeat屬性可以控制背景圖片的平鋪效果
可取值：
repeat：在垂直方向和水平方向上重複，位重複值
repeat-x
repeat-y
no-repeat：僅顯示一次
background-position屬性用於改變背景圖片在元素的位置
該屬性的取值為：
x% ，y%
x y
left
center
right
top
bottom'
預設情況下，背景影像會隨著頁面的滾動而移動
可以通過background-attachment屬性來改變此特性
預設值是scroll：預設會隨文件滾動
可取值fixed：背景圖片固定，並不隨頁面的其餘部分滾動
常用語實現稱為水印的影像
<!doctype html>
<html>
<head>
<title>背景</title>
<meta charset="utf-8"/>
<style type="text/css">
/*設定背景色*/
body {
background-color:#ccc;
}
/*設定背景圖片*/
body {
background-image:url("../images/background.png");
}
/*設定圖片平鋪效果*/
body {
background-repeat:repeat;
}
/*設定背景圖相對位置*/
.airplane {
border:1px solid red;
width:150px;
height:150px;
margin:10px auto;
background-image: url("../images/airplane.png");
background-repeat: no-repeat;
background-position: center;
}
/*固定背景圖片*/
body {
background-attachment: fixed;
}
/*整體設定背景*/
.hero {
width:150px;
height:150px;
border:1px solid red;
margin:10px auto;
background: url("../images/hero0.png") no-repeat center;
}
</style>
</head>
<body>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="airplane"></div>
<div class="hero"></div>
</body>
</html>