一、块级元素、行内元素
1、块级元素

        <div></div>会独占一行
        可以独自设置宽高
2、行内元素
        <span></span>
        允许其他标签内容一行
        不能独自设置宽高,如果不设置宽,只设置高,那么span会把父元素作为宽,设置的height作为高来运行
3、行内块级元素:inline-block

        注意:
        文本修饰标签、a标签、input标签是行内元素
        排版标签、列表标签、表格、表单标签、pre是块级标签
        img标签 既不是行内标签也不是块级标签,一般称为行内块元素

        text-align:center;只能块级元素使用
4、转换大小写:
        text-transform:uppercase;将小写字母转换为大写
        text-transform:lowercase;将大写字母转换为小写字母
        text-transform:capitalize;讲英文单词的首字母转变为大写
注意:单词之间用空格分割

        css首行缩进text-indent:2em;(两个汉字距离)
        浏览器默认像素:16px;
        首行缩进也可设置为text-indent:32px;
        其值可以正为负 正往右走

        line-height:30px;设置文字的垂直居中
5、文本样式
        letter-spacing:20px;每个字符间的距离
        word-spacing:20px;每个单词间的距离
        font-style:normal;设置字体

二、复合选择器
多元素选择器:
        .p1,.p2,p,div{margin:0px;}同时 设置样式
后代元素选择器:(父元素,子元素之间有空格)
        .box h2{color:#f00;}
        17.png

子元素选择器:
        格式:E>F{属性:值;}
        .box>h2{属性:值;}
        只会匹配到子元素,孙子元素访问不到
        图:
        18.png
相邻元素选择器
        E+F{属性:值;}
      满足:
        1、E、F必须是兄弟关系(同级)
        2、F在E的后面
        3、E、F必须相邻
        图:
        19.png

        子元素选择器和相邻元素选择器适用于sublime或者其他装有插件emmet的编辑器

快捷方式
        div.box>h2{你好}ul>li*10 +tab快速建立
        图:
        20.png 21.png

三、列表样式属性(设置ul前圆圈、方框属性)
        去掉ul项前的小点
        图
        22.png 23.png
        也可以在li中,用css设置list-style:none;

        重要:在css中,只要涉及到图片,都需要放在

url()中
如:list-style-image:url(.images/oo1.jpg);

        list-style:可以直接写type、image、position的值
        示例:
        24.png

四、伪类选择器
        未访问:a:link{}
        鼠标访问过:a:visited{}
        鼠标移动上a:hover{}
        鼠标点击a:active{}(一般没有设置,因为时间太短)

        注意:a{color:red;text-decoration:none;}这种设置,单独a标签包含a:link和a:visited

        锚伪类选择器有顺序
        爱恨准则:先有爱,才有恨 love hate l 、v、h、a

五、属性选择器
        1、【attr】{属性:属性值;}
        eg:[color]{border:solid 1px grey;}
        所有具有color标签的都会变
        2、font[color="#ff0000"]{属性:属性值;}
        3、font[color^="#ff"]{属性:属性值}表示font标签的color属性中,所有以#ff开头的颜色都会改变
        4、font[color$="00"]{属性:属性值}表示font标签的color属性中,所有以00结尾的颜色都会改变
        5、font[color*="00"]{属性:属性值}表示font标签的color属性中,所有具有00样式的颜色都会改变
$、*和^涉及到正则表达式
        属性选择器图:
        25.png

        26.png

        27.png

        28.png

        29.png

六、继承inherit
        祖先元素身上的样式会被后代元素所继承
        如:给body设置红色,body里面,h标签里的文字也会变成红色
     继承就近原则:
        文字或者其他会继承离他最近的父级标签
        注意:在css样式中,文本、字体、列表能够被继承,其他不可
        一般网站:body{font-size=""; font-family=""; color=""}
        a标签继承不了父级或者爷爷级属性
        a标签只能自己设置,因为百度或者其他主页面文字基本都是a标签的超级链接,所以没有在body标签中设置color属性。

七、选择器的优先级
     指的是:属性设置在当前元素的身上,如果没有设置在当前元素身上就是优先级
①、单个选择期之间的优先级

行内样式>id选择器>类选择器>标签选择器

        如图:
        30.png

        31.png

        32.png

        33.png

②、多个选择器之间的优先级
        方法:数id选择器、类选择器、标签选择器的个数
        id选择器、类选择器、标签选择器
        无论多少个标签选择器都干不过一个类选择器
        无论多少个类选择器都干不过一个id选择器
        无论多少个id选择器都干不过一个行内选择器
        图:
        34.png

        35.png

        36.png

        37.png

        如果两个选择器所具有的优先级个数相同,那么就看写的顺序,谁后写的,听谁的。

        示例:

        38.png

        39.png