html5快速入门（二） - 淼淼森_H5之家 - 中国HTML5教程资源分享第一站

前言：

1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等

CSS简介

CSS(Cascading Style Sheets)：层叠样式表，它用来控制HTML标签的样式，在美化网页中起到非常重要的作用

CSS的编写格式是键值对的形式

格式：属性名 : 属性值

color:blue; background-color:green; font-size:15px; CSS的3种使用形式

行内样式（内联样式）：在标签的style属性中书写（标签都有style属性）

<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>  <h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>

效果：

行内样式.png

业内样式：在本网页的style标签中书写（因为body标签用来描述内容和结构，其它东西都放到head中,所以将业内样式写在head标签内）

<head> <meta charset="UTF-8"> <title>CSS页内样式</title>  <style> /* 标签选择器 */ /* div文字颜色为蓝色,字体大小25,边框为红色单边框 */ div{ color: blue; font-size: 25px; border:2px solid red; } /* p文字颜色为橘色,字体17,边框为紫色双边框宽度为5 */ p{ color: orange; font-size: 17px; border:5px double blueviolet; } </style> </head> <body> <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>

效果：

业内样式.png

外部样式：在单独的CSS文件中书写，然后在网页中用link标签进行引用
- 先新建一个css文件，在css文件内书写我们需要的样式

``` div{ color: blue; font-size: 25px; border:2px solid red; } p{ color: orange; font-size: 17px; border:5px double blueviolet; } ``` - 然后引入外部样式 <br><br> ``` <head> <meta charset="UTF-8"> <title>CSS外部样式</title>  <link rel="stylesheet" href="css/index.css"> </head> <body> <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> ```

效果：

外部样式.png

注意：开发中，一般都使用外部样式,结构比较清晰 CSS常用选择器

属性：通过属性的复杂叠加，才能做出漂亮的网页

选择器：通过选择器找到对应的标签设置样式

标签选择器：根据标签名找到对应的标签

使用场景：一次性设置对应标签的时候

类选择器

/* 类选择器 */ .test1{ color: red; font-size: 30px; border:5px double green; }

使用

使用场景：让需要它的标签主动去使用它

id选择器

/* ID选择器 */ #main{ font-size: 50px; }

使用：

<div id="main">id选择器</div>

使用场景：全局只让一个标签占有（独一无二）

并列选择器（可以理解为或）

/* 并列选择器(或) */ #main, .test1{ border:10px solid orange; }

使用场景：只要有其中一个选择器就可以使用选择器内的样式

复合选择器（可以理解为且）

/* 复合选择器(且,前面不可以是ID选择器) */ p.test1{ color: yellow; }

使用场景：同时拥有2个选择器的标签便可以使用选择器内的样式

后代选择器

/* 后代选择器前面为父标签，后面为子标签 */ div a{ color: darkgray; }

使用场景：设置父标签内的所有子标签（包括子标签内的相同标签的子标签）的时候

直接后代选择器

/* 直接后代选择器 */ div > p{ font-size: 90px; }

使用场景：设置父标签的子标签的时候

伪类

input:focus{ /* 获得焦点 */ }

使用场景：当标签激活焦点的时候触发

伪元素：和伪类使用相似

div.test1:first-letter{ } CSS不常用选择器

相邻兄弟选择器：与标签上下相邻的同一级标签

div + p{ }