html5 css3中的一些笔记

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >
    <title>css选择器</title>
    <style type="text/css">
        /* HTML 文档css
        :root{      
            border: solid 1px red ;
        };
        */
        /*字选择器 带>号 也可以不用带*/
        /*ul > li{
            color: red;
        }*/
        /*ul > li:first-child{
            color: red;
        }
        ul > li:last-child{
            color: red;
        }
        
        */
        /*输入框的启用和禁止输入的CSS*/
        /*input:enabled{
            border: 1px solid red;
        }
        input:disabled{
            border: 1px solid blue;
        }*/
        /*验证成功就显示blue,验证不成功显示green*/
        /*input:valid{
            border: 1px solid blue;
        }
        input:invalid{
            border: 1px solid green;
        }*/
        /*必填表单 和 不必填表单*/
        /*input:required{

        }
        input:optional{

        }*/
        /*1. 显示 2.访问过后的显示 3.鼠标移动 4.点击不动后的显示*/
        /*a:link{

        }
        a:visited{

        }
        a:hover{

        }
        a:active{

        }*/
        /*获取光标时 谷歌不兼容*/
        /*input:focus{
            border: 1px solid red;
        }*/
        /*a标签 href!=baidu 的a元素*/
        /*a:not([href*="baidu"]){
            color: red;
        }*/
        /*em是相对的 跟字号大小挂钩,很灵活*/
        p{
            margin: 0;
            padding: 0;
            background: gray;
            font-size: 20px;
            width: 50%;
        }
    </style>
</head>

<body>
    <ul>
        <li>ul第1个子元素</li>
        <li>ul第2个子元素</li>
        <li>ul第3个子元素</li>
        <li>ul第4个子元素</li>

    </ul>

    <input type="text"  />
    <input type="email" />
    <br/>
    <a href="http:www.baidu.com" >baidu</a>
    <a href="http:www.google.com" >google</a>
    <a href="http:www.haosou.com" >haosou</a>
    <p>em单位的讲解
        em单位的讲解em单位的讲解em单位的讲解em单位的讲解
    </p>
</body>
</html>

/*
display重要的概念

块级元素(display: block;) 1.能设置大小（height,width）2. 能自动的换行 div p

内联元素(display: inline;) 1.不能设置大小 2.不能自动换行 span b

内联-块(display: inline-block;) 1.能设置大小 2.不能自动换行 img

float浮动理解：如果有div A,B。 A浮动B不浮动，相当于水下面的物体A浮动起来，然后在A后面的B就会跑到A的位置，A就会浮动到水面上，则就会挡住B。就相当于div A凸起来了，B就跑到A原来的位置了、
clean 为了下面的元素不受上面元素的浮动干扰，可以使用
clean:left|right|both; (清除浮动)
*/

div{
            width: 400px;
            height: 300px;
            /*css3中的透明度*/
            opacity: 0.5;  
            border: 10px solid green;
            /*
            阴影效果
            1. 左右阴影 正是右边 负是左边
            2. 上下
            3. 阴影的模糊值 默认是0
            4. 阴影的延伸半价
            5. 颜色（可选）
            6. inset值 （可选，内阴影）
            */
            box-shadow: 5px 5px 5px 5px;

            /*轮廓*/
            outline: red solid 1px;
        }
        /*
            em 和 rem单位的用法，都是相对的
        */
        html{
            font-size: 10px;
            // 等价于 6.25%  (默认字体大小16px,10/16)
        }
        .p1{
            font-size: 1.7em;     // em 相对于父元素的字体大小
        }
        .p2{
            font-size: 17px;       
        }
        .p3{
            font-size: 1.7rem;    // rem 直接相对于根目录（设置html的字体大小）
        }