常用CSS样式
CSS样式常用单位表:
相对单位:em(当前字体的高度),ex(以字母X的大小为高度单位),PX,%
绝对单位:in(英寸(1英寸=2.54厘米)),cm,mm
文字设置(14)
font-family:设置字体(可以接系统中存在的所有字体)
font-size:设置字体大小
font-style(3): normal:正常(默认值),italic:斜体,oblique:偏斜体
font-weight(1):bold(粗体)
text-transform(3): lowercase:全部小写,uppercase:全部大写
capitalize:首字母大写(中间字母不变）
text-decoration(5):underline:下划线,overline:上划线
line-through:给文字划删除线,blink:文字闪烁
none:不产生任何的效果
text-align(4): center,left,right,justify(两端对齐)
text-indent:段落首行缩进
link(4): a:link:未点击,a:active:已点未放,a:hover:指定时,a:visited:被访问后
word-spacing:文字间距
letter-spacing:字母间距
line-height:行距
vertical-align(8): top:将内容对齐到顶部,bottom:将内容对齐到底部
text-top:将内容对齐到文字顶部
text-bottom:将内容对齐到文字底部
baseline(默认值):将内容基线对齐到母体基线
middle:将内容中点对齐到母体中点
sub垂直对齐文本的下标,super垂直对齐文本的上标
writing-mode(1): tb-rl:从上到下,从右到左
单元格设置(6)
marging(4):margin-top(,bottom,left,right) 单元格边框到文字的距离
padding(4): padding-top(,bottom,left,right) 文字到单元格边框的距离
border(4)(边框粗细): border-top(,bottom,left,right)-width(用border-width一起设置)
border-color:边框颜色
border-style(8)(边框样式): solid:实心的, double:双重的, dotted:打点的
dashed:虚线, groove:槽沟, gidge:山脉inset:插进
outset:开始
float(2)(浮动属性):left,right(将设置了float属性的对象放至所设值的位置)
颜色和背景设置(9)
cursor(8)(指针):hand:手形,crosshair:十字准线
text:文字输入,wait:等待,move:移动
help:帮助,nocursorstyle:默认值
url:输入光标文件的路径,要把光标文件的后缀改为.gif才可以
resize(4)(调整大小): e-resize(w-resize):横向调整
n-resize(s-resize):竖向调整
nw-resize(se-resize):上角向左,sw-resize:上角向右
color:文字颜色
background-color: 在CSS中背景颜色用background-color,在html中用bgcolor
background-image(1):url(“ ”)重复排满X、Y轴母体
background-repeat(3): repeat-X:重复排满X轴母体
repeat-Y:重复排满Y轴母体,no-repeat:不重复
background-attachment(2): scroll:背景滚动,fixed:背景固定
background-position(5)(背景定位):left,right,center,top,bottom
例:” background-position:top left”,top和left中间用空格
统一设置background:按下面的顺序设置值,参数之间用空格:
url( ) color(背景色) repeat attachment(固定) position(竖排 横排)
overflow(4)(-x-y): visible:默认,不显示滚动条
hidden:内容会被修剪，但是浏览器不会显示供查看
内容的滚动条
scroll:内容会被修剪，但是浏览器会显示滚动条以
便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便
查看其余的内容
注:overflow要和width&\height一起使用
位置设置(3)
position(2)(位置):
absolute(2):绝对位置(浏览器): left:40px;top:40px(可用负数值)
relative(2):相对位置(母体), left:40px;top:40px(可用负数值)
visibility(2)(可见): visible:可见,hidden:隐藏
z-index: 设置层的层面,值越小层越上,像photoshop的图层
CSS滤镜(14)
alpha(7)透明:
<
opacity:代表startX和startY的坐标不透明度,取值为0到100（默认为
100）,0表完全透明.
finishopacity:可选参数，代表finishX和finishY坐标结束的不透明度，
取值为0到100（默认为100），0表完全透明.
style:指定透明区域的渐变样式,1代表线形,2代表放射,3代表长方形
startX和startY:代表渐变透明的开始X和Y坐标，单位常用PX。
finishX和finishY:代表渐变透明的结束X和Y坐标，单位常用PX。
>
blur(3)模糊:
<
add:参数为“true（默认，可用1代表）”或者“false（可用0代表）”,false是ture的差不多2倍的模糊效果，模糊是按顺时针方向进行的。
direction:参数设置的模糊的方向，0代表垂直向上，每45度为一个单
位，270度为默认值。
strenght:代表模糊强度，指多少个像素范围将被模糊，默认是5个。
>
chroma(1)过滤颜色:
< color:要过滤的颜色, 过滤本身设置了颜色属性的对象 >
dropshadow(4)阴影:
<
color:代表投影的颜色。
offx和offy:分别代表X方向和Y方向的阴影偏移量，设为负整数则
相反。
positive:值为true和false，true（或1）为任何非透明像素建立可见投
影，false（或0）为透明像素建立可见投影。
>
flipH和flipV: H代表水平翻转, V代表垂直翻转,可翻转文字.
glow(2)外发光: color:指定外发光颜色
strength:指定发光强度，值为1到255之间的整数
gray:把对象设为灰度
xray:灰度显示对象轮廓并加亮轮廓,类似于gray的效果
invert:反转对象的色彩、饱和度、亮度，产生底片效果.
light:调用javascript反转对象的全部可视化属性
shadow(2)投影:color:投影色
direction:投影方向,以45度为一个单位,默认为270度
mask(1)屏蔽效果:color:屏蔽色, 透过颜色看物体，像带着有色眼镜
wave(5)波纹:
<
add:表示是否让对象产生高亮色波形样式.取值为0或1,true或false.
freq:指波纹频率,对象上一共产生多少个完整的波纹.
lightstrength:增强波纹光和影的效果,值为0到100.
phase:设置正弦波的偏移量.
strength:指振幅,对象的水平左右摆动.最小值为1,表示不左右摆动.
>
