背景渐变:

    background-image
    线性渐变
        值:linear-gradient(渐变方向,色标,色标,色标);
        方向:
            关键字:
                to top 从下往上
                to bottom 从上往下
                to left 从右往左
                to right 从左往右
            角度:
                角度单位 deg
                0deg 相当于 to top
                角度跟时钟一样
            色标:
            颜色 0%
        如:
            red 0%,blue 50%,yellow 100%;

    径向渐变
        radial-gradient([size at position],色标,色标....);
    []代表 中括号里面的代码可以加也可以不加
        size  渐变半径
            px
        at 关键字
        position 
            渐变圆心所在的位置
            两个值组成:
                px
                百分比
                关键字:
                    left right center
                    top bottom center
字体 文本相关样式
字体属性
    font-family:
    值:以,隔开的多个字体
    eg:
        font-family:"微软雅黑","宋体";
字体大小:
    font-size
    单位:px
        默认是16像素
        最小是12像素,当设置的字体大小低于12px最终显示的还是12像素
字体加粗:
    font-weight
    取值:
        normal  正常不加粗
        bold    加粗
        100-900  550 >=550 加粗 <500不加粗
字体倾斜:
    font-style
    值:
        normal 正常不倾斜
        italic 倾斜
小型大写
    font-variant
    取值:  
        normal 正常
        small-caps 小型大写
综合:
    font:
        font-style font-variant font-weight font-size font-family;
    推荐使用:
    font:14px "微软雅黑";
    font:14px/28px "微软雅黑";
文本相关属性:
    文本颜色
        color  
            值:合法颜色值

            黑色:
                #333
            灰色:
                #666
            淡灰色:
                #999
    文本对齐方式
        text-align
            值:    
                left right center
            备注:
                text-align属性不止对文本有效果,对于行内元素同样有效果
    文本修饰
        text-decoration
        值:
            none 无线条样式
            underline 下划线
            line-through 删除线 中划线
            overline 上划线
    行高:
        一行文本所占的高度
        注意:
            1,一行文本,行高永远和元素的上边缘重合的
            2,当行高的高度大于文本的高度时,那么该文本会在行高范围内居中
        让一行文本在元素范围内居中的方法:
            line-height=height
    属性:
        line-height
            px
            数字  一个字体大小
    首行缩进
        text-indent
        值:
            px
            em
    文本阴影:

    text-shadow:
        offsetx offsety blur color;


表格相关样式:
    color
    font-size
    border
    width
    height
表格特有样式:
    border-collapse  边框合并
        seperate  分离 默认
        collapse  合并
    border-spacing  相邻单元格之间的距离  相当于  cellspacing

        两个值
        x1 x2   x1 水平距离 x2垂直距离
    主体:border-collapse:seperate
table-layout: 表格布局
    auto 默认的 自动表格布局 根据内容来自动分类td宽度
        好处:灵活
        不好:渲染效率比较低
    fixed 固定的  列宽度 是有总宽度来平均分配
        好处:加载速度比较快
        不好:不太灵活

td:
    vertical-align  垂直对齐方式  相当于html属性 valign属性
    使用场景:
        1,图文混排时,定义文字相对于图片的对齐方式
        baseline 基线对齐
        bottom 底部对齐
        middle居中对齐
        top顶部对齐
        图片3像素问题?
            解决:
                vertical-align:bottom;
                将图片变成块元素
        2,td中设置单元格内容的垂直对齐方式
显示方式属性:
    display
    值:
        block 让元素变成块元素(比如a标签)
        inline-block 让元素变成行内元素
            行内元素,只是可以设置宽高以及上下的margin
            使用场景:一个行内元素需要设置宽高或者设置上下margin
        inline 让元素变成行内元素
        none 隐藏元素
    元素显示消失:
        消失:
            display:none
        显示:
            display:元素默认的display值    
        display:none 元素消失后,而且不占据页面空间(脱离文档流)
如何一个元素hover需要控制另外一个元素的样式:
    那么被控制的元素一定的hover元素的后代元素
注意:不要常用交给一个块元素变成行内元素,因为没有意义

显示效果:
    显示消失
        visibility
            visible 可见
            hidden  隐藏元素
display:none 和 visibility:hidden 异同
相同:都是让元素消失
不同:display:none 消失后脱离文档流 不占据页面空间
    visibility:hidden 消失后并没有脱离文档流依然占据着页面空间

    透明度:
        opacity
        值: 0-1  0完全透明 1完全不透明

光标样式:
    属性:  
        cursor
            default 默认值 (文本 I 普通箭头 a标签小手)
            pointer 小手
            wait  等待
            crosshair 十字光标
            not-allowed 禁用

列表项
    列表项标志:
        属性:
            list-style-type:  简写 list-style
            有序列表:
                1 a A I 
                none 取消列表项标志
            无序列表:
                disc  实心圆
                circle 空心圆
                square 实心方块
                none 无列表项标志
        注意:只需要记住
            list-style:none; 取消列表项标志

            列表项位置:
            list-style-position
            值:
                inside 内部(在li内部)
                outside 外部(在Li外部 默认值)
            list-style-image
            列表项图片(自定义列表项标志)
            值
             url(路径)
        list-style属性:
            type image position;
        常用:list-style:none;
Last modification:December 17th, 2019 at 11:43 pm
如果觉得我的文章对你有用,请随意赞赏