Python CSS day1

 

                                    CSS（外观）
-style
　　1.直接<div style="background-color: black;color: white">白底黑字</div>
　　2.在head里写上<style>div{background-color: black;color: white}</style>，这样<div> 就都可以直接使用格式了
　　3.在文件中创建一个CSS文件，内容是div{background-color: black;color: white}，这样在创建html的时候只要引用CSS文件就可以直接使用格式了
　　　<link rel="stylesheet" href="（路径/）名称">当前文件就不用加路径
　　优先级：1>2>3 相同属性覆盖，不同属性依次保留
-选择器
　　1.上面的第二点，就相当于标签选择器
　　2.ID选择器：寻找ID符合条件的，一般ID不能重复，但下面的选择器可以重复
　　   在head里写上<style>#i1{background-color: black;color: white}</style>
　　3. class选择器：寻找所有符合条件的标签,不管在哪或者是ID、class等，只要值是c1就符合
　　　<style>.c1{background-color: black;color: white}</style>
　　3.层级选择器：用空格来代表一层
　　　　比如:下面就可以通过 .c2 div p a{}或 .c2 div p .c3{}来设置,c3且最后一行不会改变

            <div class="c2">
                <div></div>
                <div>
                    <p>
                        <a class="c3">a</a>
                    </p>
                </div>
            </div>
            <div class="c3"></div>

　　4.组合选择器
　　　　.c1,.c2,.c3{} 多个一起设置

　　5.属性选择器

　　　　div[name='haha']{}

-基础样式
　　1.宽、高：
　　　　宽有100%，高没有。子级的百分比是根据父级的大小来继承的
　　2.颜色：
　　　　可以用red...来表示，也可以用rgb(0,0,0)或rgb的十六进制#ddd.....来显示
　　3.背景图片：（）
　　　　1.写入路径就可以把图片变成背景图片（记得加入宽、高，如果宽高大于图片，
　　　　  就会以填充的形式补充；低于同理）

            .c2{
                background-image:url("timg.gif");
                height: 330px;
                width: 440px;
            }

　　　　2.但是如果在样式里面加入background-repeat: no-repeat; 那么就不宽高不匹配也不会填充
　　　　3.在样式里面加入background-position: 50px,60px; 可以改变图片的位置，移动第二图层，第一图层不变，挖出来的洞位置也不变
　　　　4.可以把background-等全部放在一起
　　　　　　如：background : red url('image.jpg') 50px -50px no-repeat; 默认为div的宽高

　　　　5.普通图片用 <img src="">
　　4.边框：
　　　　border:4px(边框线的高度) solid（实线虚线） red（颜色),然后用height来设定整个边框的高度，也可以border-left: 只给左边的框加样式
　　5.显示：
　　　　1.display:none; 使得整个标签的内容和位置消失
　　　　2.display:block; 使内联标签显示成块级标签
　　　　3.display:inline;使块级标签显示成内联标签
　　　　4.display:inline-block; 使得纯内联标签具有内联和块级标签的属性，也能设定高度和宽度
　　　　5.visibility:hidden ;使得标签的内容消失，位置保留
　　6.cursor:
　　　　改变鼠标放到标签上的样式
　　7.边距：
　　　　padding-top:20px, 内边距，属于自己这个标签（本身增加）
　　　　margin-top：20px，外边距，不属于自己这个标签（本身不增加）
　　8.漂浮：float:left...
　　　　1.这样子，还是显示两行

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red">1</div>
    <div style="width: 80%;background-color: black;color: white">2</div>
</div>

　　　　2.这样子就不会，每一个子级尽量往左飘，如果到边缘就往上下移动,如果合起来超过一行就不行，但是这样子相当于去掉父级图层

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 80%;background-color: black;color: white;float: left">2</div>
</div>

　　　　3.这样子当子级图层不覆盖父级图层时，还是会显示父级图层

<div style="width: 500px;background-color: #00b0e8">
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 70%;background-color: black;color: white;float: left">2</div>
    <div style="clear: both"></div>  <!--放在最后-->
</div>

　　9.positon:
　　　　1.relative:单写没用，但是如果父级是relative，子级是absolute，就absolute就会根据父级的大小来固定位置，如果上一级没有relative就一级一级往上找
　　　　2.absolute:固定在XX位置，滚动滑轮看起来位置就变了

<div style="height: 2000px;background-color: red"></div>
<div style="position: absolute;height: 20px;bottom:0;right:0">返回顶部</div>

　　　　3.fixed:固定在当前页面的xx位置，滚动滑轮看起来位置也不变

<div style="height: 2000px;background-color: red"></div>
<div style="position: fixed;height: 20px;bottom:0;right:0">返回顶部</div>

　　　　4.一般使用方式
　　　　　　relative+absolute、absolute、fixed

　　10.z-index:
　　　　可以用z-index的大小来判断优先级
　　11.opacity:透明度
　　　　透明 0-1 不透明
　　PS：一些其他补充
　　　　line-height:50px; 按照给的像素，让字体居中
　　　　list-style-type; 去掉ul,ol前面的特殊标号
　　　　XX:hover; 可以使标签在鼠标移动过去的时候变色
　　　　用inline-block 如果左右标签不对齐可以适当使用float和上下左右移动3px