1、CSS的使用方式：
1、內聯樣式：不推薦使用
2、內部樣式：
在head標籤內定義style標籤，style標籤體內容就是css代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
div{
color: darkturquoise;
}
</style>
</head>
<body>
<div>hello css</div>
</body>
</html>
3、外部樣式
定義css資源文件然後在head標籤內，定義link標籤，引入外部的資源文件。如：
a.css文件：
div{
color: cyan;
}
html文件：
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="css/a.css">
</head>
注意：三種方式，css作用範圍越來越大。
2、CSS語法
2.1 格式
格式：
選擇器{
屬性名1：屬性值1；
屬性名2：屬性名2；
...
}
選擇器：篩選具有相似特徵的元素
2.3 選擇器
分類：
分類：
1、基礎選擇器
1.1 id選擇器：選擇具體的id屬性值的元素，建議在一個HTML頁面中id唯一。
語法：#id屬性值{}
<style>
#div1{
color: aqua;
}
</style>
...
<div id="div1">hello css</div> #則上面的div1只對這個起作用
<div id="div2">hello css1</div>
1.2 元素選擇器：選擇具有相同標籤名稱的元素
語法：標籤名稱{}
注意：id選擇器優先級高於元素選擇器。
<style>
#div1{ #id選擇器
color: aqua;
}
div{ #元素選擇器
color:red;
}
</style>
...
<div id="div1">hello css</div> #則上面的div1只對這個起作用，div優先級低於#div1
<div id="div2">hello css1</div> #上面div對此其左右
1.3 類選擇器：選擇具有相同class屬性值的元素
語法：.class屬性{} #前面加"點"
.div1{}
div< class="div1">
注意：類選擇器優先級高於元素選擇器
2、擴展選擇器
2.1 選擇所有元素：*
語法： *{}
2.2 並集選擇器：
選擇器1，選擇器2{}
2.3 子選擇器:選擇器1下的選擇器2
選擇器1 選擇器2{}
2.4 父選擇器：篩選選擇器2的父級標籤選擇器1
選擇器1>選擇器2{}
2.5 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
語法： 元素名稱[屬性名=‘屬性值’] 如：
input[type='text']{}
2.6 僞類選擇器：選擇一些元素的狀態
語法：元素：狀態
如控制超鏈接：<a>
狀態：
link：初始化狀態
visited：被訪問過的狀態
activate：正在訪問狀態
hover：鼠標懸浮狀態
例：
a:hover{
color: red;
} #即鼠標懸浮在上面時變紅色
屬性
屬性
1、字體、文本
font-size:字體大小
color:文本顏色
text-align:對齊方式
line-height:行高。單位px或%等
2、背景
background: url("img/logo.jpg") no-repeat center; /*添加背景圖片,不重複顯示且居中*/
3、邊框
border:四條邊整體邊框
border: 10px solid red; /*加邊框，邊框爲10像素且顏色爲紅色的實線*/
height/width:邊框的高寬
4、尺寸
5、盒子模型：控制頁面佈局
5.1 margin：外邊距,複合屬性。有margin-left/right/top/bottom。
.div2{
border: 5px solid red;
height: 200px;
width: 200px;
}
.div3{
border: 5px solid red;
height: 100px;
width: 100px;
margin: 50px;
}
......
<div class="div2">
<div class="div3"></div>
</div>
5.2 padding：內邊距
默認情況下內邊距會影響大小，設置盒子屬性讓width和height就是盒子最終大小。box-sizing:border-box.
.div2{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 50px;
box-sizing: border-box;
}
.div3{
border: 1px solid red;
height: 100px;
width: 100px;
/*margin: 50px;*/
}
5.3 float:浮動
<div class="div1">aaaaaa</div>
<div class="div2">bb</div>
<div class="div1">cc</div>
這三個默認是換行的。要想在同一行展示，可以選擇浮動：
.div1{float: left;}
.div2{float: left;}
.div3{float: right;}
案例：美化用戶註冊頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>註冊頁面</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*讓div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*設置邊框圓角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用戶註冊</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定義表單 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用戶名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td>
</tr>
<tr>
<td class="td_left"><label for="password">密碼</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手機號</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
</tr>
<tr>
<td class="td_left"><label>性別</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >驗證碼</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有賬號?<a href="#">立即登錄</a></p>
</div>
</div>
</body>
</html>
