第四天

一、

1、文档流，页面的默认排列方式。

2、块元素，默认独占一行

3、行内元素，默认在一行内显示 ，行内元素默认不以设置宽高。

4、替换元素：元素的内容由标签的属性来设置，标签其实是一个占位符

    默认导入的资源是作为行内元素，如：<img src=""> <a href=''></a>

5、行内块元素，可以设置宽和高的行内元素

6、display: list-item; 是一个特殊的块元素（仅仅是多了一个列表的块）

7、非替换元素： 元素的内容由用户直接提供或者来自文档自身，一般为双标签

二、样式表

1、内联样式表： 写在标签的 style 属性中，仅应用于当前标签中

            如：<p style="color: orange; backgruond: green;">whete are you now </p>

2、内部样式表：写在<style></style>标签中

            如:

<style>
    p{
        width: 200px;
        height: 200px;
        color: red;
        background: lightgreen;
    }
</style>

3、外部样式表，用<link rel="stylesheet" href="a.css">

            外部样式表，可以让所有引入这个样式表的html 页面复用样式声明

4、样式表优先级：就近原则，离标签最近的样式表优先级最高，

    从而得：内联样式表优先级最高，内部与外部样式表按写入先后排会先级。

三、选择器

1、元素选择器 p{ color: red;}

2、id 选择器 #IDname{ color: skyblue;}   id 是独一无二的，只能指向一个元素，

3、class 选择器 .className{color: lightgreen;}  元素的类属性可以有多个值，以空格隔开

4、后代选择器  ul li{ color: orange;} 即元素选择器前指明父元素

5、通配符选择器 *{ font-size: 16px;}  指明所有元素的字体大小为16px, 优先级最低

6、子元互选择器 ul > li{ background-color: orange;}

7、相邻兄弟选择器 p + a{ color: red;}

8、全部兄弟选择器  #a ~ a{color: #abcdef}

9、属性选择器： *[id]{ background: #1296db;} 选中所有有 id 属性的元素

10、根据属性的名和值来先元素 li[ class="green"]{background: yellow;}

11、选择 class 属性中包括指定单词的元素

                    p[class ~= “green”]{ color: blue;}h

12、选择以  'au' 开头的类样式的元素

            li[class ^= 'au']{ color: orange;}

13、选择以 'jpg' 结尾的类样式的元素

        img[ src $='jpg']{width=100px;}

14、选择属性值中包括指定字母 ‘e’的元素

            li[ class *= "e"]{ color: cyan;}

四、伪类选择器

1、第一个li 

            ul li:first-child{ color: lightcyan;}

2、最后一个 li

                ul li:last-child{ color: gray;}

3、第 n 个子元素,n 要为具体的值，且n >=1 的整数

        ul li:nth-child(n){color: pink;}

4、 只有唯一的子元素

        p:only-child{ font-size: 22px;}