• CSS属性总结篇


    滚动条
    1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。

    2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色

    我们通过几个实例来讲解上述的样式属性:
    1.让浏览器窗口永远都不出现滚动条
    没有水平滚动条
    <body style="overflow-x:hidden">
    没有垂直滚动条


    注意:括号内为各种可选属性.
    类型:type

     字体:font-family
     大小:font-size
     样式:font-style:(italic,normal,oblique(偏斜体))
     粗细:font-weight:(bold粗体,normal正常,bolder特粗,lighter特细 ,100-900)
     变量:font-variant:(normal正常,small-caps小型大写字母)
     行高:line-height:(20px,...)
     大小写:text-transform:(capitalize首字母大写,uppercase大写,lowercase小写,none无)
     修饰:text-decoration:(underline下划线,overline上划线,line-through删除线,blink闪烁,none无)
     颜色:color:(#0000cc,red,...)

    背景:backdrop
     背景颜色:background-color:(#fff)
     背景图像:background-image:(url(mypicture.jpg))<!--这里用的是相对于文档,在都用这个的哦-->
     重复:background-repeat:(no-repeat不重复,repeat重复,repeat-x 横向重复,repeat-y纵向重复)
     附件:background-attachment:(fixed固定,scroll滚动)
     水平位置与垂直位置:background-position:(center水平居中,center垂直居中或20px水平20px,20px垂直20px)

    区块:block
    单词间距:word-spacing:( 20px;normal)
    字母间距:letter-spacing: (1px;normal)
    垂直对齐:vertical-align:(baseline将元素的基准线和母体元素的基准线对齐,sub将元素以下标的形式显示,super将元素以上标的形式显示,top将元素顶部同最高的母体元素对齐,text-top将元素的顶部同母体元素文字的顶部对齐,middle将元素的底部同最低的母体元素对齐,text-bottom将元素底部同母体元素文字的底部对齐.)
    文本对齐:text-align:(left,center,right,justify)
    文字缩进:text-indent:(20pt,20%,20px,2em....)
    空格:white-space:(pre保留,normal,nowrap不换行)

    方框:casing
    宽:(auto,20px)
    高:height:(auto,1em)
    浮动:float:(left,right,none)
    清除:clear:(both,left,right,none)
    填充:padding-top:(2px),padding-right:(2px),padding-bottom:(2px),padding-left:(2px)

    边框:frame
    border-top,border-right,border-bottom,border-left
    样式:(none无,dotted点划线,dashed虚线,solid实线,double双线,groove槽状,ridge脊状,inset凹陷,outset凸出)
    宽度:(thin细,medium中,thick粗,10px像素)
    颜色:(#999999)

    列表:list
    类型:list-style-type:(disc圆点,circle圆圈,square方块,decimal数字,lower-roman小写罗马数字,upper-roman大写罗马数字,lower-alpha小写字母,upper-alpha大写字母,none无)
    项目符号图像:list-style-image:(url(mypic.gif))
    位置:list-style-position:(outside外部,inside内部)

    定位:place
    类型:position:(relative相对,static表态,absolute绝对)
    显示:visibility:(visible可见,inherit继承,hidden隐藏)
    宽:200px
    高:height:100px
    Z轴:z-index:2(重叠层次)
    溢出:overflow:(hidden,visible,scroll,auto)
    定位:top:(20px)
             right
             left
            bottom
    剪辑:clip:(rect(auto上自动,20px右,20px下,10px左)

    扩展:exhibit
    分页之前:page-break-before:(always总是,left,right,auto)
    分页之后:page-break-after:(同上)
    视觉效果:(光标:wait)
    过滤器:
    alpha透明的渐变效果
                  BlendTrans混合渐变过滤器
                  Blur风吹模糊效果
       Chroma特定颜色的透明效果
       DropShadow阴影效果
       FlipH水平翻转效果
       FlipV垂直翻转效果
       Glow边缘光晕效果
       Gray黑白效果
       Inzert图片产生底片效果
       Light加入光源投射效果
       Mask遮蔽效果
       RezealTrans显示渐变过滤器
       Shadow渐长阴影效果
       Waze加入波形效果
       Xray加入轮郭效果

  • 相关阅读:
    js中this.index使用
    js中index()的四种经典用法(转https://blog.csdn.net/superit401/article/details/51726826)
    splice()的用法
    $().click()和$(document).on('click','要选择的元素',function(){})的不同(转https://www.cnblogs.com/sqh17/p/7746418.html)
    transform(转https://blog.csdn.net/qq_24189933/article/details/79293870)
    transition 带的参数什么意思
    最后一次作业----------课程总结
    实训作业---I/O流
    第五次实训
    。。。
  • 原文地址:https://www.cnblogs.com/zhangchenliang/p/776929.html
Copyright © 2020-2023  润新知