CSS样式笔记

 

 

CSS 样式; 注释/* 注释内容*/
    书写方式:1、在head头里面写<style>样式
             2、单独存为一个文件、通过link标签调用
                -<link rel=“stylesheet” href="文件路径"
             3、一个标签应用多个css样式：class=“css1 css2” 中间用空格隔开
             
    
<style>
    1、选择器
    位于Head头里面
    -id选择器(body里面通过id=‘XX’调用)
        #i1{
            background: black;
            color: #ffffff;
        }
    -class选择器(通过class调用)
        .i1{
            background: black;
            color: #ffffff;
        }
    -标签选择器(标签名称为此的默认就匹配这个样式)
        div {
            background: black;
            color: #ffffff;
        }
    -层级选择器【空格】(逐层匹配后应用到最里层)
        .c1 .c2 #C3 div {
            background: black;
            color: #ffffff;
        }
    -组合选择器(逗号)[取取并集，所有的都匹配进行修饰]
        c1,c2,c3,div{
            background: black;
            color: #ffffff;
        }
    -属性选择器
        input[name="user"]{
            background: black;
            color: #ffffff;
        }
    PS:优先级：标签内的style属性 > head 中的<style标签>
</style>标签    
    2、边框
        宽度、样式、颜色
        border:2px solid red ;/*边框类型和颜色*/
        color: lawngreen; /*边框内字体颜色*/
        height: 48px; /*边框高度*/
        width: 96px;  /*边框宽度*/
        width: 90%; /*占用整行的百分比*/
        font-size: 20px; /*字体大小*/
        font-weight: 800;/*字体粗细*/
        text-align: center; /*文本横向居中*/
        line-height: 48px; /*文本上下指定像素居中*/
    3、背景
        background:red;
           
    4、float 
        设置标签的位置如何漂移对齐
        clear：both 纳管子div
    5、display
        display:none
        display:block
        display:inline
        display:inline-block (具有inline和block的全部属性)
        行内标签：无法设置高度、宽度和边距：padding、margin、
        
    6、padding margin(0,auto) 0auto 自动去除所有边距
        margin:外边距
        --应用：
        padding:内边距
            -top     上
            -bottom 下
            -left     左
            -right    右

• • 指定一个值时 该值指定四个边的内边距
  • 指定两个值时 第一个值指定上下两边的内边距 第二个指定左右两边的内边距
  • 指定三个值时 第一个指定上边的内边距.第二个指定左右两边 第三个指定下边
  • 指定四个值时分别为上 右 下 左（顺时针顺序）

            
    7、text-align    
    8、text-align
    9、height,width,line-height,color,font-size\font-weight
    10、position: fixed; 固定到浏览器窗口的指定位置
                left：0；
                bottom：0；
        position:relative(放在父级) + ablolute(放在子标签) 固定到父级标签的指定位置。
        <div style="width: 400px; height:100px;border: 1px solid red;margin: 0 auto;position: relative">
        
            <div style="position: absolute;left: 0;bottom: 0;background: #7d7d7d;width: 50px;height: 50px"></div>
        </div>
    11、z-index：多个div叠放层级的优先级。值越大，越在最外层。
        配合position一起使用
    12、opacity：背景色的透明度：0位完全透明-1为完全不透明
    13、overflow:
                内部元素只显示本标签指定的大小
                hidden(多余部分隐藏)
                auto(多余部门出现滚动条)
    14、hover的应用：当鼠标移入的时候才生效的css样式
        .pg_header_a:hover{
            background-color: chartreuse;
        }
    15、background-image:url('image/校花.gif')
    16、background-repeat：norepeat 不重复
        background-repeat-x：横向重复                    
        background-repeat-y：纵向重复                    
        background-position: x y 简写
        background：url(图片路径) x y 最简写
    17、设置超出部分文本隐藏&用省略号代替overflow:hidden; text-overflow:ellipsis;white-space:nowrap;
　　 18、transform: translateX(-50%);/*横向移动自身宽度的比例*/

如果