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>h1</h1>
    <p>p</p>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul> 
    <dl>
        <dt>dt</dt>
        <dd>dd</dd>
    </dl>
    <div>div</div>

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

<a href="#">a</a>  <span>span</span>  <i>i</i>  <em>em</em> <strong>strong</strong>  <br>

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

<input type="text">
<img src="images/.." alt="">
<button>btn</button>

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;
       }
    </style>
...
    <P one="hello world">hello world</P>
    <a one="baidu.com" href="http://www.baidu.com">baidu.com</a>

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伪元素可以在元素的内容后面插入新的内容。
相当于一个普通的元素。