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加入轮郭效果

原文地址:https://www.cnblogs.com/zhangchenliang/p/776929.html