首先，认识，了解，学习h5离不开w3c的网站
作为iOS开发，经常会在webView中做一些js和本地交互。另外大多数的“公司协议”会使用html5本地文件。h5＋css＋javascrpt 也是我们前端的一大分支，一个懂前端的客户端开发在竞争上是非常加分的。h5相当于一间屋子里面的家具，他负责告诉我们这间屋子里面有什么。css相当于家具上的油漆涂料和墙纸，他负责装饰。javascrpt负责处理人（客户端）怎么使用家具。
如过你不了解html5，请先阅读打破畏惧感，HTML5初识
css的添加样式方法有三种：
1.在div中添加style属性
2.在head里面添加style属性
3.引入外部的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的页内样式</title>
<!--
相同级别的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标签我是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我是div</div>
<p>我是段落标签我是段落标签我是段落标签</p>
<p>我是段落标签我是段落标签我是段落标签</p>
<p>我是段落标签我是段落标签我是段落标签</p>
<p>我是段落标签我是段落标签我是段落标签</p>
<p>我是段落标签我是段落标签我是段落标签</p>
</body>
</html>
我们会发现一个实际操作问题，如果有多个自定义风格的div，我们怎么区分我们的style是赋予哪个的呢？
这里引入css选择器的概念：
1.标签选择器
2.类选择器
3.id选择器
4.并列选择器
5.复合选择器
6.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS的常见的选择器</title>
<style>
/*标签选择器*/
div{
color: red;
}
p{
color: blue;
}
/*类选择器*/
.test1{
color: green;
}
/*id选择器*/
#main{
font-size: 66px;
}
/*并列选择器*/
#main , .test1{
border:1px solid orangered;
}
/*复合选择器*/
p.test2{
font-size: 33px;
}
/*伪类选择器*/
input:focus{
/*设置宽度和高度*/
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>我是段落标签我是段落标签</p>
<p>我是段落标签我是段落标签</p>
<p class="test1">我是段落标签我是段落标签</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>
网友评论