Day03

1.参数

1.1盒子模型的参数

div{
            width: 100px;
            height: 100px;
            background:rebeccapurple;
            margin-top:100px;
            margin-right:200px;
            margin-bottom:300px;
            margin-left:400px;

将上面的代码简化如下：

div{
            width: 100px;
            height: 100px;
            background:rebeccapurple;
            margin:100px 200px 300px 400px;
   }

1.2元素内容的起始位置

元素内容的起始位置，是基于他自身width，height的起始位置。

1.3html标签的分类

①块标签
特点：(1).独占一行 (2).能设置width，height。

    
h1
    
p
    

        
1
        
2
    
 
    

        
dt
        
dd
    
    
div

②内联标签
特点：(1).并排显示。(2).不能设置width，height。 (3)。不能设置margin-top，margin-bottom。

a  span  i  em strong  

③内联块
特点：(1).并排显示。 (2).能设置width，height。

btn

2.选择器

1.1.类别选择器

类选择器根据类名来选择前面以“.”来标志，如：

.container{
           color:#FFF;
}

1.2.标签选择器

决定哪些标签采用相应的css样式，比如，在style.css文件中队p标签样式的声明如下；

p{
           font-size:12px;
           background:#900;
           color:#090;           
}

复制代码页面中的所有P标签的样式都是这样。

1.3.id选择器

id选择器可以为标有特定ＩＤ的HTML元素指定特定的样式。
前面以“#”号来标志，在样式里面可以这样定义：

#demoDiv{
color:#FFF;
}

这里表示id为demoDiv的元素的设置它的字体颜色为#FFF。

1.4.伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。
①.link表示连接在没有被点击时的样式。

a:link{
color:#FFF;
}

②.visited表示链接已经被访问时的样式。

a:visited{
color:#FFF;
}

③hover表示当鼠标悬停在链接上面的样式。

a:hover{
color:#FFF;
}

④focus选择器用于选择具有焦点的元素。

input:foucus{
background-color:yellow;
}

1.5.分组选择器

相同的样式不同的元素可使用分组选择器。

h1,h2,p{
color:green;
}

1.6.后代选择器

只选中parent的P元素。

 .parent>p{
            color:red;
        }  

选择parent之后的所有P元素。（parent标签下的所有子标签。）

        .parent p{
            color:red;
        } 

1.7.兄弟选择器

.h3~p{
color:red;
}

"~"选择器表示某元素后所有同级的指定元素，强调所有的。

h3+p{
color:red;
}

"+"选择器表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

1.8.属性选择器

下面的例子是把包含标题（one）的所有元素变为红色：

[one]{
           color:red;
       }
    
...
    
hello world
    baidu.com

3.选择器的优先级别

下面的排序可见选择器的首先级别，但是important的优先级别最高。

!important>id>class>p{} 

4.伪元素

div:before{
            content:"qianmian";
            display:block;
            width: 100px;
            height: 100px;
            background:yellowgreen;
        }
        div:after{
            content:"houmian";
            display:block;
            width: 100px;
            height: 100px;
            background:yellowgreen;
        }

before伪元素可以在元素的内容面前插入新的内容。
after伪元素可以在元素的内容后面插入新的内容。
相当于一个普通的元素。