zoukankan      html  css  js  c++  java
  • CSS

    一、CSS:学名层叠样式表(Cading Style Sheets)是一种用来表现HTML或者Xml等文件的样式的计算机语言。让Html看起来更加美观。

    语法:标签内定义style

    css位置:为了提高样式的重用,css样式一般推荐的head标签位置或单独文件引用。

    二、Css选择器:class属性值可以重复。

    1、标签选择器,不常用。缺点:对所有匹配的标签都应用该样式。

    2、id选择器:通过id属性值进行匹配。不常用。缺点:因为id值的唯一性,导致只能应用在匹配的一个标签内。

    3、class选择器:根据class属性值进行匹配样式。比较常用。

    4、层级选择器:注意用空格来表示层级。比较常用。场景:当一个标签内嵌套标签。对内层标签进行样式定义的时候。

    5、组合选择器。当多个标签要应用同一个样式的时候可以使用组合选择器。比较常用。语法:用逗号来表示多个class。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <!--<link rel="stylesheet" href="comm.css">-->
        <!--<style>-->
            <!--/*标签选择器*/-->
            <!--div{background-color: blue;color: black;}-->
        <!--</style>-->
        <style>
            div{
                color: green;
            }
            #i1{
                font-size: 56px;
            }
            .c1{
                background-color: black;
            }
            .c2 div p .c3{
                /*层级选择器*/
                background-color: yellow;
                color: blueviolet;
            }
            .c4,.c5,.c6{
                /*组合选择器*/
                color: green;
            }
        </style>
    </head>
    <body>
        <div style="background-color: red;color: yellow;">我是CSS</div>
        <div style="background-color: red;color: yellow;">我是第二个CSS</div>
        <div style="background-color: red;color: yellow;">我是第三个CSS</div>
        <div>我自己没有定义,我遵循广域的</div>
        <div id="i1">我用的是id选择器</div>
        <div class="c1">我是class选择器</div>
        <div class="c2">
            <div>
                <p>
                    <span>呵呵</span>
                    <a class="c3">我是用的层级选择器</a>
                </p>
            </div>
        </div>
        <div class="c4">我是c4组合选择器</div>
        <div class="c5">我是c5组合选择器</div>
        <div class="c6">我是c6组合选择器</div>
    </body>
    </html>
    简单操作

    三、样式:

    注意:html有宽度,可以是100%也可以是20%等。子标签可以占有父标签的宽度比。因为内容多少高度就多少,是由内容来确定。所以没有高度百分比。

    背景颜色可以是由具体的英文和rgb18进制来代替,也可以用rgb(三个参数)来表示。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                height: 48px;
                background-color: blue;
                color: red;
                position: fixed;
                left: 10px;
                right: 10px;
                top:0;
            }
            .pg-body{
                height: 5000px;
                background-color: white;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">头部</div>
        <div class="pg-body">
            <div style="border: 1px solid red;">边框</div>
            <div style="height: 50px;
              80%; border: 1px solid red;
             font-size: 16px; text-align: center;
             line-height: 20px; font-weight: bold;
            ">呵呵</div>
         <div style="position: relative;  500px; height: 200px; border: solid red;margin: 0 auto;">
            <div style="position: absolute; left: 0; top: -10px;  50px; height: 20px; background-color: green"></div>
        </div>
        </div>
    </body>
    </html>
    边框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .img1{
                background-image: url("1.gif");
                height: 500px;
                width: 1000px;
                background-repeat: no-repeat;
            }
        </style>
        <style>
            .img2{
                background-image: url("2.gif");
                height: 150px;
                width: 50px;
                background-position: 62px 149px;
            }
        </style>
    </head>
    <body>
        <div class="img1">下雨了,该回家了</div>
        <div class="img2">指定显示</div>
    </body>
    </html>
    图片

    通过移动图片的位置来呈现图片的部位,而不是移动页面。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide {
            display: none;
            }
            .mode {
                width: 400px;
                height: 300px;
                background-color: red;
                position: fixed;
                top: 50%;
                left:50%;
                margin-left: -200px;
                margin-top: -150px;
                z-index: 9;
            }
            .shadow {
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: black;
                /*background-color: rgba(0,0,0,0.6);*/
                opacity: 0.4;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <input type="button" value="test"/>
        <div class="shadow">大暗黑天</div>
        <div class="hide">对话框</div>
        <div class="mode">
            <input type="button" value="text"/>
            <input type="button" value="test">
        </div>
        <div style="height: 2000px;">en</div>
    
    
    </body>
    </html>
    对话框
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="height: 70px; border: 1px">hehe</div>
    </body>
    <body>
        <div style=" 500px; height: 500px; border: 1px solid red;">
            <div style=" 20%; background-color: aqua; float: right">我飘到哪里了</div>
            <div style=" 30%; background-color: blue; float: right;">咱俩还在一起吗</div>
            <div style=" 60%; background-color: yellowgreen; float: right;">你俩分开了</div>
            <div style="clear: both;">呵呵</div>
        </div>
    </body>
    <body>
        <div style="height: 1000px; background-color: yellow;">呵呵</div>
        <div style="position: fixed;right: 100px; top: 100px;">我是fixed</div>
        <div style="position: absolute;left: 100px; top: 100px;">我是absolute</div>
        <div style="position: relative;left: 100px; bottom: 100px;">我是relative</div>
    </body>
    <body>
        <div style="height: 500px;  400px; border: 1px solid red; position: relative">
            <div style="height: 200px;  200px; border: 1px solid yellowgreen;">
                <div style="position: absolute; bottom: 0; right: 10px;">我是position与relative的结合</div>
            </div>
        </div>
    </body>
    </html>
    边距

    display:none  隐藏标签,并把标签占有位置去掉
    display:block  让内联标签可以像块级标签一样占一行。

    position:1、fixed,固定到窗口的位置,页面滚动时,也不改变在窗口的位置。2、absolute:可以固定到一个位置,但是页面滚动,其位置也滚动。3、relative:和absolute一起使用。可以固定到父标签的框内的相对位置,而不是窗口的相对位置。   absolute和relative一起使用,无论他们之间嵌套了多少层标签,都是从内往外找,直到匹配。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div style="z-index: 10; position: fixed; top: 50%; left: 50%;
        margin-left: -250px; margin-top: -200px; background-color: white; height: 400px;  500px;">
            <input type="text" name="user"/>
            <input type="password" name="pwd"/>
        </div>
        <div style="z-index: 9; position: fixed; background-color: wheat;
        top: 0; bottom: 0; left: 0; right: 0; opacity: 0.5;">
        </div>
        <div style=" z-index:8; height: 5000px; background-color: blue">呵呵</div>
    </body>
    </html>
    多层图层
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .pg-header{
                position: fixed;
                right:0;
                left:0;
                top:0;
                height: 48px;
                background-color: red;
                line-height: 48px;
            }
            .pg-body{
                margin-top: 50px;
            }
            .w{
                width: 980px;
                margin:0 auto;
            }
            .pg-header .menu{
                display: inline-block;
                padding:0 10px 0 10px;
                color: white;
            }
            /*当鼠标移动到当前标签上时,配置生效?*/
            .pg-header .menu:hover{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="w">
                <a class="menu">全部</a>
                <a class="menu">42区</a>
                <a class="menu">段子</a>
            </div>
        </div>
        <div class="pg-body">
            <div class="w">呵呵</div>
        </div>
        <div style="height: 200px;  300px; overflow:auto;">
            <img src="2.jpg">
        </div>
        <hr/>
        <div style="height: 35px;  400px; position: relative;">
            <input type="text" style="height: 35px;  370px; padding-right: 30px;" />
            <span style="position: absolute; right: 6px; top: 10px;background-image: url(2.jpg);
            height: 16px;  16px; display: inline-block;"></span>
        </div>
    </body>
    </html>
    View Code


    更多:http://www.cnblogs.com/evilliu/p/5760232.html

  • 相关阅读:
    Linux之RPM 软件包管理
    软件开发模型之优缺点
    软件开发模型之迭代模型
    软件工程之软件开发模型类型
    软件开发模型之边做边改模型
    软件开发模型之螺旋模型
    软件开发模型之快速原型模型
    软件工程之软件开发模型介绍和选择
    卡内基的沟通原则
    软件开发模型之增量模型
  • 原文地址:https://www.cnblogs.com/caibao666/p/7054105.html
Copyright © 2011-2022 走看看