• python学习第43天


    一.css

    1.css样式引入方式

    (1)第一种

    head标签中引入
    <style>
        /* 选择器{css属性名称:属性值;css属性名称:属性值;} */
        div{
            /* css注释 */
             200px;
            height: 200px;
            background-color: red;
        }
    
    </style>
    

    (2)第二种

    外部文件引入  工作中常用的
    创建一个css文件,stylesheet文件,比如test.css文件
    里面写上以下代码
    div{
        /* css注释 */
         200px;
        height: 200px;
        background-color: red;
    }
    
    在想使用这些css样式的html文件的head标签中写上下面的内容
    <link rel="stylesheet" href="test.css"> href对应的是文件路径
    

    (3)第三种

    内联样式:
    <div style="background-color: red;height: 100px; 100px;"></div>
    

    2.css选择器

    基本选择器

    (1)元素选择器

    div{100px;}
    标签名称{css属性:值}
    直接在head中写上标签名称
    

    (2)id选择器

    html示例代码:
    	<div id="d1">
    
        </div>
    css写法:
        #d1{
            background-color: green;
             100px;
            height: 100px;
        }
    

    (3)类选择器

    html代码:
    <div id="d1" class="c1">
        李晨浩
    </div>
    
    <div id="d2" class="c2">
        李海煜
    </div>
    
    <div id="d3" class="c1">
        张建志
    </div>
    
    css写法
    .c1{
        background-color: green;
         100px;
        height: 100px;
    }
    

    有点个性的选择器

    (4)属性选择器

    HTML代码
    <div id="d1" class="c1" xx="ss">
        李晨浩
    </div>
    
    <div id="d2" class="c2" xx="kk">
        李海煜
    </div>
    
    css写法:
    [xx]{  属性查找
        background-color: green;
         100px;
        height: 200px;
    }
    
    [xx='ss']{ 属性带属性值查找
        background-color: green;
         100px;
        height: 200px;
    }
    
    

    (5)后代选择器

    html代码示例:
    	<div id="d1" class="c1" xx="ss">
            <span>
                <a href="http://www.chenhao.com">李晨浩</a>
            </span>
        </div>
    
        <div id="d2" class="c2" xx="kk">
            <a href="http://www.chenhao.com">李海煜</a>
    
        </div>
    
        <div id="d3" class="c1">
            张建志
        </div>
        <a href="http://www.chenhao.com">xxxxxxx</a>
    css代码:
        div a{	
            color:orange; /* 字体颜色 */
        }
        父辈 子辈选择器
    

    (6)组合选择器(逗号连接)

    html代码
        <div id="d1" class="c1" xx="ss">
            <span>
                <a href="http://www.chenhao.com">李晨浩</a>
            </span>
            <span>
                <span>xxx222</span>
            </span>
        </div>
    
        <div id="d2" class="c2" xx="kk">
            <a href="http://www.chenhao.com">李海煜</a>
    
        </div>
    
        <div id="d3" class="c1">
            <a href="">张建志</a>
        </div>
        <a href="http://www.chenhao.com">xxxxxxx</a>
    
        <span>官人,你好!</span>
        
    css代码: 注意:a标签字体颜色设置,必须找到a标签才能设置
    	#d1 a,#d3 a{
            background-color: pink;
            color:yellow;
        }
    
    

    3.css样式相关

    (1)高度宽度

    html代码:
    	<div>
            div1
        </div>
        <span>span1</span>
    css写法:
    	div{
            height: 100px;
             100px;
            background-color: pink;
        }
        span{
            height: 100px;
             100px;
            background-color: green;
        }
        
     50%; 宽度高度可以设置百分比,会按照父级标签的高度宽度来计算
    
    块级标签可以设置高度宽度,即便设置了宽度,还是霸占一整行
    内联标签不能设置高度宽度,内联标签的高度宽度由内容的高度宽度来决定
    
    

    (2)字体

    html代码:
        <div>
            窗前明月光,地上鞋三双!
        </div>
    	
    css写法:
    	font-size: 20px; /* 默认字体大小是16px */
        color:green; /* 字体颜色 */
        /*font-family: '楷体','宋体'; !* 字体格式 *!*/
    
    	font-weight: 400;  /* 字体粗细 100-900,默认是400 */
    

    (3)字体对齐

    html代码:
        <div>
            只身赴宴鸡毛装!!!
        </div>
    
    css代码:
    	height: 100px;
         200px;
        background-color: yellow;
        text-align: center;  水平居中
        /*text-align: right;*/
        line-height: 100px;  和height高度相同,标签文本垂直居中
    

    (4)颜色设置

    背景,字体颜色都可以

    三种方式:
    	英文单词:red;
    	十六进制: #ff746d;
    	rgb: rgb(155, 255, 236);
    	带透明度的: rgba(255, 0, 0,0.3);  单纯的就是颜色透明度
    	标签透明度:opacity: 0.3;  0到1的数字,这是整个标签的透明度,百分比也可以
    

    (5)背景

    html代码:
        <div class="c1">
    
        </div>
    
    css写法:
        /*background-color: #ff746d;*/
        /*background-color: rgb(155, 255, 236);*/
        /*background-image: url("fage.png");*/ url写图片路径,也可以是网络地址路径
        /*background-repeat: no-repeat;*/
        /*background-repeat: repeat-y;*/
        /*background-position: right top;*/
        /*background-position: 100px 50px;*/
        /* 简写方式 */
        background: #ff0000 url("fage.png") no-repeat right bottom;
    

    (6)边框

    html代码
        <div>
            都是同学装鸡毛!
        </div>
    css写法:
    
        /* 边框简写方式,对四个边框进行设置 */
        /*border:1px solid red;*/
        /*border-left: 1px solid green;*/
        /*border-top: 1px solid blue;*/
        border- 5px;  边框宽度
        border-style: dashed;  边框样式
        border-color: aqua; 边框颜色
    
    

    (7)盒子模型

    占用空间大小
    margin: 外边距  距离其他标签或者自己父级标签的距离
    
    下面三个表示标签实际占用的空间大小
    padding: 内边距  内容和边框之间的距离
    border: 边框  
    content: 内容部分  设置的width和height
    
    

    (8)内边距

    html代码:
    	<div>
            英姿飒爽雄鸡装,飞上枝头变凤凰!
        </div>
    
    css写法:
         200px;
        height: 100px;
        border: 4px solid red;
        /*padding: 6px 8px;*/
        /*padding: 4px 2px 6px 8px;*/
        /*padding-left: 20px;*/
        /*padding-top: 20px;*/
        /*padding-right: 20px;*/
        /*padding-bottom: 20px;*/
    
    

    (9)外边距

    html代码:
        <div>
            英姿飒爽雄鸡装,飞上枝头变凤凰!
        </div>
        <div class="c1">
            <div class="c2">
            </div>
        </div>
    
    css写法:
        .c1{
            background-color: red;
            height: 100px;
             100px;
            /*margin-left: -1000px;*/
            /*margin: 10px 15px;*/
        }
    
        .c2{
            background-color: green;
            height: 20px;
             20px;
            /*margin: 10px 15px;*/
            margin-left: 20px;
        }
    

    (10)display属性

    示例:
    html代码:
        <span>
            我是span标签
        </span>
        <div class="c1">
            鹅鹅鹅,曲项向天歌!
    
        </div>
    
        <div class="c2">
            拔毛烧开水,铁锅炖大鹅!
        </div>
    css写法:
    	span{
                /*display: block;*/
            }
        .c1{
            background-color: red;
            height: 100px;
             100px;
            /*display: inline;*/
            /*display: inline-block;*/
            display: none;
        }
        .c2{
            background-color: green;
            height: 100px;
             100px;
        }
    
    display的几个值:
    inline: 将块级标签变成了内联标签
    block:将内联标签变成块级标签
    inline-block: 同时具备内联标签和块级标签的属性,也就是不独占一行,但是可以设置高度宽度
    none: 设置标签隐藏
    

    (11)浮动(float)

    浮动的元素,不独占一行,并且可以设置高度宽度
    
    html代码
    	<div class="cc">
            <!--<div>吟诗作对</div>-->
            <div class="c1"></div>
            <div class="c2"></div>
    
        </div>
    
        <div class="c3"></div>
    	
    css样式
    		body{
                margin: 0;
            }
            .c1{
                background-color: red;
                height: 100px;
                 200px;
                float: left;
            }
            .c2{
                background-color: brown;
                height: 100px;
                 200px;
                float: right;
            }
            .c3{
                background-color: pink;
                height: 100px;
                 100%;
            }
    
    
    

    浮动会造成父级标签塌陷的问题,没有高度了

    解决父级标签塌陷的问题:

    方式1:
    	给父级标签加高度
    方式2:
    	清除浮动:clear属性
    方式3: 常用
    	.clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
    	
    html代码:
        <div class="cc clearfix">
            <!--<div>吟诗作对</div>-->
            <div class="c1"></div>
            <div class="c2"></div>
        </div>
        <div class="c3"></div>
    
    
    方式4:
    css代码:overflow: hidden;
    .c1{
      height: 100px;
       100px;
      background-color: red;
      float: left;
    }
    .c2{
      height: 100px;
       100px;
      background-color: green;
      float: right;
    }
    .c3{
      background-color: yellow;
      height: 200px;
    }
    .cc{
      overflow: hidden;
    }
    
    html代码:
    <div class="cc">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    
    <div class="c3"></div>
    
    
  • 相关阅读:
    62. Unique Paths
    120. Triangle
    EBS预置文件作用收集整理
    ORA-20002: [WF_NO_USER] NAME=<name> ORIG_SYSTEM=NULL ORIG_SYSTEM_ID=NULL
    Oracle定义DES加密解密及MD5加密函数
    EBS获取附件URL
    Oracle EBS标准错误信息如何追踪 (Debug)
    更改EBS APPS 密码流程
    Oracle之物化视图
    Oracle EBS打补丁
  • 原文地址:https://www.cnblogs.com/yunchao-520/p/13232907.html
Copyright © 2020-2023  润新知