day4 CSS属性操作

1.CSS属性

　基本属性

    height，                 高度 百分比
    width，                  宽度 像素，百分比
    text-align:ceter,     水平方向居中
    line-height，          垂直方向根据标签高度
    color、                   字体颜色
    font-size、            字体大小
    font-weight          字体加粗

    <div style="
        height:48px;
         80%;
        border: 2px solid black;
        font-size: 20px;
        text-align: center;
        line-height: 48px;
        ">
        NNNN
    </div>

　背景属性 background

　　　　属性介绍

background-color
background-image
background-repeat
background-position

<body>
    <div style="height: 100px"></div>
    
    <div style="background-image: url(2.png);
    background-repeat:no-repeat;
    border: 1px solid red;
    background-position-x:1px;
    background-position-y:-110px;
    height: 20px;
     20px;
    "></div>

　边框属性border

　　属性介绍

border-width
border-style (required)
border-color

<div style="border: 1px solid red;"> ssss</div>

2.dispaly属性

display: none; 　　让标签消失
display: inline; 块级标签--->行内
display: block; 行内标签--->块级
display: inline-block; 具有行内，块级属性

　　行内标签：无法设置高度，宽度，padding margin 默认自己有多少占多少

　　块级标签：设置高度，宽度，padding margin

    <body>
        <div style="display: inline;">ssss</div>
        <span style="display: block;">nnnn</span>
    </body>

    <span style="display: inline-block;height: 50px; 70px">ALEx</span>
    <a style="">Eric</a>

4.内边距(padding)和外边距(margine)

　　盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。

   <body>
        <div style="border: 1px solid red;height: 70px;">
            <div style="height: 50px;padding-top: 20px">sss</div>
        </div><br/>

        <div style="border: 1px solid red;height: 70px;">
            <div style="height: 50px;margin-top: 20px">sss</div>
        </div>
    </body>

　　居中应用 <body style="margin: 0 auto">

5.float属性

常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

    <div style="20%;background-color: red;">1111</div>
    <div style="20%;background-color: beige;float: left">222</div>
    
    <div style="20%;background-color: red;float: left">1111</div>
    <div style="20%;background-color: beige;float: left">222</div>

   <div>
        <div style=" 300px;border: 1px solid red">
            <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
            <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
            <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
            <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
            <div style=" 96px;height: 30px;border: 1px solid green;float: left"></div>
            <div style="clear: both"></div>
        </div>    
    </div>

　　2.overflow: hidden,auto

<body>
    <div style="height: 200px;400px;overflow: auto">
        <img src="1.jpg"/>
    </div>

    <div style="height: 200px;400px;overflow: hidden">
        <img src="1.jpg"/>
    </div>
</body>

6.position(定位)

　　1. static

　　　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

　　2. position:fixed

　　　　在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<body>
    <div onclick="GoTop();" style="50px;height: 50px;background-color: black;color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>

    <div style="height: 5000px;background-color: #dddddd">ssss</div>
    <script>
        function GoTop(){
            document.body.scrollTop = 0;
        }
    </script>
</body>

　　3. position: relative／absolute

<head>
    <style>
        .pg-header{
            height:48px;
            background-color: black;
            color: #dddddd;
            position: fixed;
            top:0;
            right:0;
            left:0;
        }
        .pg-body{
            background-color: #dddddd;
            height:5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

<body>
    <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;left: 0;bottom: 0;50px;height: 50px;background-color: black;"></div>
    </div>

    <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;right: 0;bottom: 0;50px;height: 50px;background-color: black;"></div>
    </div>

    <div style="position:relative; 500px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position:absolute;right: 0;top: 0;50px;height: 50px;background-color: black;"></div>
    </div>

</body>

　　4.opcity: 0.5 透明度

　　5. z-index:10 层级顺序

<body>
    <div style=" display:none;z-index: 10;position:fixed;top: 50%;left: 50%;
    margin-left: -200px;margin-top: -250px;
    height: 500px; 400px;
    background-color: white">
        <input type="text"/><br/>
        <input type="text"/><br/>
        <input type="text"/>
    </div>

    <div style="display:none;z-index: 9;position: fixed;background-color: black;
    top:0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0.5;
    "></div>

    <div style="height: 5000px;background-color: #dddddd">ssss</div>
</body>

7.hover 鼠标效果

　　　　/*当鼠标移动到当前标签上时，以下css属性才生效*/

        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
        
        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
        
        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
        
        伪类选择器 : 伪类指的是标签的不同状态:
        
                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
        
        a:link {color: #FF0000} /* 未访问的链接 */
        
        a:visited {color: #00FF00} /* 已访问的链接 */
        
        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
        
        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

<head>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
             980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">1024</a>
        </div>
    </div>
    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>

8.CSS练习

<body>
    <div style="height: 35px; 400px;position: relative">

        <input type="text" style="height: 35px; 400px;padding-right: 30px"/>

        <span style="position:absolute;right:-24px;top: 10px;
        background-image:url(i_name.jpg);
        height: 16px; 16px;display: inline-block"></span>

    </div>
</body>