CSS整理

css的引入方式

css的引入方式一般来说有三种，分别为

1.外部引入样式表，这种方式最为常用，一般由link语句引入

< link href="css/style.css" rel="stylesheet" type="text/css" >.

此种方法实现了内容和样式的分离，也是最常用的方法，能很方便的复用，利于阅读和维护，但是会产生额外的请求，优先级也不高。

2.在Html头部用style包起来

<style type="text/css">
    div{
        margin:0;
        }
 </style>

适合单页面开发时候应用，不会产生额外的请求，但是不利于复用，会影响HTML的结构。

3.行间样式，在标签里面直接写入样式

<div style="color:red;"></div>

这种方式优先级高，但是不利于代码维护，样式和内容没有分离，影响阅读体验。

这三种引入方式权重是从小到大依次排列的，当样式上有冲突的话会以后面的引入方式的内容显示。

css选择器

在这里先只介绍css常用的选择器，css3选择器先不做介绍

1.类选择器(class选择器)

.btn{
        width:20px;
    {

2.id选择器

#btn{
        width:20px;
    {

3.元素选择器

p{
    color:red:
 {

4.群组选择器(偏中与代码优化)

p,#btn,.btn{
                color:black;
            }

5.父子选择器(所有子集，包括子集的子集)

ul li{
        border:solid;
     {

6.伪类选择器()

a:hover{
        color:red;
        }

7.伪元素选择器

floa及清除的方法

浮动在布局中会经常被使用，需要声明的是css中任何元素都可以被浮动，被浮动的元素会产生一个块级的框，无论他是何种元素，但是元素被浮动后会产生一些负面的效果(比如：撑不开父级的高度，margin设置值显示不正常)，这就要清除浮动来消除负面的效果了，清除浮动常用的有以下几种：

1.对父级设置高度
出现父级宽度没有被撑开或者浮动导致下面的元素于浮动元素重叠的情况就可以用这种简单的方法解决。

2.clear：both.清除浮动。
这种方法就是在父级结束前创建一个元素，在他的属性里面加入一个clear:both/left/right;这样就可以清楚你想要清楚地浮动元素了。如下:

HTML片段
<div class="Fl">
    <div class="left"></div>
    <div class="right"></div>
    <div class="clear"></div>
</div>

css片段

.left{
    height: 300px;
    width: 200px;
    border: solid;
    float: left;
}
.right{

    height: 300px;
    width: 200px;
    border: dashed;
    float: right;
}
.clear{
    clear: both;
}

这样就可以清除浮动。

3.父级overflow:hidden.
这种方法就是在浮动元素的父级加一个overflow:hidden;值得一提的是overflow除了hidden之外还有其他的值，他们的区别为：

visible     默认值。内容不会被修剪，会呈现在元素框之外。
hidden     内容会被修剪，并且其余内容是不可见的。
scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto        如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit     规定应该从父元素继承 overflow 属性的值。

伪类

伪类指的就是


在这里需要注意的就是link,visited,hover,active。 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。所以一般的顺序为

link,visited,hover,active

或者

visited,link,hover,active

为了便于记忆可以使用LoVe&HAte法则！