常见css款式特性大全(汉语注解)

2020-10-21 16:26 jianzhan

1 CSS文本特性:
color : #999999; /*文本色调*/
font-family : 宋体,sans-serif; /*文本字体样式*/
font-size : 9pt; /*文本尺寸*/
font-style:itelic; /*文本斜体*/
font-variant:small-caps; /*小字体样式*/
letter-spacing : 1pt; /*字间隔离*/
line-height : 200%; /*设定行高*/
font-weight:bold; /*文本粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删掉线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删掉连接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文本右对齐*/ 
text-align:left; /*文本左对齐*/
text-align:center; /*文本垂直居中对齐*/
text-align:justify; /*文本分散化对齐*/
vertical-align特性
vertical-align:top; /*竖直向上对齐*/
vertical-align:bottom; /*竖直向下对齐*/
vertical-align:middle; /*竖直垂直居中对齐*/
vertical-align:text-top; /*文本竖直向上对齐*/
vertical-align:text-bottom; /*文本竖直向下对齐*/
2、CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右侧框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左侧框留空白
3、CSS标记特性
list-style-type:none; /*不序号*/
list-style-type:decimal; /*阿拉伯数据*/
list-style-type:lower-roman; /*小写罗马数据*/
list-style-type:upper-roman; /*大写罗马数据*/
list-style-type:lower-alpha; /*小写英文本母*/
list-style-type:upper-alpha; /*大写英文本母*/
list-style-type:disc; /*实心圆形标记*/
list-style-type:circle; /*空心圆形标记*/
list-style-type:square; /*实心方形标记*/
list-style-image:url(/dot.gif); /*照片式标记*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
4、CSS情况款式
background-color:#F5E2EC; /*情况色调*/ 
background:transparent; /*透視情况*/
background-image : url(/image/bg.gif); /*情况照片*/
background-attachment : fixed; /*水浮印固定不动情况*/
background-repeat : repeat; /*反复排序-网页页面默认设置*/
background-repeat : no-repeat; /*不反复排序*/
background-repeat : repeat-x; /*在x轴反复排序*/
background-repeat : repeat-y; /*在y轴反复排序*/
特定情况部位
background-position : 90% 90%; /*情况照片x与y轴的部位*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*垂直居中对齐*/
5、CSS联接特性
a /*全部超连接*/
a:link /*超连接文本文件格式*/ 
a:visited /*访问过的连接文本文件格式*/
a:active /*按下连接的文件格式*/
a:hover /*电脑鼠标转到连接*/
电脑鼠标光标款式:
连接手指 CURSOR: hand
10字体样式 cursor:crosshair
箭头朝下 cursor:s-resize
10字箭头 cursor:move
箭头朝右 cursor:move
加1问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文本I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案设计(IE6)   p {cursor:url(“光标文档名.cur”),text;}
6、CSS框线1览表
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/
以上是提议撰写方法,但还可以应用基本的方法 以下:
border-top-color : #369 /*设定上框线top色调*/
border-top-width :1px /*设定上框线top宽度*/
border-top-style : solid/*设定上框线top款式*/
别的框线款式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体式内凸框*/
ridge /*立体式浮雕框*/
inset /*凹框*/
outset /*凸框*/
7、CSS表单应用
文本方块 
按钮 
复选框 
挑选钮 
多写作字方块 
往下拉式菜单 选项1选项2
8、CSS界限款式
margin-top:10px; /*上界限*/
margin-right:10px; /*右侧界值*/
margin-bottom:10px; /*下界限值*/
margin-left:10px; /*左侧界值*/

9、CSS滤镜特性
 
Filter:在款式中再加滤镜殊效。因为此特性內容较为多,大家将到下1章独立对滤镜详细介绍。
1.Alpha:设定全透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:全透明度级別,范畴是0⑴00,0意味着彻底全透明,100意味着彻底不全透明。FinishOpacity:设定渐变色的全透明实际效果时,用来特定完毕时的全透明度,范畴也是0 到 100。Style:设定渐变色全透明的款式,值为0意味着统1样子、1意味着线型、2意味着放射性状、3意味着长方形。StartX和StartY:意味着渐变色全透明实际效果的刚开始X和Y座标。 FinishX和FinishY:意味着渐变色全透明实际效果完毕X和Y 的座标。
2.BlendTrans:图象之间的淡入和淡出的实际效果
BlendTrans(Duration=?) Duration:淡入或淡出的時间。留意:这个滤镜务必相互配合JS创建照片编码序列,才可以做出照片间实际效果。
3.Blru:创建模糊不清实际效果
Blur(Add=?, Direction=?, Strength=?) Add:是不是单方面向模糊不清,此主要参数是1个布尔运算值,true(非0)或false(0)。 Direction:设定模糊不清的方位,在其中0度意味着竖直向上,随后每45度为1个企业。 Strength:意味着模糊不清的象素值。
4.Chroma:把特定的色调设定为全透明
Chroma(Color=?) Color:是指要设定为全透明的色调。
5.DropShadow:创建黑影实际效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:特定黑影的色调。OffX:特定黑影相对元素在水平方位偏位量,整数金额。 OffY:特定黑影相对元素在竖直方位偏位量,整数金额。 Positive:是1个布尔运算值,值为true(非0)时,表明为创建外黑影;为false(0),表明为创建内黑影。
6.FlipH:将元素水平翻转
7.FlipV:将元素竖直翻转
8.Glow:创建外发光效实际效果
Glow(Color=?, Strength=?)
Color:是特定发光的色调。
Strength:光的强度,能够是1到255之间的任何整数金额,数据越大,发光的范畴就越大。
9.Gray:去掉图象的颜色,显示信息为黑与白图像
10.  Invert:翻转图像的色调,造成相近底片的实际效果
11.  Light:置放灯源的实际效果,能够用来仿真模拟灯源在物件上的投射实际效果 留意:此实际效果必须用JS设定光的部位和强度。
12.  Mask:创建全透明遮罩
Mask(Color=?) Color:设定底色,让目标遮挡住底色的一部分全透明。
13.  RevealTrans:创建切换实际效果
RevealTrans(Duration=?, Transition=?)
Duration:是切换時间,以秒为企业。
Transtition:是切换方法,可设定为从0到23。
留意:假如做网页页面间的切换实际效果,能够在<head>区再加1行编码:<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。假如用在网页页面里的元素务必相互配合JS应用。
14.  Shadow:创建另外一种黑影实际效果 Shadow(Color=?, Direction=?) Color:是指黑影的色调。
Direction:是设定投射的方位,0度意味着竖直向上,随后每45度为1个企业。
15.  Wave:波纹实际效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add:表明是不是显示信息原目标,0表明无法显示,非0表明要显示信息原目标。 Freq:设定起伏的个数。LightStrength:设定波浪纹实际效果的光照强度,从0到100。0表明最弱,100表明最强。 Phase:波浪纹的起止相角。从0到100的百分标值。(比如:25非常于90度,而50非常于180度。) Strength:设定波浪纹摆动的力度。
16.  Xray:呈现照片的轮廊,X光片实际效果
留意:在应用CSS滤镜时,务必应用在有地区的元素,例如报表,照片等。而文字,段落这样沒有地区的元素不可以应用CSS滤镜,对这样的元素大家能够设定元素的Height和Width款式或座标来完成。"