css笔记

CSS
        存放位置：
                单独css文件
                html头部
                标签属性

优先级：标签属性> html头部> 单独css文件

CSS选择器：
分类：1、标签选择器 
2，id选择器
3、class选择器
4、层级选择器
5、组合选择器

1、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        div{
            color:green;
        }
    </style>

</head>
<body>
    <div>baidubaidubaidu</div>

</body>
</html>
out:
 
2、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--标签选择器-->
    <!--<link rel="stylesheet" href="common.css /">-->
    <style>
        #i1{
            font-size: 56px;
            color: green;
        }
    </style>
</head>
<body>
    <a id="i1">baidu</a>

</body>
</html>
  
out:
 3、class选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*class选择器*/
        .c1{
            background-color: red;
        }
    </style>
</head>
<body>
    <span class="c1">1</span>
    <div class="c1">2</div>
    <a class="c1">3</a>

</body>
</html>
 out:
 

4、层级选择器：（两种方式）
方式一：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*层级选择器*/
        .c2 div p a{
            background-color: red;
            color: white;
        }

    </style>
</head>
<body>
    <div class="c2">
        <div></div>
        <div>
            <p>
                <span>ooo</span>
                <a class="c3">uu</a>
            </p>
        </div>
    </div>

</body>
</html>

out:
 
方式二：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c2 div p .c3{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="c2">
        <div></div>
        <div>
            <p>
                <span>ooo</span>
                <a class="c3">uu</a>
            </p>
        </div>
    </div>
    <div class="c3">dddd</div>


</body>
</html>

out:
 
5、组合选择器：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c4,.c5,.c6{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="c4">C4</div>
    <div class="c5">C5</div>
    <div class="c6">C6</div>

</body>
</html>
out:
 
display: none;   #隐藏
            inline;    #行内标签,即内联标签
            block;   #块级标签
            inline-block;  

边距：
        margin    外边距（本身不增加）
        padding    内边距（本身增加）

浮漂
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 500px;height: 500px;border: 1px solid red;">
        <div style="width: 20%;background-color: aqua;float: left">浮漂</div>
        <div style="width: 80%;background-color: beige;float: left;">浮漂</div>
        <div style="clear: both;"></div>
    </div>

</body>
</html>                

out:

position:
        relative
        absolute   #随窗口的滚动而滚动
        fixed        #固定，窗口

1.fixed #固定在窗口的固定位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:1000px;background-color: #dddddd"></div>
    <div style="position: fixed;right: 200px;bottom: 100px;">返回顶部</div>

</body>
</html>

效果：
 2.absolute    #随窗口的滚动而滚动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:1000px;background-color: #dddddd"></div>
    <div style="position: absolute;right: 200px;bottom: 100px;">返回顶部</div>

</body>
</html>
效果：
 3.relative和 absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height:500px;width: 400px;border: 1px solid red;position: relative">
         <div style="position: absolute;bottom: 0;right: 0;">返回顶部</div>
    </div>
</body>
</html>
 效果：

4.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
        <div style="height: 200px;background-color: red">
            <div style="position: absolute;bottom: 0;right: 0">返回顶部</div>
        </div>
    </div>

</body>
</html>
 效果：
 
对话框：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            width: 400px;
            height: 300px;
            background-color: #dddddd;
            position: fixed;
            top:50%;
            left:50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 10; /*优先级*/
        }
        .shadow{
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: black;
            opacity: 0.6;  /*透明度 ，范围0-1*/
            z-index: 9; /*优先级*/
        }
    </style>
</head>
<body>
    <input type="button" value="添加" />
    <div class="shadow"></div>
    <div class="modal">
        <input type="text" />
    </div>
</body>
</html>
     
怎么保证modal这一层在shadow这一层的外面？
使用z-index: 设置优先级，数字越大优先级越高
 
         




posted @ 2016-08-13 03:02  unixfbi.com  阅读(201)  评论(0)  编辑  收藏  举报