zoukankan      html  css  js  c++  java
  • Python自动化运维之21、CSS

    一、css简介

      CSS 是 Cascading Style Sheets的缩写,称为层叠样式表,用来设计网页的样式布局,以及大小来适应不同的屏幕等,使网页的样式和网页数据分离,

    二、导入css

    导入css有3种方式:

    1.元素内嵌
         行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。 <div style="background:red"></div>
    
    2.页面嵌入
         嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
             <head>
               <style>
                     div {
    background-color: red !important; # 如果有!important则会无论如何都会运用上这个css
    }   
    </style> </head> 3.外部引用 也是将一个.css文件引入到HTML文件中<link rel="stylesheet"href="mystyle.css" /> 注意: 导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面, 闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件, 因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。此外行内的样式等级最高

    三、css选择器(常用)

    标签选择器:
        div { background-color:red; } 
        <div > </div>
    
    class选择器:
        .bd { background-color:red; } 
        <div class='bd'> </div>
    
    id选择器:
        #idselect { background-color:red; } 
        <div id='idselect' > </div>
    
    关联选择器:
        #idselect p{ background-color:red; } 
        <div id='idselect' > <p> </p> </div>
    
    组合选择器:
        input,div,p{ background-color:red; } 
    
    属性选择器:
        input[type='text']{ 100px; height:200px; } 
        .c1[xiao='a']{color:red;}
    <div class='c1' xiao='a'>自定义属性选择器</div>
    伪元素选择器: a:link{background-color:red;} # 鼠标没有碰过的样式 a:hover{background-color:red;} # 鼠标放上去的样式 a:active{background-color:red;} # 选择链接时的样式 a:visited{background-color:red;} # 已经访问过的链接的样式

    更多选择器  

    四、css常用的属性  

    1  颜色属性:

    color:green
    color:#ff6600
    color:#f60
    color:rgb(255,255,255)      # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
    color:rgba(255,255,255,1)   # RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的(色彩空间)透明度
    

    2  字体属性:  

    font-size:14px/50%/larger
    font-family:微软雅黑,serif
    font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)
                       100、200、300~900,400 = normal,而 700 = bold
    
    简写方式:
    font: 20px '微软雅黑'

    3  背景属性:  

    background-image:url(图片路径)
    background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)
    background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)
    
    简写方式:
        background:背景颜色 url(图像) 重复 位置
        background:#f60 url(images/bg,jpg) no-repeat top center
    

    4   文本属性:  

    text-align: center;   # 横向排列
    line-height: 200px;   # 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
    text-indent: 150px;   # 首行缩进,
    letter-spacing: 10px; # 字符间距
    word-spacing: 20px;   # 单词间距
    

    5   边框属性:

    border-style: none   # 无边框
                  solid  # 直线边框
                  dashed # 虚线边框
                  dotted # 点状边框
                  double # 双线边框
                  inherit # 继承
                  groove # 凸槽边框
                  ridge  # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性
    
    border-width:px  固定值的边框
                 medium 中等边框
                 thick 粗边框
                 thin 细边框
                 inherit继承        
    
    border-color:red
                  #ff0000
                  rgb(255,255,0)
                  rgba(255,255,0,0.1)
    
    border-radius: px 倒角 简写方式: border:2px #f60 solid

    6   列表属性: 

    list-style-type:none	无标记。
                    disc	默认。标记是实心圆。
                    circle	标记是空心圆。
                    square	标记是实心方块。
                    decimal	标记是数字。
                    decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
                    lower-roman  	小写罗马数字(i, ii, iii, iv, v, 等。)
                    upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
                    lower-alpha 	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
                    upper-alpha 	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
                    lower-greek	 小写希腊字母(alpha, beta, gamma, 等。)
                    lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
                    upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
                    hebrew	  传统的希伯来编号方式
                    armenian	传统的亚美尼亚编号方式
                    georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
                    cjk-ideographic	简单的表意数字
                    hiragana	标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)
                    katakana	标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)
                    hiragana-iroha	标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)
                    katakana-iroha	标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)
    
    list-style-position:inside	列表项目标记放置在文本以内,且环绕文本根据标记对齐。
                        outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
                        inherit	规定应该从父元素继承 list-style-position 属性的值。
    
    list-style-image:URL	   图像的路径。
                     none	   默认。无图形被显示。
                     inherit   规定应该从父元素继承 list-style-image 属性的值。
    
    简写方式:
          list-style:square inside url('/i/arrow.jpg');
    

    7  dispaly属性:  

    display:none    # 隐藏属性
            block   # 变块级元素
            inline  # 变内联元素
            inline-block # 内联元素默认不能设置长宽,块级可以,这个让内联元素可以设置height width
    

    8  cursor属性:

    cursor:pointer  # 鼠标变小手
           help       
           move
    

    9  opacity属性:

    opacity:0.4  # 0-1之间的小数,颜色透明度
    

    10  z-index属性:  

    z-index:10  # 设置优先级,一般用在模态对话框

    11  margin,pading边距属性:

    margin: 10px    # 外边距(本身不会增加),与边框的距离
    padding: 10px   # 内边距(本身会增加) 遵循上右下左,元素之间的距离

    12  float属性  

    float:left/right
    clear:both
    
    <body>
        <div style=" 500px;border:2px solid red;">
            <div style="20%;float: left;background-color: aqua;">a</div>
            <div style="80%;float: left;background-color: beige;">b</div>
            <div style="clear:both"></div>
        </div>
    </body>

    13  position属性

    position: fixed      # 固定浏览器窗口,网页返回顶部的按钮
              absolute   # 固定窗口
              relative   # 一般用于和absolute配合使用,相对于absolute
    
        <div style="height:2000px;">
            <div style="position: fixed;bottom: 0px;right: 0px;background-color: red;">111111</div>
        </div>
        <div style="height: 500px; 400px;border: 2px solid red;position: relative;">
            <div style="height: 200px;background-color: red;">
                <div style="position:absolute;bottom: 0px;right: 0px;">111</div>
            </div>
        </div>

    更多属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模态对话框</title>
        <style>
            .hide {
                display: none;
            }
            .modal{
                width:400px;
                height:300px;
                background-color: #dddddd;
                position: fixed;
                top:50%;
                left:50%;
                margin-top:-150px;
                margin-left:-200px;
                z-index: 10;
            }
            .shadow {
                position: fixed;
                top:0px;
                left:0px;
                right:0px;
                bottom:0px;
                /*background-color: black;*/
                /*opacity: 0.6;*/
                background-color: rgba(0,0,0,.6);
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <input type="button" value="添加"/>
    
        <div class="shadow"></div>
        <div class="modal">
            <input type="text"/>
            <input type="text"/>
            <input type="text"/>
            <input type="text"/>
        </div>
        <div style="height: 2000px;"></div>
    </body>
    </html>
    模态对话框

    注意:

    1、css文档从上到下执行,以最后一个为准

    a {
        font-size: 10px;
    }
     
    b {
        font-size: 40px;
    }
     
    <p class = "a b"> ddd </p>

    2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt 切记

    3、父div里面的子div都float,

      方法1、在最后加一个div然后添上属性 clear:both 

      方法2、定义一个通用属性,

    clearfix:afte{
        content: '111';
        display: block;
        clear: both;
    
        /* visibility 隐藏内容但占高度*/
        visibility: hidden;
        height: 0;
        /*display: none;隐藏内容也不占高度*/
    }

    一些案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>带图像的登录</title>
        <style>
            .icon-name{
                background-image: url(i_name.jpg);
                height:16px;
                width:200px;
                display: inline-block;
                background-repeat:no-repeat;
            }
        </style>
    </head>
    <body>
        <div style="200px;position: relative;">
            <input style="180px;padding-right: 20px;" type="text"/>
            <span class="icon-name" style="position: absolute;top:5px;right: -186px;"></span>
        </div>
    </body>
    </html>
    带图像input
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器运用清除浮动</title>
        <style>
            .c1:after {
                content:'aaa';
            }
            .c2:before {
                content:'666';
            }
            .clearfix:after{
                content:'.';
                clear:both;
                display: block;
                visibility: hidden;
                height:0;
            }
            .left{
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="c1">ddd</div>
        <div class="c2">888</div>
    
        <div style="background-color: red;" class="clearfix">
            <div class="left" style="height:100px;background-color: green">1</div>
            <div class="left">2</div>
        </div>
    
    </body>
    </html>
    伪类选择器运用清除浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小尖角</title>
        <style>
            .icon {
                display: inline-block;
                border-top:15px solid red;
                /*border-right:15px solid green;*/
                /*border-bottom:15px solid yellow;*/
                /*border-left:15px solid pink;*/
                border-right:15px solid transparent;
                border-bottom:15px solid transparent;
                border-left:15px solid transparent;
            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>
    </html>
    小尖角
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台布局一</title>
        <style>
            * {
                margin:0;
            }
            .pg-header {
                height:48px;
                background-color: #2459a2;
            }
            .pg-body .body-menu{
                position: absolute;
                top:48px;
                left:0;
                bottom:0;
                width:200px;
                background:red;
            }
            .pg-body .body-content{
                position: absolute;
                top:48px;
                left:210px;
                /*bottom:0;*/
                right:0;
                background:green;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-body">
            <div class="body-menu"></div>
            <div class="body-content">
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            </div>
        </div>
        <div class="pg-heaher"></div>
    </body>
    </html>
    后台布局一
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>后台布局二</title>
        <style>
            * {
                margin:0;
            }
            .pg-header {
                height:48px;
                background-color: #2459a2;
            }
            .pg-body .body-menu{
                position: absolute;
                top:48px;
                left:0;
                bottom:0;
                width:200px;
                background:red;
            }
            .pg-body .body-content{
                position: absolute;
                top:48px;
                left:210px;
                bottom:0;
                right:0;
                background:green;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-body">
            <div class="body-menu"></div>
            <div class="body-content">
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
                asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>asdfsadasd<br/>
            </div>
        </div>
        <div class="pg-heaher"></div>
    </body>
    </html>
    后台布局二
  • 相关阅读:
    leetcode 150 逆波兰表达式求值
    leetcode 15 三数之和
    leetcode 12题 数字转罗马数字
    leetcode 134 加油站问题
    socket编程之多次收发数据
    socket编程
    random实现验证码功能
    ECMAScript运算符
    JavaScript数据类型
    window对象
  • 原文地址:https://www.cnblogs.com/xiaozhiqi/p/5830033.html
Copyright © 2011-2022 走看看