前言：
1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的文章是本人自己整理，尽量将开发中不常用到的剔除，将经常使用的拿出来，使需要的朋友能够真正快速入门，如果有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，一般会在3天左右更新一篇（全系列预计会有12篇）因为需要工作，所以只能在闲暇之余整理，如果有喜欢的朋友可以关注我，将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友，可以联系我，在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
另：有很多朋友私聊我说图片不能正常显示的问题，测试后发现简书上可以在windows和mac端完美显示，如果看不到图片麻烦移步简书链接
CSS简介
-
CSS(Cascading Style Sheets)：层叠样式表，它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
-
CSS的编写格式是键值对的形式
- 格式：属性名 : 属性值
color:blue; background-color:green; font-size:15px; - 格式：属性名 : 属性值
CSS的3种使用形式
-
行内样式（内联样式）：在标签的style属性中书写（标签都有style属性）
<!-- 行内样式 --> <!-- 字体大小为25,颜色绿色,背景色亮灰 --> <div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div> <!-- 字体颜色蓝色,边框宽度为1且为黑色 --> <h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>
效果：
-
业内样式：在本网页的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>
效果：
-
外部样式：在单独的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> ```
效果：
注意：开发中，一般都使用外部样式,结构比较清晰
CSS常用选择器
-
属性：通过属性的复杂叠加，才能做出漂亮的网页
-
选择器：通过选择器找到对应的标签设置样式
- 标签选择器：根据标签名找到对应的标签
<style> /* 标签选择器 */ /* div文字颜色为蓝色,字体大小25,边框为红色单边框 */ div{ color: blue; font-size: 25px; border:2px solid red; } </style>-
使用场景：一次性设置对应标签的时候
-
类选择器
/* 类选择器 */ .test1{ color: red; font-size: 30px; border:5px double green; }- 使用
<div class="test1">类选择器</div> <p class="test1">类选择器</p>-
使用场景：让需要它的标签主动去使用它
-
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{
}
注意条件：相邻，且同一级
- 属性选择器：可以将其看成数组（一维/二维数组）
div[name]{
}
div[name="Tom"]{
}
div[name][age]{
}
- 通配符：设置所有标签
*{
}
选择器的优先级与权值的关系
- 相同级别的选择器遵循：就近原则 > 叠加原则
- 不同类型的选择器：选择器的针对性越强，它的优先级就越高，这里涉及到权值的问题，先来看下面的表
| 选择器类型 | 权值 |
|---|---|
| 通配选择符 | 0 |
| 标签选择器 | 1 |
| 类选择器 | 10 |
| 属性选择器 | 10 |
| 伪类 | 10 |
| 伪元素 | 1 |
| id选择器 | 100 |
| important | 1000 |
- 原则：选择器的权值累计越高，优先级越高，如果权值相同，后定义的优先（就近原则）
- 优先级排序：important > 内联 > id选择器 > 类选择器 > 标签选择器|伪类|属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
-
HTML有N多标签，根据显示的类型，主要分为三大类
- 块级标签：独占一行，能随时设置宽度和高度（如：div、p、h1…h6、ul、li）
<style> /* div标签选择器 */ div{ /*背景色*/ background-color: yellow; } </style> <body> <div>我是div容器</div> <div>我是div容器</div> <div>我是div容器</div> </body>效果：
- 行内标签（内联标签）：多个行内标签能同时显示在一行，宽度高度取决于内容尺寸（如：span、a、label）
<style> /* span标签选择器 */ span{ /*背景色*/ background-color: red; } </style> <body> <span>我是span容器</span> <span>我是span容器</span> <span>我是span容器</span> <span>我是span容器</span> </body>效果：
- 行内-块级标签（内联-块级标签）：多个行内-块级标签可显示在同一行，能随时设置宽度和高度（如：input、button）
- 块级标签：独占一行，能随时设置宽度和高度（如：div、p、h1…h6、ul、li）
![Uploading Snip20160614_7_103697.png . . .]
```
<style>
/* input标签选择器 */
input{
/*背景色*/
background-color: yellow;
}
</style>
<body>
<input type="text">
<input type="date">
<input type="text">
<input type="date">
</body>
```
效果：
修改标签的显示类型 —— display/visibility
-
在开发中，我们经常需要将各种类型的标签拼凑在一起，而如果按照上面标签的类型来看，显然块级标签后就没办法再添加其他标签，这样也就大大降低了灵活性。这个时候我们就需要来看看`display属性，它们可以用来修改标签的显示类型，提高标签之间拼凑时的灵活性
-
display属性有4个值
- none：隐藏标签（同时隐藏内容和占位，也可以说同时隐藏结构）
- block：让标签变为块级标签
- inline：让标签变为行内标签
- inline-block：让标签变为行内-块级标签（内联-块级标签）
div{ /*设置背景色*/ background-color: red; } /* 隐藏 */ .noneDiv{ display: none; /*设置背景色*/ background-color: yellow; } /* 块级 */ .blockInput{ display: block; /*设置背景色*/ background-color:orange; } /* 行内 */ .inlineDiv{ display: inline; /*设置背景色*/ background-color: green; } /* 行内-块级 */ .inline-blockDiv{ display: inline-block; /*设置背景色*/ background-color: gray; } </style> <body> <div>默认的div</div> <div class="noneDiv">隐藏div标签</div> <div class="inlineDiv">变成行内标签的div</div> <div class="inline-blockDiv">变成行内-块级标签的div</div><br><br> <!--默认的input--> <input type="text"> <input type="text"> <!--变成块级标签的input--> <input class="blockInput" type="text"> <input class="blockInput" type="text"> </body>效果：
-
visibility属性有4个值
- visible：显示标签（默认）
- hidden：隐藏标签（只隐藏内容，但是依旧占位）
- collapse：这个属性主要用在表格中，它可以删除一行或一列，但不会影响表格的布局，而且被行或列占据的空间会留给其他内容，如果用在其他标签，则呈现hidden的效果
- inherit：规定应该从父标签继承visibility属性的值
<style> div{ /*高*/ height:100px; /*背景色*/ background-color: yellow; } /* 隐藏 */ .hiddenDiv{ visibility: hidden; } </style> <body> <div>div</div> <div class="hiddenDiv">隐藏的div</div> <div>div</div> </body>效果：
CSS属性分类
-
CSS有很多属性，如果根据继承性划分，主要分为两大类
- 可继承属性：父标签的属性值会传递给子标签（一般是文字控制属性）
- 所有标签可继承（visibility、 cursor）
- 继承（letter-spacing、word-spacing、white-space、
line-height、color、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction） - 块级标签可继承（
text-indent、text-align） - 列表标签可继承（
list-style、list-style-type、list-style-position、list-style-image）
<style> /* 文字控制类 */ body{ color:red; font-size:25px; } </style>- 不可继承属性：父标签的属性值不会传递给子标签（一般是区块控制属性）
<style> /* 区块控制类 */ div{ color:red; font-size:25px; } </style> - 可继承属性：父标签的属性值会传递给子标签（一般是文字控制属性）
-
总结：一般如果是大小、形状之类的一般都不可继承的
盒子模型
-
先来看看盒子里面的结构 —— 盒子由内容、内边距、边框、外边距构成
-
标准的盒子模型标准是这样的
-
如果所有浏览器都遵循这样的规则，那么就不会产生适配等问题，但是偏偏有个顽皮的熊老人（这个搅屎棍→ →）搞了自己的模型标准
-
也就是说网页上的每一个标签都是盒子，每个盒子都有4个属性
- content（内容）：盒子里面装的东西（网页中通常是指文字和图片）
- height：设置元素高度
- max-height:设置元素最大高度
- max-width：设置元素的最大宽度
- width：设置元素宽度
- min-height：设置元素最小高度
- min-width：设置元素最小宽度
- padding（填充，内边距）
- padding：在一个声明中设置所有内边距属性
- padding-top:设置元素的上内边距
- padding-right：设置元素的右内边距
- padding-bottom：设置元素的下内边距
- padding-lfet：设置元素的左内边距
<style> div{ /*这边直接使用复合属性padding:属性顺序为上右下左(顺时针)如果只设置2个值,那么第一个值指上下,第二个值指左右*/ padding: 25px 20px; /*背景颜色*/ background-color: blue; } </style> <body> <div>div标签div标签</div> </body>效果：
- margin（外边距）：让盒子与盒子之间保留一定空隙
- margin：在一个声明中设置所有外边距属性
- margin-top:设置元素的上外边距
- margin-right：设置元素的外边边距
- margin-bottom：设置元素的下外边距
- margin-lfet：设置元素的左外边距
<style> div{ /*外边距和内边距相似*/ margin: 30px 40px; /*背景颜色*/ background-color: darkmagenta; } </style> <body> <div>div标签div标签</div> </body>效果：
- border（边框）：盒子本身
- border是个复合属性，属性的顺序是（border-width，border-style，border-color）
- border是个复合属性，属性的顺序是（border-width，border-style，border-color）
<style> div{ /*边框设置 宽21px 双框 红色*/ border: 20px double red; } </style> <body> <div>div标签div标签</div> </body>效果：
- content（内容）：盒子里面装的东西（网页中通常是指文字和图片）
CSS3新特性
- RGBA透明度：RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，用来设置透明值
<style>
div{
/*设置宽高*/
200px;
height: 50px;
}
.test1{
background-color: rgba(123,0,0,1.0);
}
.test2{
background-color: rgba(123,0,0,0.8);
}
.test3{
background-color: rgba(123,0,0,0.0);
}
.test4{
background-color: rgba(123,0,0,0.6);
}
.test5{
background-color: rgba(123,0,0,0.4);
}
.test6{
background-color: rgba(123,0,0,0.2);
}
</style>
<body>
<div class="test1">div1.0</div>
<div class="test2">div0.8</div>
<div class="test3">div0.0</div>
<div class="test4">div0.6</div>
<div class="test5">div0.4</div>
<div class="test6">div0.2</div>
</body>
效果：
补充：既然有透明度，那么就有不透明度（最简单的蒙版效果）
<style>
div {
/*设置宽高*/
200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置不透明度*/
opacity:0.35;
}
</style>
<body>
<div>div1.0</div>
</body>
效果：
- 块阴影和圆角阴影：box-shadow text-shadow
<style>
div {
/*设置宽高*/
200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
/*设置块阴影
参数一:水平偏移
参数二:垂直偏移
参数三:模糊距离
参数四:阴影颜色
*/
box-shadow: 10px 10px 10px blue;
}
</style>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
效果：
- 圆角：border-radius
<style>
div {
/*设置宽高*/
200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
}
.test1{
/*底部左边*/
border-bottom-left-radius: 30px;
}
.test2{
/*顶部右边*/
border-top-right-radius: 30px;
}
.test3{
/*底部右边*/
border-bottom-right-radius: 30px;
}
.test4{
/*顶部左边*/
border-top-left-radius: 30px;
}
.test5{
/*四个角*/
border-radius: 10px;
}
</style>
<body>
<div class="test1">div</div>
<div class="test2">div</div>
<div class="test3">div</div>
<div class="test4">div</div>
<div class="test5">div</div>
</body>
效果：
- 边框图片：border-image(不常用，用到再说)
- 形变：transform: none |
[ ]（后面结合实例，便于理解）
CSS布局
-
默认情况下，所有网页标签都在标准流布局中（从上往下，从左往右，相互依赖）
-
脱离标准流（就是固定在一个地方），脱离标准流主要的两种方式有两种
-
注意：标签只要一浮动，它的类型就会被强制转为行内块级标签
- float属性：让标签浮动在父标签的左边和右边（显然不够灵活）
- left：浮动在父标签的最左边
- right：浮动在父标签的最右边
<style> #main{ background-color: yellow; 350px; height: 200px; } .test1{ background-color: red; float: left; } .test2{ background-color: blue; float: right; } </style> <body> <div id="main"> <div class="test1">左</div> <div class="test2">右</div> </div> </body>效果：
- position属性：结合left、right、top、bottom属性就不一样了（显然这个比较厉害）
- 注意：他的位置是相对于浏览器窗口来决定的
<style> #main{ background-color: yellow; 350px; height: 200px; } .test1{ background-color: red; position: absolute; top: 20px; left: 20px; } .test2{ background-color: blue; position: absolute; bottom: 20px; right: 20px; } </style> <body> <div id="main"> <div class="test1">左</div> <div class="test2">右</div> </div> </body>效果：
- float属性：让标签浮动在父标签的左边和右边（显然不够灵活）
居中
-
水平居中
- 如果是行内、行内块级标签，设置text-align: center;
<style> #main{ background-color: yellow; 350px; height: 200px; /*设置内容水平居中(可继承)*/ text-align: center; } span{ background-color: blue; } </style> <body> <div id="main"> <span>行内标签</span> </div> </body>效果：
- 如果是块级标签，则需设置 margin: 0 auto;
<style> #main{ background-color: yellow; 350px; height: 200px; /*设置内容水平居中(可继承)*/ text-align: center; } .test1{ 200px; background-color: blue; text-align: center; margin-left: auto; margin-right: auto; /*或者*/ /*margin: 0 auto;*/ } </style> <body> <div id="main"> <div class="test1">块级标签</div> </div> </body>效果：
- 如果是行内、行内块级标签，设置text-align: center;
-
垂直居中
- 如果是行内、行内块级标签，设置line-height:总高度;
<style> #main{ background-color: yellow; 350px; height: 200px; /*设置内容水平居中(可继承)*/ text-align: center; } .test1{ 350px; height: 30px; background-color: blue; /*设置垂直居中,让它等于父标签的高度*/ line-height: 200px; } </style> <body> <div id="main"> <span class="test1">行内标签</span> </div> </body>效果：
- 如果是块级标签，需要通过定位来做（一般不会将块级标签做垂直居中操作）
<style> #main{ background-color: yellow; 350px; height: 200px; /*设置内容水平居中(可继承)*/ text-align: center; /*告诉父标签使用绝对定位*/ position: relative; } .test1{ 200px; height: 30px; background-color: blue; /*重写,设置内容居中*/ line-height: 30px; margin: 0 auto; /*设置相对路径*/ position: absolute; top:50%; left:50%; /*平移使其与父标签居中显示*/ transform: translate(-50%, -50%); } </style> <body> <div id="main"> <span class="test1">行内标签</span> </div> </body>效果：
- 如果是行内、行内块级标签，设置line-height:总高度;
昨晚的文章不完整，这个才是第二篇的完整版，对造成的不便感到抱歉，综合实例单独做一篇吧！