css笔记

CSS
    在标签上设置style属性
        style=" height:48px;"
    编写css样式：
        1，标签的style属性
        2, 写在head里面，style标签中写样式
            -id选择器
                #i1{
                    background-color:#2459a2;
                    height: 48px;
                }
            -class选择器
                .c1{
                    background-color:#2459a2;
                    height: 48px;
                }
                <标签 class='c1'>jack</标签>
                <标签 class='c1'>jacken</标签>
            -标签选择器
                div{
                    ...
                }
                所有的div设置上此样式
            -层级选择器（空格隔开）
                .c1 .c2 div{
                ...
                }
                带有c1的标签下的带有c2的标签下的div标签应用此形式
            -组合选择器（逗号隔开）
                 #c1,.c2,div{
                ...
                }
                id='c1'和全部class='c2'和所有div标签都应用此形式
            -属性选择器
                input[type='text']{
            background-color:black;
            color:red;
                }
                找到input标签(选择器)有[type='text']属性的应用此样式
            PS:
                -style优先级，标签内部的style优先，编写顺序，就近原则
        2.5,css样式也可以写在单独文件里
            引用<link rel="stylesheet" href="路径"/>
        3, 注释
            /*  */和<!--   --> 我在pycharm上尝试了，都可以
        4，边框
            -宽度，样式，颜色（border:1px solid red;）
            -border-left
        5,
            height,高度 百分比
            width,宽度 像素 ，百分比
            line-height, 垂直方向根据标签高度居中
            text-align:center, 水平方向居中
            color,字体颜色
            font-size,字体大小
            font-weight字体加粗
        6，float
            让标签浮起来，块级标签也可以堆叠
            浮起来后外边框消失时，标签内写下面的代码
               <div style='clear:both;'></div>
        7，display 转换块级标签和行内标签
            display:none 让标签消失
            display:inline;
            display:block;
            display:inline-block;
                具有inline属性，默认自己有多少占多少
                具有block属性，可以设置高度，宽度，margin,padding
            ******
            行内标签无法设置高度，宽度，margin,padding
            块级标签可以设置高度，宽度，margin,padding

        8，padding margin（0，auto）
            边距，
            padding，内边距
            margin，外边距
        9，text-align

        10，height,width,line-height,color,font-size,font-weight
css补充
    position:
        a, fiexd=>固定在页面的某个位置,不随滚动条滚动
        b, relative + absolute
            <div style='position:relative;'/>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>
    opacity:0.5  透明度
    z-index: 层级顺序
    overflow: hidden,auto
    hover
    background-image:url('image/4.gif');  #默认，div大，图片重复
    background-repeat:repeat-y;
    background-position-x:
    background-position-y:
    background-position: 10px  10px
    background: