Python之路 CSS

1.标签选择器

为类型标签设置样式

<style>
        /*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/
        div{
            font-size: 19px;
        }
    </style>

<body>
    <div>
        font size ares
    </div>
</body>

2.ID选择器

#i1｛
　　　　　　　　background：red
　　　　｝
<a id=i1>ares</a>  #引用id为i1的里面的样式

3.类选择器

推荐使用，id可以相同

<style>
        /*类选择器标签*/
        .cls{
            background-color:blue;
            font-size: 15px;
        }
    </style>

4.关联选择器

<head>
    <meta charset="UTF-8">
    <style>    
        /*为一个标签应用了,类选择器,下的li标签设置样式*/
        .continer ares{
            background-color: pink;
            font-size: larger;
        }
    </style>
</head>
<body>
    <h2>关联选择器</h2>
<!--下面的div应用了ares1类选择器,那么他下面的所有的ares标签将应用上面设置的样式-->
    <div class="ares1">
        <ul>
            <li>
                <a class="l">
                    <span class="a">arexin</span>
                </a>
            </li>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>

关联选择器：应用场景为某标签下面的标签设置指定的样式

5.组合选择器

如果cc1和cc2要使用相同的样式，则可以

.container .a .cc1,.container .a .cc2  {
                background-color: pink;
            }

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

.container .a .cc1,.cc2  {
                background-color: pink;
            }

6.属性选择器

表单验证时常用

<head>
    <meta charset="UTF-8">
    <style>
        .con input[type="text"][name="username"]{
            border: 2px solid greenyellow;
        }
        .con input[alex="dashen"]{
            border: 3px solid red;
        }
    </style>
</head>
<body>
    <h2>属性选择器</h2>
    <div class="con">
        <input type="text" name="username"/>
        <input alex="dashen" type="text"/>
        <input type="file"/>
        <input type="password"/>
        <input type="button"/>
        <input type="checkbox"/>
        <input type="reset"/>
    </div>


</body>
</html>

效果如下：

7.background-position 图片位移

在实际的生产环境中用户在网页上看到的小图片不是一个一个的零散的小图片的，用户只是看到了大图片的一部分。

<style>
        .chuangkou{
            /*定义一个图片*/
            background-image: url('content_images.jpg');
            /*定义一个窗口,指定长和宽*/
            height: 30px;
            width:30px;
            /*设置图片不重复*/
            background-repeat:no-repeat;
            background-position: 3px 10px ;
        }
    </style>

<body>
    <div class="ares">

    </div>
</body>

8.内外边距

内边距：

<div style="background-color: green;height: 200px;">
        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    ">
        </div>
    </div>

外边距：

<div style="background-color: green;height: 100px;padding-top: 100px;">
        <div style="margin-left: auto;
                    margin-right:auto;
                    background-color: blue;
                    height: 20px;
                    width:20px;
                    margin-top: 30px;
                    ">
        </div>
    </div>
使用padding会继承原有的颜色在内部填充，使用margin在外面扩张并且没有颜色

padding - 内边距，改变自己内部边距

margin - 外边距，改变自己外部离其他标签的边距

9.定位

position的四个属性值： static fixed relative absolute

1）position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

2）fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

10.样式

auto出现滚动条，一般用这个即可

hdden超出直接不显示

如果内容超过div的大小会自动加载滚动条 

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
    </style>
</head>
<body>
    <div style="overflow: auto;height: 100px;background-color: antiquewhite">
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
        ares<br/>
    </div>
</body>
</html>

设置整体的body占满所有的浏览器窗口(整个页面居中无边框)

<style>
　　　　　<body>
　　　　　　　　margin: 0 auto;
　　　　　　</body>
　　　　</style>

11.透明度

使用较多

12.z-index

如果想要最外层的完全在页面中间需要确定图片的像素之后设置margin-left和margin-top为图片像素的一半大小即可

 

后台demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台布局</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 48px;
            background-color: aqua;
        }
        .pg-body .menu{
            background-color: antiquewhite;
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            overflow: auto;
        }
        .pg-body .content{
            background-color: coral;
            position: absolute;
            right: 0;
            top: 50px;
            bottom: 0;
            left: 210px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="menu">
            <div style="height: 1000px;">
                <h1 style="color: red;">asdfasdf</h1>

            </div>
        </div>
        <div class="content">
            <div style="height: 1000px;">
                <h1 style="color: red;">asdfasdf</h1>
            </div>
        </div>
    </div>
</body>
</html>
posted @ 2016-02-19 21:03  我是一条最咸的咸鱼  阅读(172)  评论(0)    收藏  举报
返回顶部