css笔记

时间：2016-08-13 06:32:36 阅读：241 评论：0 收藏：0 [点我收藏+]

标签：

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>

效果：

<!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: 设置优先级，数字越大优先级越高

来自为知笔记(Wiz)

css笔记

标签：

原文地址：http://www.cnblogs.com/pangguoping/p/5767105.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行