css

<!----------------------------------------------------------------->
CSS (cascading style sheet)层叠样式表(一般引入后通配符初始化)
    <style type="text/css"></style>
    引入CSS样式:
        1.行间样式
        2.页面级
        3.外部CSS样式引用(<link rel="stylesheet" href="">)
    
    CSS与HTML同时加载属于异步
    异步(同时处理)、同步(先后处理)
    CSS复杂选择器
        1.选择器:
        !important>行间样式>id>class|属性>标签选择器>通配符
        1.1id #(1对1) 
        1.2class .(多个class可用于一个)
        1.3标签选择器 
        1.4通配符 *
    权重计算问题(考点)
    !!重要CSS权重               值
        !important          Infinity(无穷) 正无穷在计算机可计算
        行间样式 id         100
        class|属性|伪类     10
        标签|伪元素       1
        通配符                 0
        值的计算是由256进制来计算

        (运用权重来进行先后顺序)重复(冗余、耦合度高)
        父子选择器/派生选择器(关系成立即可)div  em{}div下所有em
        直接子元素选择器  div>em div下的em
        //CSS选择器解析是自右向左

        并列选择器

        分组选择器div,em,span{}用来简化CSS代码




    CSS基础属性(更多找css字典)
        front-size:   ;(字体大小)大小为高度
        front-weight:  ;bold,lighter,normal,bold,bolder,100 200 ... 900
        front-style:  ;italic,
        front-family:   ;arial
        color: (颜色代码,颜色函数 rgb(255,255,255)
        #000黑 #fff白
            #ff4400;
            r       g       b
            00-ff   00-ff   00-ff
        )


        border:1px  solid black;外边框 复合属性

            border-style: solid(实线) dotted(点状虚线) dashed(条状虚线)
            border-left-color:red;      transparent(透明色)
            border-top-color:red;
            border-right-color:red;


    CSS文本
        文本对齐
            text-algin: ;right,left,center./*对齐方式*/
        单行文本
            line-height:  ; 文本的所占高度 行高
        垂直
            将文本高度设置与容器高度相同
        首行缩进
            text-indent: 2em;
            em=1*front-size
        划线
            text-decoration:line-through;中划线
            none(消失)overlin(上划线)underline(下划线)
        鼠标提示符效果
            cursor:  ;
        伪类选择器
            :hover{}
    !!公司经验(考点)
            1.行级元素,内联元素 inline
                feature:内容决定元素所占位置,不可以通过css改变宽高
                span strong em a del
                    span{display:inline;}里边为默认内容
            2.块级元素  block
                feature:独占一行 可以通过CSS改变宽高
                div p ul li ol form address
                    div{display:block}里边为默认内容
            3.行级块元素 inline-block
                feature:内容决定大小 可以改宽高
                img
                img{display:inline-block}
        !!凡是带有inline的元素,都有文字特性:解决方法img{margin-left:-6px;}
    !!公司习惯:先定义功能,后选样式(后引用)
    标签选择器可做自定义标签样式
        *{padding:0;margin:0;}初始化所有标签
    !!盒子模型(上、右、下、左)"left", "top", "right" 以及 "bottom"计算问题
        盒子三大部分:
        盒子壁:border
        内边距:padding
        盒子内容:width+height 
        实际展示内容由以上来进行计算
    margin+border+padding+(content=width+height)
    body 有个天生的margin为8像素
    *{}一般初始化所标签
    层模型
        绝对定位
        position:absolute; relative;fixed;
        left:   ; 左边线   right:  ;右边线
        top:    ;

        relative:保留原来位置进行定位 
         相对自己原来的位置进行定位
        absolute:脱离原来位置进行定位 
         相对于最近的有定位的父级进行定位,如果没有,那么相对于文档进行定位
        relative 为参照物 absolute 为定位



        fixed 广告定位
            position: fixed;
            left: 0;
            top:0;
            广告居中定位
            position: fixed;
            left: 50%;
            top:50%;
            width: 200px;    
            height: 200px;
            (为什么要有下列写法:div的50%是以左上角为顶端
            margin-top:-100px;      //宽度一半的相反数
            margin-left:-100px;     //高度一半的相反数

    



posted @ 2020-04-17 15:36  九八年的风  阅读(115)  评论(0编辑  收藏  举报