首先，認(rèn)識(shí)鬼店，了解馍管，學(xué)習(xí)h5離不開w3c的網(wǎng)站
作為iOS開發(fā)，經(jīng)常會(huì)在webView中做一些js和本地交互薪韩。另外大多數(shù)的“公司協(xié)議”會(huì)使用html5本地文件。h5＋css＋javascrpt 也是我們前端的一大分支捌锭，一個(gè)懂前端的客戶端開發(fā)在競(jìng)爭(zhēng)上是非常加分的俘陷。h5相當(dāng)于一間屋子里面的家具，他負(fù)責(zé)告訴我們這間屋子里面有什么观谦。css相當(dāng)于家具上的油漆涂料和墻紙拉盾，他負(fù)責(zé)裝飾。javascrpt負(fù)責(zé)處理人（客戶端）怎么使用家具豁状。
如過你不了解html5捉偏，請(qǐng)先閱讀打破畏懼感，HTML5初識(shí)
css的添加樣式方法有三種：
1.在div中添加style屬性
2.在head里面添加style屬性
3.引入外部的樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的頁(yè)內(nèi)樣式</title>
<!--
相同級(jí)別的CSS樣式,遵循:
1. 就近原則
2. 疊加原則
-->
<!--第三種方式泻红，引入外部的樣式-->
<link href="css/index.css" rel="stylesheet">
<!--第二種方式夭禽，在head里面添加style屬性-->
<style>
/*body{*/
/*background-color: red;*/
/*}*/
div{
background-color: green;
font-size: 25px;
color: white;
}
p{
border:2px solid red;
color: orangered;
}
</style>
</head>
<body>
<!--第一種方式，在div中添加style屬性-->
<div style="background-color: aqua; color: red; font-size: 20px;">我是div標(biāo)簽我是div標(biāo)簽我是div標(biāo)簽</div>
<div>我是div我是div我是div我是div我是div</div>
<div>我是div我是div我是div我是div我是div</div>
<div>我是div我是div我是div我是div我是div</div>
<div>我是div我是div我是div我是div我是div</div>
<div>我是div我是div我是div我是div我是div</div>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽我是段落標(biāo)簽</p>
</body>
</html>
我們會(huì)發(fā)現(xiàn)一個(gè)實(shí)際操作問題谊路，如果有多個(gè)自定義風(fēng)格的div讹躯，我們?cè)趺磪^(qū)分我們的style是賦予哪個(gè)的呢？
這里引入css選擇器的概念：
1.標(biāo)簽選擇器
2.類選擇器
3.id選擇器
4.并列選擇器
5.復(fù)合選擇器
6.偽類選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的常見的選擇器</title>
<style>
/*標(biāo)簽選擇器*/
div{
color: red;
}
p{
color: blue;
}
/*類選擇器*/
.test1{
color: green;
}
/*id選擇器*/
#main{
font-size: 66px;
}
/*并列選擇器*/
#main , .test1{
border:1px solid orangered;
}
/*復(fù)合選擇器*/
p.test2{
font-size: 33px;
}
/*偽類選擇器*/
input:focus{
/*設(shè)置寬度和高度*/
width: 60%;
height: 30px;
/*去除外邊框*/
outline: none;
/*改變邊框的顏色*/
border:5px dashed orangered;
}
#main:hover{
width: 50%;
height: 150px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="main">我是div我是div我是div</div>
<div>我是div我是div我是div</div>
<div>我是div我是div我是div</div>
<p>我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p>我是段落標(biāo)簽我是段落標(biāo)簽</p>
<p class="test1">我是段落標(biāo)簽我是段落標(biāo)簽</p>
<div class="test1">我是div我是div我是div</div>
<p class="test2">我是div我是div我是div</p>
<p class="test3">我是div我是div我是div</p>
<input placeholder="我是占位文字">
</body>
</html>
