伪类选择器

    <style>
        /*未访问时候显示的*/
        a:link {
            color: #FF0000;
        }

        /* 鼠标移动到链接上 */
        a:hover {
          color: #FF00FF
        }

        /* 选定的链接 */
        a:active {
          color: #0000FF
        }

        /* 已访问的链接 */
        a:visited {
          color: #00FF00
        }

        input:focus {
            outline: none;
            background-color: #eee;
        }
    </style>

伪元素选择器

 <style>
        /*p:first-letter {*/
        /*    font-size: 48px;*/
        /*    color: red;*/
        /*}*/

        /*在每个<p>元素之前插入内容*/
        p:before {
            content: "*";
            color: red;
        }

        p:after {
            content: "";
            color: red;
        }

    /*    我们后面可以使用它来解决父标签塌陷问题，浮动带来的问题*/

选择器的优先级

比较id、类、标签选择器的优先级

# style样式、外部引入的CSS、行内式
1. 选择器相同的情况下，谁的优先级更高
	# 选择器相同，谁离标签越近就听谁的
    
    '''行内式的优先级是最高的!!!'''

2. 选择器不同的情况下，谁的优先级更高
	# 比较id、类、标签选择器的优先级
	行内式 > id选择器  > 类选择器 > 标签选择器
    

CSS属性相关

宽和高

给元素设置宽和高------>元素、标签、节点------->意思都一样

# 宽和高默认情况下只能跟块儿级元素设置才有效，行内元素设置无效，但是你可以设置，也不报错，只不过就是没效果

字体属性

font-weight用来设置字体的字重（粗细）。
    值					描述
    normal				默认值，标准粗细
    bold				粗体
    bolder				更粗
    lighter				更细
    100~900				设置具体粗细，400等同于normal，而700等同于bold
    inherit				继承父元素字体的粗细值

文本颜色

 <style>
        div {
            font-size: 16px;
            /*font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;*/
            /*font-weight: bold;*/
            /*font-weight: bolder;*/
            /*font-weight: lighter;*/
            font-weight: inherit;
            /*color: blue;*/
            /*color: #ff6700;*/
            /*color: #FF00FF;*/
            /*color: #FF01F2;*/
            /*color: rgb(255, 0, 0);*/
            /*color: rgb(0, 0, 255);*/
            /*color: rgb(198, 88, 95);*/
            /*color: rgba(100,200,100, 0.2);*/
            /*opacity: 0.1; 透明度 */
        }
    </style>

文字属性

   <style>
        p {
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: center; 掌握这个就行了，只能跟文本内容居中*/
            text-align: justify;
            text-indent: 28px;
        }

        a {
            /*text-decoration: underline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: overline;*/
            /*text-decoration: none; 掌握的*/
        }
    </style>

背景属性

    <style>
        div {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            /*background-color: red;*/
            /*background-image: url("1234.png");*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-repeat: no-repeat;*/
            /*background-position: 200px 350px;*/
            /*background-position: center center;*/
            /*background: repeat-x red  center center url("1234.png") ;*/
            /*background: repeat-x red;*/
        }
    </style>

边框

边框属性 
● border-width
● border-style
● border-color

 p {
            /*border-width: 10px;*/
            /*border-style: dashed;*/
            /*border-color: green;*/
            /*border-left-width: 10px;*/
            /*border-left-style: solid;*/
            /*border-left-color: red;*/

            /*border-top-width: 5px;*/
            /*border-top-style: dashed;*/
            /*border-top-color: green;*/

            /*border-right-width: 5px;*/
            /*border-right-style: dashed;*/
            /*border-right-color: orange;*/

            /* border-bottom-width: 5px;*/
            /*border-bottom-style: dashed;*/
            /*border-bottom-color: brown;*/

            /*border: 5px solid red;*/

            width: 400px;
            height: 400px;
            border: 5px solid red;
            background: red;
            /*border-radius: 50%;*/
            border-top-left-radius: 100px;
            border-top-right-radius: 100px;
            border-bottom-left-radius: 100px;
            border-bottom-right-radius: 100px;
        }

display属性(重要)

 <style>
        #d1 {
            width: 100px;
            height: 100px;
            background: red;
            /*display: none; 掌握*/
            visibility: hidden;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background: green;
        }

        /*.c1 {*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background: green;*/
        /*    display: inline-block;*/
        /*}*/

        /*.c2 {*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background: orange;*/
        /*    display: inline-block;*/
        /*}*/
    </style>

CSS盒子模型

举例：以快递盒与快递盒为例

快递盒与快递盒之间的距离称为是外边距----------->margin值
快递盒与内部的物品之间的距离称为是内边距---------->padding值
快递盒子的厚度称之为是边框--------------->border表示
物品的实际大小称之为是内容-------------->content来表示

# 调整标签与标签之间的距离使用的是margin值

float浮动

# 浮动可以让两个块儿级元素放在一行

浮动带来的影响

# 父标签塌陷问题，如何解决的
谁塌陷就给谁加一下代码
 .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }