伪类选择器

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

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

        /* 选定的链接 鼠标点击时出现*/
        a:active {
          color: #0000FF
        }

        /* 已访问的链接 */
        a:visited {
          color: #00FF00
        }
　　　　　　
        /* 选中input输入框时出现效果 */
        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属性相关

宽和高

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

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

<style>
        div {
            width: 30px;
            height: 20px;
        }
    </style>

字体属性

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

<style>
        div {
            font-size: 20px;
            font-weight: normal;
            font-weight: bold;
            font-weight: bolder;
            font-weight: lighter;
            font-weight: 400;
            font-weight: inherit;
        }
    </style>

文本颜色

<style>
        div {
            background-color: red;
            color: pink;
            color: #FF00FF;
            color: #F0F;
            color: rgb(199,99,99);
            color: rgb(199,99,99,0.5);
            color: rgb(199,99,99);
            opacity: 0.3;  透明度
        }
    </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: 5px solid red;边框颜色和边框粗细
        background-color: mistyrose;
        background-image: url("琛哥.jpg");
        opacity: 0.5;透明度
        background-repeat: repeat-x;/*X轴平铺*/
        background-repeat: repeat-y;/*Y轴平铺*/
        background-repeat: no-repeat;无平铺
        background-position: 400px 500px;/*图片边距*/
        background-position: center center;/*图片居中*/
        background:repeat-x red center center url("琛哥.jpg");
        background: repeat-x red;
    }
  </style>

边框

<style>
        p {
            border-width: 6px;/* 边框粗细*/
            border-style: dashed;/*虚线边框*/
            border-color: pink;/*边框颜色*/
            border-left-width: 5px;/* 指定左边框粗细*/
            border-left-style: dashed;/*指定左边框虚线*/
            border-left-color: pink;/*指定左边框颜色*/
             border-top-width: 5px;/* 指定上边框粗细*/
             border-top-style: dashed;/* 指定上边框粗细*/
             border-top-color: yellow;/* 指定上边框粗细*/
              border-right-width: 5px;
              border-right-style: dashed;
              border-right-color: red;
              border-bottom-width: 5px;
              border-bottom-style: dashed;
              border-bottom-color: blue;
              border:5px solid red;/*简写粗细、边框样式、边框样式*/
            width: 400px;
            height: 400px;
            border: 5px solid red;
            background: yellow;
            border-radius: 50%;/* 边框四周向内缩  画圆*/
            text-align: center;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
    </style>

display属性（重要）

<style>
    #d1 {
        width: 100px;
        height: 100px;
        background:red;
        display: inline-block;/*既有块级元素特征也有行内元素特征*/
        display: none;/*隐藏块，包括位置 需掌握*/
        visibility: hidden;/* 隐藏块但保留位置*/
    }
    #d2 {
        width: 100px;
        height: 100px;
        background:gold;
        display: inline-block;
    }
    .c1 {
        width: 100px;
        height: 100px;
        background: blue;
        display: inline-block;
    }
    .c2 {
        width: 100px;
        height: 100px;
        background: mistyrose;
        display: inline-block;
    }
    </style>
</head>
<body>
<div id="d1" ></div>
<div id="d2" ></div>
<span class="c1">span1</span>
<span class="c2">span2</span>
</body>

CSS盒子模型

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

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

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

float浮动

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

<style>
        #d1 {
            width: 100px;
            height: 100px;
            background:red;
            float: left;
        }
        #d2 {
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
    </style>

浮动带来的影响

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