Web前端之CSS详解20180329
一、CSS概述
html显示效果有限，所以单独成立了一门语言就做css,
css是层叠样式表，用来定义网页的显示想过，可以解决html代码对样式定义的重复，
简单来说就是，css将网页内容和显示样式进行分离，降低了耦合性，提高了显示功能。
二、css和html相结合的方式
css和html在网页代码中相结合的方式有四种：
1.style属性方式
由于每一个html标签中都有一个style样式属性，所以可以利用标签中style属性来改变每个标签的显示样式。这个属性的值就是css代码
css中的属性与属性之间用;隔开，属性与属性值之间用:隔开
例：
<p style="bakegroud-color:#ffoooo;color:#ffffff">
段落内容
</p>
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改
2.style标签方式(内嵌方式)
使用style标签的方式，也就是在head标签中加入style标签(在head的原因，一旦加载到css修饰的标签就可以显示出样式来)，对多个标签进行统一修改。
其中style标签中要指明其类型属性type的值，表明使用什么东西去解析style中的代码，
并且style中的css代码要指明修饰(作用)的是哪个区域(标签)，也就是css代码还要被{}起来并在前面写明修饰的是谁(表示这段代码修饰的对象)，如下所示：
<head>
<style type="text/css">
p{color:#ff0000;}
</style>
</head>
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活
当head中有style标签定义了区域的样式，同时区域标签中又用style属性定义了显示的样式，这时显示样式的过程是，由于一开始就读到区域的样式了，一旦读到区域标签就显示出head中的样式来，读完区域标签时，读到区域的属性时，这是如果有同类的显示样式则会被新的，也就是style属性中定义的样式覆盖，即以最后加载的为准。这就是样式的重叠。
3.导入方式
当多个页面引用同样的样式时，这时为了不在每个页面(html)都复制相同的css代码，则把css代码独立出来形成一个css文件，让页面进行引用，即在页面的头部中加入style标签并引用，代码如下：
<head>
<style type="text/css">
@import url(div.css);
@import url(span.css);
</style>
</head>
其中div.css和span.css为独立出来的css文件。
注意，url括号后面必须要用分号结束，如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。
如果有多条导入，那么就要导入多条，如果直接在页面中导入则会很麻烦。由于导入语句也是css代码所以可以把导入语句单独出来形成一个css文件，这样页面只需包含这个文件即可。
代码如下：
<head>
<style type="text/css">
@import url(1.css);
</style>
</head>
其中1.css中的代码如下：
@import url(div.css);
@import url(span.css);
css代码的注释符号为/**/
把div，span等类型的区域分别形成css文件的好处(按类型形成css文件)，在于粒度小了，便于复用，同时每个类型又都是独立的，也不存在重复的说法，所以这么做，同时在加上综合文件，也不会影响到html页面。
4.链接方式
使用html中，head标签中的link标签来实现，将样式文件连接进来的方式
<head>
<link rel="stylesheet" href="1.css" type="text/css"/>
<style type="text/css">
/*@import url(1.css);*//*css代码注释*/
</style>
</head>
其中link 的rel属性表示链接文件与当前文件的关系，比如上例中表示连接的文件是样式表，用于显示样式
href属性指向要连接的文件
type属性表示连接进来文件的类型。
这种导入方式与前面的style导入方式不同的是，link导入是html代码链接的,style导入是通过css代码导入的。
注意，可以通过多个link标签链接进来多个css文件，重复样式以最后链接进来的css样式为准。
三、样式优先级
一般情况下，样式是会覆盖的，那么谁覆盖谁呢，其中的优先级如下：
由外到内,由上到下。优先级由低到高。
也就是说一般情况下，后面加载的为准。
之所以说一般情况下，是因为里面还涉及到一些细节的优先级问题
四、css代码格式(css代码语法)
选择器名称{属性名：属性值；属性名：属性值；...}
属性与属性之间用分号隔开
属性与属性值直接用冒号连接
如果一个属性有多个值的话，那么多个值之间用空格隔开。
其中"选择器名称"是，样式要作用的标签，表示样式要作用在哪个(种)标签上。
其中"{}"表示定义样式的区间，里面是样式的内容，内容是由属性和属性值组成。
五、CSS选择器
选择器
就是指定css要作用的标签(容器)，那个标签的名称就是选择器，意为：选择哪个容器。
选择器共有三种：
I、html标签名选择器，使用的就是html的标签名。
II、class选择器。就是使用标签中的class属性。
III、id选择器，其实使用的是标签中的id属性。
每个标签都定义了class属性(专门给css样式加载的属性)和id属性，用于对标签进行标识，方便对标签进行操作。
在定义中，多个标签的class属性值可以相同，而id值要唯一，因为js中经常用。
注意，class选择器比html标签名选择器优先级高，也就是说越少数优先级越高
所以，同时id选择器的优先级又比class选择器高。那么还有更高的么，就是不用选择器的(不用加载的)，直接使用标签中的style属性写css代码的，优先级更高。
也就是
优先级：
标签选择器<类选择器<id选择器<style属性
1.class选择器
在标签中定义class属性并赋值，通过 标签名.class值 对该标签进行样式设置。
相同标签设置不同样式的时候，用class进行区分。
当有十个div标签5个相同样式，另外五个又是相同样式，这时可以把五个归为一类(class属性值相同)，这样来设置样式
例如：
<head>
<style type="text/css">
div{
backgroud-color:#fff;
}
div.haha{
backgroud-color:#ff3;
}
</style>
</head>
<body>
<div>555</div>
<div class="haha">123</div>
</body>
注意，不但可以对多个相同标签进行样式设定，还可以对不同标签进行相同样式设定。
对不同标签进行统一样式设定时，如果还是使用 标签名.class值 的形式，则太麻烦并且还有重复代码，解决这个问题的方法是，使用 .class值 的形式 ，表示所有class属性值相同的标签使用相同的样式，
代码如下：
.haha{
backgroud-color:#ff3;/*作用于所有class属性值为haha的标签*/
}
<div class="haha">123</div>
<span class="haha">123</span>
<p class="haha">123</p>
同时可以预定义类选择器样式，实现动态显示样式，具体实现方法:
事先定义多个class属性值的选择器(内部有css显示样式)，当有需要的时候，通过修改(指定)标签中class属性为某个值，就可以显示这个class属性值对应的显示样式
.haha{
backgroud-color:#ff3;/*作用于所有class属性值为haha的标签*/
}
.hehe{
backgroud-color:#fff;/*作用于所有class属性值为haha的标签*/
}
<div class="haha">123</div>
<span class="hehe">123</span>
<p class="haha">123</p>
2.id选择器
在标签中定义id属性并赋值，通过 标签名#id值 对该标签进行样式设置。
对不同标签进行统一样式设定时，如果还是使用 标签名#id值 的形式，则太麻烦并且还有重复代码，解决这个问题的方法是，使用 #id值 的形式 ，表示所有id属性值相同的标签使用相同的样式，
通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。所以id通常都是为了去标识页面中一些特定区域使用的。
代码如下：
#haha{
backgroud-color:#ff3;/*作用于所有class属性值为haha的标签*/
}
<div id="haha">123</div>
3.扩展选择器
1).关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
多个标签时，只操作页面中某个标签中的该标签，也可以用此选择器。
例：
p{color:#00ff00;}
/*只操作页面中p标签中的b标签*/
p b {/*关联选择器，选择器中的选择器，如果还要嵌套则在b后面加空格再加标签，如p b a*/
color:#ffooo;
}
<p>123<b>df</b>fdf</p>
2).组合选择器
对多个不同选择器(多种选择器)进行相同样式设置的时候应用此选择器。
例：
p,div{color:#ff0000;}
.haha,p b{color:#ff0000;}
<p>123</p>
<div>dff</div>
<p>123<b>df</b>fdf</p>
注：多个不同选择器要用逗号隔开。
3).伪元素(伪标签)选择器
其实就在html中预先定义好的一些选择器。称为伪元素(伪标签)。是因为css的术语。
伪元素(伪标签)，不是真正的标签，代表的是标签的某些状态。伪元素必须要先去找标签，并要用这些 状态和标签相结合
伪元素(伪标签)选择器格式:
标签名:伪元素(状态)。
类名 标签名。
类名:伪元素。
都可以
a:link 超链接未点击状态。
a:visited 被访问后的状态
a:hover 光标移到超链接上的状态(未点击)
a:active 点击超链接时的状态(事件(瞬间)效果，鼠标按的时候不松开时的状态)
通常点击前和点击后的效果是一样的，
样式效果顺序，也就是加载的顺序：L(点前) - V(点后) - H(悬停) - A(瞬间)
P:first-line 段落的第一行文本,
p:first-letter 段落的第一个字母,ie6浏览器不支持
:focus 具有焦点的元素,ie6浏览器不支持，在firefox中可以看到效果(省略了前面的标签，也就是标签都支持，一般是是在文本框里面用的多，用于点击文本框时的效果)
例：
hr标签为横线
a:link{
color:#fff;
}
a:hover{
color:#fff;
}
p:first-letter{
color:#fff;
}
input:focus{/*点击文本框时，背景变为蓝色，ie6浏览器不支持*/
background-color:#09f;
}
<input type="text"/>
其他标签也支持如上这些状态，也就是其他标签也支持伪元素选择器，比如：
div:hover{/*ie6浏览器不支持*/
color:#fff;
}
css api手册有所有的
六、css样式的结合应用
1.无序项目列表与 css样式的结合应用
ul标签：无序项目列表(类似word上的项目)
li标签： ul的子项
ul{
list-style-type:none;
list-style-image:url(1.bmp);/*ul中的每一项前面的符号为1.bmp图片*/
}
<ul>
<li>无序项目列表</li>
<li>无序项目列表</li>
<li>无序项目列表</li>
</ul>
2.表格与css样式的结合应用
table{
border-bottom:#0C0 double 3px;
border-left:#F00 solid 3px;
border-right:#FF0 dashed 3px;
border-top:#0C0 groove 3px;
width:500px;
}
table td{
border:#0CF dotted 1px;
padding:20px;/*类似表格标签中的cellpadding属性*/
}
<table>
<tr>
<td>单元格一</td>
<td>单元格一</td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格一</td>
</tr>
</table>
其中的边框，也就是border不光表格有div也有，也就是只要是区域都有，如：
div{
border:#F00 solid 3px;
height:200px;
width:400px;
}
3.输入文本框与css样式的结合应用
input {
border:none;
border-bottom:#000 1px solid;
}
.haha{/*形成可输入数据的表格*/
border:none;
}
姓名：<input type="text" />成绩：<input type="text" />
<table>
<tr>
<td><input type="text" class="haha" /></td>
<td><input type="text" class="haha" /></td>
</tr>
<tr>
<td>单元格一</td>
<td>单元格一</td>
</tr>
</table>
4.滤镜
和ps中类似，就是已经将某些常见的效果进行了封装，只要导入数据，立马就能显示效果。
css中的滤镜，在很多框架中已经封装好了
在网页中的图片的变换，都是可以通过滤镜做的，如滤镜中的fade
css api手册有所有的
七、css的盒子模型
div加css可以完成布局，并且比表格的方式灵活的多，所以现在最流行的就是div加css。
使用div加css完成布局时，首先要的就是把数据放到各个div区域中，这个区域就叫盒子，
具体来说，
用来封装数据的一片区域就叫css的盒子，
css盒子模型的基本内容有三项，
1).边框：border
上border-top
下border-bottom
左border-left
右border-right
2).内边距:padding(当盒子中数据太少时，可能下边距和右边距就不是该属性值了;
如果是两个属性值，则第一个是上下边距，第二个是左右边距，例：padding:20px 100px
如果是三个属性值，则第一个是上边距，第二个是左右边距，第三个是下边距例：padding:20px 100px 200px
如果是四个属性值，则第一个是上边距，第二个是右边距，第三个是下边距例，第一个是左边距：padding:20px 100px 200px 300px)
上padding-top
下padding-bottom
左padding-left
右padding-right
3).外边距:margin(所谓外边距，就是盒子距离其他盒子的距离，即盒子之间的距离，倘若某个方向上没有盒子，则表示的是距离整个页面边框(其实是body标签)的距离。当限定了盒子的高度和宽度时，可能下边距和右边距就不是该属性值了;)
上margin-top
下margin-bottom
左margin-left
右margin-right
注意当区域margin:0px时，会发现区域距离页面上边框还有一段距离，这是正是因为区域的外边距是和body之间的距离，而body距离页面上边框还有一段固定的距离，所以会这样。解决的方法是，
改变body的样式：
body{
margin:0px
}
代码如下：
/*
body{
margin:0px;
}
*/
div{
border:#09F solid 1px;
height:100px;
width:200px;/**/
}
#div_1{
/*border-bottom:#F60 2px dashed;*/
background-color:#F90;
/*padding:20px 100px 200px 300px;上 右 下 左
margin:0px;*/
float:left;
}
#div_2{
background-color:#0CF;
float:left;
}
#div_3{
background-color:#3F0;8
clear:left;/**/
}
<div id="div_1">
第一个盒子11第一个盒子11
</div>
<div id="div_2">
第二个盒子22
</div>
<div id="div_3">
第三个盒子33
</div>
八、css的布局
每一div区域都是一个块区域并带了换行。
布局，就涉及到布局属性
1.css的布局-漂浮(float属性)
属性值left：文本(定义了该属性的标签(选择器)的下一个标签(选择器/区域))流向对象(定义了该属性的标签(选择器))的右边，即当前对象(定义了该属性的标签(选择器))定义在最左边
属性值right：文本流向对象(标签(选择器))的左边
代码：
#div_1{
/*border-bottom:#F60 2px dashed;*/
background-color:#F90;
/*padding:20px 100px 200px 300px;上 右 下 左
margin:0px;*/
float:left;
}
漂浮可以让默认竖排列的变成横排列。
相对应的，还有清楚漂浮的属性：clear
clear:
属性值none 默认值，允许当前对象(定义了该属性的标签(选择器))两边都可以有浮动对象
left 不允许左边有浮动对象
right 不允许右边有浮动对象
both 都不允许
漂浮可以觉得标签(区域)排序的问题，但是漂浮要根据元素位置来确定漂浮的位置，相对来说(定位)位置不够准确，要微调。
手册上也有示例。
2.css的布局-定位
使用position属性，也就是定位属性，可以让盒子处于页面中的任意位置。
属性值，
static 无特殊定位遵循html规则
absolute 将对象(当前标签(选择器))从文档流中拖出，也就是说当前对象从当前图层脱离出来，形成新的图层，(重叠的部分)新的图层会覆盖当前图层，被脱离出来的当前对象再通过left top等属性就可以确定其在新图层中的位置。如果有程序修改left top值就会导致当前对象位置不断变化，也就是当前对象会动起来。
其中left top等属性相对的是最接近的并且定义了absolute的父对象(父节点(标签))，如果都没有的话，那么就依据(相对)body对象。
relative:对象不可层叠(absolute 可以重叠)，但依据left ,right,top,bottom等属性在正常的文档流中偏移位置，也就是说，产生新图层后，当前对象在旧图层的位置依然保留，其他对象不会去占用那个保留的位置。
同时也符合规则：
left top等属性相对的是最接近的并且定义了absolute的父对象(父节点(标签))，如果都没有的话，那么就依据(相对)body对象。
代码如下：
#div_0{
background-color:#CCC;
height:400px;
width:400px;
position:relative;
top:100px;
left:100px;
}
#div_1{
background-color:#F90;
position:relative;
top:20px;
}
#div_2{
background-color:#0CF;
width:220px;
}
#div_3{
background-color:#3F0;8
}
<div id="div_0">
<div id="div_1">
第一个盒子11第一个盒子11
</div>
<div id="div_2">
第二个盒子22
</div>
<div id="div_3">
第三个盒子33
</div>
</div>
3.css的布局-图文混排
先将数据用标签进行封装
代码如下：
#imgtext{
border:#06F dashed 1px;
width:180px;
}
#img{
float:right;
}
#text{
color:#F60;
font-family:"华文隶书";
}
<div id="imgtext">
<div id="img">
<img src="9.bmp" />
</div>
<div id="text">
这是一个美女，说明文字。
一切尽在不言中。哇
！这是一个美女，说明文字。
一切尽在不言中。哇！
这是一个美女，说明文字。
一切尽在不言中。哇！
</div>
</div>
4.css的布局-图像签名
需要用到定位属性，最好当前定位属性的对象的父对象也是定位属性的，这样移动整个区域(父对象)，当前定位属性也是定位的。
代码如下：
#text{
font-family:"华文隶书";
font-size:24px;
position:absolute;
top:80px;
left:10px;
}
#imgtext{
border:#F60 dotted 1px;
width:500px;
position:absolute;
top:100px;
}
<div id="imgtext">
<div id="img">
<img src="1.jpg" height="300" width="500" />
</div>
<div id="text">
花丛中的美女，我的！
</div>
</div>
效果会导致文本文字显示在图片，但是很显然，下载图片下来的时候文本是不会在图片上的。
