rss· 投稿· 设为首页· 加入收藏· 繁體版
当前位置: 火魔网 » 程序开发 » html/css

CSS常用属性

做的笔记,主要是来至于 腾飞科技等 所著的 《HTML XHTML CSS 网页制作从入门到精通》这本书,发表到这里,以免在本机上不慎删除!

CSS提供常用的属性:
1.类型:
字体:font-family:"宋体",sans-serif
大小:font-size:12px;
样式:font-style:normal ;//normal,italic(斜体),oblique(介于前两者之间,偏斜体)
行高:line-height:140%;
修饰:text-decoration:underline ; //下划线
粗细:font-weight:normal;//normal,bold,bolder,lighter,number(100~900的数字)
颜色:color:#0000FF;
变体:font-variant //normal:正常值;small-caps:小写变成大写

说明:字体可以定义多个名称,按优先顺序排列

2.背景:
背景颜色:background-color:#CCCCCC;
背景图像:background-image:url(img/1.gif);
重复:background-repeat:repeat-x;     //横向重复
位置:background-position:center|top;    //水平位置居中,垂直位置顶部

3.区块
文本对齐:text-align:center;
文字缩进:text-indent:24px;(可为负数)
显示:display:block;        //块

4.方框+边框
宽:width:600px;
高:height:400px;
浮动:float:left;
清除:clear:left; padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
<=>
padding:1px 2px 3px 4px;

边界:
margin-top:1px;
margin-right:2px;
margin-bottom:3px
margin-left:4px
<=>
margin:1px 2px 3px 4px

边框:
border-left-width:1px;    //左边框宽度
border-left-style:solid;   //左边框样式
border-left-color:#0000FF   //左边框颜色
..bottom
..top..
..right.. 合模型: )

5.文本属性:
单词间隔:word-spacing
字母间隔:letter-spacing
水平对齐:text-algin
垂直对齐:vertical-align
大小写转换:text-transform //none,lowercase(单词的第一个字母大写),uppercase(所有字母大写),capitalize(所有字母小写)
文本缩进:text-indent //在html中只能控制段落的整体向右缩进,如果不进行设置,浏览器则默认为不缩进。而在css中可以控制段落的首行缩进以及缩进的距离。
文本行高:line-height
文本空格:white-space //normal,pre(导致源文件的空格和换行符被保留,IE6有效),nowarp(强制在同一行内显示所有文本,知道文本结束或遇到<br/>)
文本反排:unicode-bidi与direction合用 //direction:ltr(从左到右)|rtl|inherit ;unicode-bidi:bidi-override(严格按照direction属性的值排序)

6.列表属性
列表类型:list-style-type //disc,circle,square...
项目符号图像:list-style-image //none,url(图像路径)
列表位置:list-style-position //outside(标记放置在文本以外,且环绕文本不根据标记对齐),inside 7.定位属性:
定位类型:position //static,absolute,fixed,relative
    置入top,right,bottom,left设置基本位置信息
层叠顺序:z-index
浮动属性:float   //none,left(文字浮动在元素的右边),right
清除属性:clear   //none,left(表示不允许左边有浮动对象),right,both
裁切区域:clip   //auto,rect(x,y,z,z1) 将对象裁切成一个矩形区域,在页面中只显示这个区域,position必须设定为absolute
宽度、高度:width,heigth
溢出:overflow //visible(不裁切内容也不添加滚动条),auto,hidden(不显示超过对象尺寸的内容),scroll(总是显示滚动条)
显示属性:visibility //inherit(继承父对象的可见性,默认值),visible,hidden

8.背景属性:
背景颜色:background-color
背景图像:background-image //url(图像路径)
背景重复: background-repeat //no-repeat(背景图像不重复),repeat,repeat-x,repeat-y(只在垂直方向上重复)
背景附件:background-attachment //scroll(背景图像随对象滚动而滚动,默认值),fixed
背景位置:background-position //可以取值:数字,百分数,Top left,Top center..等 9.光标属性:
光标属性:cursor //auto,形状取值(default,hand,crosshair,text,help...),url(图像路径) 10.扩展滤镜属性
不透明度:filter:alpha(参数1=参数值,参数2=参数值) //参数:opacity(不透明度),finishopacity,style,startx,starty,finishx,finishy
动感模糊:filter:blur(add=参数值,direction=参数值,strength=参数值) //add(布尔值,设置滤镜是否激活,可以取的值包括true和false),direction(设置模糊参数),strength(整数指定,代表有多少像素的宽度将受到影响,默认是5个)
对颜色透明处理:filter:chroma(color=颜色代码或颜色关键字) //参数color为要设置透明的颜色
阴影效果:dropShadow(color=阴影颜色,offX=参数值,offY=参数值,positive=参数值) //标记可以为图像设置阴影效果。color(设置阴影的颜色),offX(设置阴影相对图像移动的水平距离),offY(设置阴影相对图像移动的垂直距离),positive(布尔值(0、1),其中0指透明像素生成阴影,1指为不透明像素生成阴影)     filter:FlipH //设置沿水平方向翻转对象
    filter:FlipV //设置沿垂直方向翻转对象     filter:Glow(color=颜色代码,stength=强度值)   //用于设置在对象周围发光的效果,color(发光的颜色),strength(发光的强度1~255,默认5)
灰度处理:filter:gray // gray滤镜不需要设置参数,将去除目标的所有色彩,以灰度级别显示
反相invert:filter:invert //设置对象反相,将可视化属性全部反转,包括色彩,饱和度和亮度值
X光片效果:filter:xray   //可以像gray去除图像颜色信息,并且反转
遮罩效果:filter:mask(color=颜色代码)//颜色是最后遮罩显示的颜色

顶一下
(0)
踩一下
(0)