CSS属性总结篇

ゞ浴缸里的玫瑰 2022-01-06 06:29 302阅读 0赞

滚动条  
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  
宽:width:(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隐藏)  
宽:width: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/archive/2007/06/08/776929.html