CSS

什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

CSS选择器

1.标签选择器

2.ID选择器（ID不能重复）

3.class选择器

4.关联选择器（单层，多层）

5.组合关联选择器

6.属性选择器

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        div{
            font-size: 30px;
        }
        /*Id选择器*/
        #i1{
            background-color: red;
        }
        /*Class选择器*/
        .c1{
            color: green;
        }
    </style>
</head>
    <div>标签选择器</div>
    <a id="i1">Id选择器(id不能重复)</a>

    <span class="c1">Class选择器01</span>
    <a class="c1">Class选择器02</a>
    <div class="c1">Class选择器03</div>

    <hr />
    <style>
        /*单层关联选择器*/
        /*空格 - 表示在某个标签下面的标签中去寻找某个或某批标签*/
        .container01 li{
            background-color: deeppink;
        }
        /*多层关联选择器*/
        .container02 #i2 a .c2{
            background-color: greenyellow;
        }
        /*组合关联选择器*/
        .container02 #i2 a .c2,.c3{
            background-color: greenyellow;
        }
    </style>
    <div class="container01">
        <ul>
            <li>单层关联选择器</li>
            <li>单层关联选择器</li>

        </ul>
    </div>
    <div class="container02">
        <div id="i2">
            <a>
                <span class="c2">多层关联选择器</span>
            </a>
        </div>
    </div>

    <style>
        /*属性选择器*/
        .conn input[type="text"][name="username"]{
            border: 3px solid red;
        }
        .conn input[type="password"][name="password"]{
            border: 3px solid yellowgreen;
        }
        .conn input[tijiao="tijiao"]{
            border: 3px solid gold;
        }
    </style>
    <div class="conn">
        <input type="text" name="username" />
        <input type="password"  name="password" />
        <input tijiao="tijiao" type="submit" />
    </div>

</body>
</html>
选择器

 

 

position 定位位置

1.正常定位  relative 
2.根据父元素进行定位：absolute （relative 和 absolute 是放在一起用，relative包含absolute）
3.根据浏览器窗口进行定位：fixed

<div style="position:relative;">
　　<div style="position:absolute;"></div>   #放在里面是对于<div style="position:relative;">这个的定位。
</div>
<div style="position:absolute;"></div>  #放在外面，则是对于整个浏览器的定位

 

<div id="content" style="height: 2000px;background-color: antiquewhite">

    <div style="position: relative;background-color: green;width: 300px;margin: 0 auto;height: 200px;">
        <h1>展示</h1>
        <a style="position: absolute;right: 5px;bottom: 5px"><input type="submit"/></a>
    </div>
    <a style="position:fixed;right: 30px;bottom: 30px;"href="#content";>返回顶部</a>
</div>


margin: 0 auto;  水平居中

 

 

 

 

 display

　　none  隐藏不显示

　　block  变成快级标签

　　inline 变成内联标签

 

 float

　　clear: both

overflow

　　auto

　　hidden

 

无边框

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

 

 

透明度

　　filter： alpha(opacity=50);

　　 -moz-opacity: 0.5;

　　opacity; 0.5;

 

z-index

 

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }
        .pg-header{
            height: 48px;
            background-color: yellowgreen;
        }
        .pg-body .menu{
            background-color: cyan;
            position: absolute;
            top: 50px;
            left: 0;
            bottom: 0;
            width: 200px;
            overflow: auto;

        }
        .pg-body .content{
            background-color: dodgerblue;
            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">
            <a>m1</a>
            <a>m1</a>
            <a>m1</a>
            <a>m1</a>
            <!--<div style="height: 10px;"></div>-->

        </div>

        <div class="content">
            1231213
            <div style="height: 1000px;">
                <h1>第一章</h1>
            </div>
        </div>
    </div>
</body>
</html>
View Code

 

posted @ 2017-07-05 10:36  Nice_keep-going  阅读(122)  评论(0)    收藏  举报