CSS常用属性速查表

属性太多,对于我这种不深入WEB的人员,还是有个速查表方便多了,注意利用开头的目录,会不断更新的

CSS 字体属性(Font)

属性 描述 CSS 
font 在一个声明中设置所有字体属性。 1 
font-family 规定文本的字体系列。 1 
font-size 规定文本的字体尺寸。 1 
font-size-adjust 为元素规定 aspect 值。 2 
font-stretch 收缩或拉伸当前的字体系列。 2 
font-style 规定文本的字体样式。 1 
font-variant 规定是否以小型大写字母的字体显示文本。 1 
font-weight 规定字体的粗细。 1

CSS 文本属性(Text)

属性 描述 CSS 
color 设置文本的颜色。 1 
direction 规定文本的方向 / 书写方向。 2 
letter-spacing 设置字符间距。 1 
line-height 设置行高。 1 
text-align 规定文本的水平对齐方式。 1 
text-decoration 规定添加到文本的装饰效果。 1 
text-indent 规定文本块首行的缩进。 1 
text-shadow 规定添加到文本的阴影效果。 2 
text-transform 控制文本的大小写。 1 
unicode-bidi 设置文本方向。 2 
white-space 规定如何处理元素中的空白。 1 
word-spacing 设置单词间距。 1 
hanging-punctuation 规定标点字符是否位于线框之外。 3 
punctuation-trim 规定是否对标点字符进行修剪。 3 
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3 
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3 
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 3 
text-outline 规定文本的轮廓。 3 
text-overflow 规定当文本溢出包含元素时发生的事情。 3 
text-shadow 向文本添加阴影。 3 
text-wrap 规定文本的换行规则。 3 
word-break 规定非中日韩文本的换行规则。 3 
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。


CSS 背景属性(Background)

属性 描述 CSS 
background 在一个声明中设置所有的背景属性。 1 
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1 
background-color 设置元素的背景颜色。 1 
background-image 设置元素的背景图像。 1 
background-position 设置背景图像的开始位置。 1 
background-repeat 设置是否及如何重复背景图像。 1 
background-clip 规定背景的绘制区域。 3 
background-origin 规定背景图片的定位区域。 3 
background-size 规定背景图片的尺寸。 3


区块属性: (Block)

字间距letter-spacing: normal; 数值
text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进text-indent: 数值px;
垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table;
inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)

Box 属性

属性 描述 CSS 
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3 
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3 
overflow-style 规定溢出元素的首选滚动方法。 3 
rotation 围绕由 rotation-point 属性定义的点对元素进行旋转。 3 
rotation-point 定义距离上左边框边缘的偏移点。


超链接属性

属性 描述 CSS 
target 简写属性,设置target-name、target-new以及target-position属性。 3 
target-name 规定在何处打开链接(链接的目标)。 3 
target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。 3 
target-position 规定在何处放置新的目标链接。

CSS 外边距属性(Margin)

属性 描述 CSS 
margin 在一个声明中设置所有外边距属性。 1 
margin-bottom 设置元素的下外边距。 1 
margin-left 设置元素的左外边距。 1 
margin-right 设置元素的右外边距。 1 
margin-top 设置元素的上外边距。

CSS 尺寸属性(Dimension)

属性 描述 CSS 
height 设置元素高度。 1 
max-height 设置元素的最大高度。 2 
max-width 设置元素的最大宽度。 2 
min-height 设置元素的最小高度。 2 
min-width 设置元素的最小宽度。 2 
width 设置元素的宽度。

Marquee 属性

属性 描述 CSS 
marquee-direction 设置移动内容的方向。 3 
marquee-play-count 设置内容移动多少次。 3 
marquee-speed 设置内容滚动得多快。 3 
marquee-style 设置移动内容的样式。

CSS 内边距属性(Padding)

属性 描述 CSS 
padding 在一个声明中设置所有内边距属性。 1 
padding-bottom 设置元素的下内边距。 1 
padding-left 设置元素的左内边距。 1 
padding-right 设置元素的右内边距。 1 
padding-top 设置元素的上内边距。

CSS 定位属性(Positioning)

属性 描述 CSS 
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2 
clear 规定元素的哪一侧不允许其他浮动元素。 1 
clip 剪裁绝对定位元素。 2 
cursor 规定要显示的光标的类型(形状)。 2 
display 规定元素应该生成的框的类型。 1 
float 规定框是否应该浮动。 1 
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2 
overflow 规定当内容溢出元素框时发生的事情。 2 
position 规定元素的定位类型。 2 
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2 
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2 
vertical-align 设置元素的垂直对齐方式。 1 
visibility 规定元素是否可见。 2 
z-index 设置元素的堆叠顺序。

CSS 边框属性(Border 和 Outline)

属性 描述 CSS 
border 在一个声明中设置所有的边框属性。 1 
border-bottom 在一个声明中设置所有的下边框属性。 1 
border-bottom-color 设置下边框的颜色。 2 
border-bottom-style 设置下边框的样式。 2 
border-bottom-width 设置下边框的宽度。 1 
border-color 设置四条边框的颜色。 1 
border-left 在一个声明中设置所有的左边框属性。 1 
border-left-color 设置左边框的颜色。 2 
border-left-style 设置左边框的样式。 2 
border-left-width 设置左边框的宽度。 1 
border-right 在一个声明中设置所有的右边框属性。 1 
border-right-color 设置右边框的颜色。 2 
border-right-style 设置右边框的样式。 2 
border-right-width 设置右边框的宽度。 1 
border-style 设置四条边框的样式。 1 
border-top 在一个声明中设置所有的上边框属性。 1 
border-top-color 设置上边框的颜色。 2 
border-top-style 设置上边框的样式。 2 
border-top-width 设置上边框的宽度。 1 
border-width 设置四条边框的宽度。 1 
outline 在一个声明中设置所有的轮廓属性。 2 
outline-color 设置轮廓的颜色。 2 
outline-style 设置轮廓的样式。 2 
outline-width 设置轮廓的宽度。 2 
border-bottom-left-radius 定义边框左下角的形状。 3 
border-bottom-right-radius 定义边框右下角的形状。 3 
border-image 简写属性,设置所有 border-image-* 属性。 3 
border-image-outset 规定边框图像区域超出边框的量。 3 
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 3 
border-image-slice 规定图像边框的向内偏移。 3 
border-image-source 规定用作边框的图片。 3 
border-image-width 规定图片边框的宽度。 3 
border-radius 简写属性,设置所有四个 border-*-radius 属性。 3 
border-top-left-radius 定义边框左上角的形状。 3 
border-top-right-radius 定义边框右下角的形状。 3 
box-decoration-break 3 
box-shadow 向方框添加一个或多个阴影。


列表属性: (List-style)

类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha; 
位置list-style-position: outside;(外) inside; 
图像list-style-image: url(..); 
定位属性: (Position) 
Position: absolute; relative; static; 
visibility: inherit; visible; hidden; 
overflow: visible; hidden; scroll; auto; 
clip: rect(12px,auto,12px,auto) (裁切)


CSS滤镜属性

Filter:在样式中加上滤镜特效。由于此属性内容比较多,我们将到下一章单独对滤镜介绍。 
1.Alpha:设置透明度 
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)  
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY:代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。  
2.BlendTrans:图像之间的淡入和淡出的效果  
BlendTrans(Duration=?) Duration:淡入或淡出的时间。注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果。 
3.Blru:建立模糊效果  
Blur(Add=?, Direction=?, Strength=?) Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。 Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。 Strength:代表模糊的象素值。  
4.Chroma:把指定的颜色设置为透明 
Chroma(Color=?) Color:是指要设置为透明的颜色。 
5.DropShadow:建立阴影效果  
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:指定阴影的颜色。OffX:指定阴影相对于元素在水平方向偏移量,整数。 OffY:指定阴影相对于元素在垂直方向偏移量,整数。 Positive:是一个布尔值,值为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。 
注意:如果做页面间的切换效果,可以在区加上一行代码:。如果用在页面里的元素必须配合JS使用。 
14.  Shadow:建立另一种阴影效果 Shadow(Color=?, Direction=?) Color:是指阴影的颜色。  
Direction:是设置投影的方向,0度代表垂直向上,然后每45度为一个单位。  
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样式或坐标来实现。"

css属性代码大全

一 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; /文字垂直向下对齐/


二、CSS边框空白

padding-top:10px; /上边框留空白/ 
padding-right:10px; /右边框留空白/ 
padding-bottom:10px; /下边框留空白/ 
padding-left:10px; /*左边框留空白


三、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; /缩进/


四、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; /居中对齐/


五、CSS连接属性:

a /所有超链接/ 
a:link /超链接文字格式/ 
a:visited /浏览过的链接文字格式/ 
a:active /按下链接的格式/ 
a:hover /鼠标转到链接/ 
鼠标光标样式: 
链接手指 CURSOR: hand 
十字体 cursor:crosshair 
箭头朝下 cursor:s-resize 
十字箭头 cursor:move 
箭头朝右 cursor:move 
加一问号 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;}


六、CSS框线一览表:

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 /凸框/


七、CSS表单运用:

文字方块 
按钮 
复选框 
选择钮 
多行文字方块 
下拉式菜单 选项1选项2 
八、CSS边界样式: 
margin-top:10px; /上边界/ 
margin-right:10px; /右边界值/ 
margin-bottom:10px; /下边界值/ 
margin-left:10px; /左边界值/

时间: 2024-11-03 06:12:41

CSS常用属性速查表的相关文章

HTML、CSS和JavaScript速查表

速查表是帮你记住东西的有效工具.Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高. 事实上,速查表就是来帮助我们把日常中最常用到的信息聚集起来,方便使用,使我们做工作时更有效率.有了它们,免去了你的大脑花额外时间去记忆它们的烦恼--你只需要打开简表,马上能查到你想要的信息. 这篇文章里,你可以看到最实用的HTML,CSS,JavaScript速查表,它们可以当作参考资料,备忘录,能帮助你以最快的速度找到想要的信息. 看看这些简表是不是你想要的,请在文章下面留下你的建议,谢

HTML,CSS,JavaScript速查表推荐_基础知识

事实上, 速查表 就是来帮助我们把日常中最常用到的信息聚集起来,方便使用,使我们做工作时更有效率.有了它们,免去了你的大脑花额外时间去记忆它们的烦恼--你只需要打开简表,马上能查到你想要的信息. 这篇文章里,你可以看到 最实用的HTML,CSS,JavaScript速查表 ,它们可以当作参考资料,备忘录,能帮助你以最快的速度找到想要的信息. 看看这些简表是不是你想要的,请在文章下面留下你的建议,谢谢! HTML HTML帮助手册 HTML速查手册 HTML特殊字符速查表 Dreamweaver

Git 常用命令速查表(图文+表格)_服务器其它

一. Git 常用命令速查 git branch 查看本地所有分支 git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支 git branch -r 查看远程所有分支 git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshow git push origin master 将文件给推到服务器上 git remote show origin

Git 常用命令速查表(图文+表格)【转】

转自:http://www.jb51.net/article/55442.htm 一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看远程所有分支git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin mast

实用HTML,CSS和JavaScript速查表

Vikas曾发表过一篇博文<Most Useful Cheat Sheet For HTML, CSS and Javascript>,为我们总结了一些实用的HTML,CSS和JavaScript速查表,并把链接附上了.外刊IT评论对本文进行了翻译,现转载于此,供大家学习.全文如下: 速查表是帮你记住东西的有效工具.Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高. 事实上,速查表就是来帮助我们把日常中最常用到的信息聚集起来,方便使用,使我们做工作时更有效率.有了它们,

常用ActionScript速查表

一.动作动作部分的Action是用来控制影片播放状态的脚本集合.以利于Flash脚本编写人员速查. (一)影片控制1.goto 语法:gotoAndPlay(scene, frame) 参数:scene 播放头将转到场景的名称.frame 播放头将转到的帧的编号或标签. 描述:动作:将播放头转到场景中指定的帧并从该帧开始播放.如果未指定场景,则播放头将转到当前场景中的指定帧. 2.on 语法:on(mouseEvent) {statement(s);} 参数: statement(s)是指发生m

CSS常用信息速查手册

css 文字属性 标识符 作用 属性值 font-family: 定义文字类型,顺序寻找,先找到的为选定值,若都找不到则用默认值 宋体,黑体等 font-style: 定义字体风格. normal(标准)italic(斜体)oblique(倾斜) font-variant: 改变英文字母的显示 normal,small-caps(小型大写字母) font-weight: 使字体加粗 normal(相当于400),bold,lighter,bolder或100~900的九个数 font-size:

CSS 常用信息速查手册

css 文字属性 标识符 作用 属性值 font-family: 定义文字类型,顺序寻找,先找到的为选定值,若都找不到则用默认值 宋体,黑体等 font-style: 定义字体风格. normal(标准)italic(斜体)oblique(倾斜) font-variant: 改变英文字母的显示 normal,small-caps(小型大写字母) font-weight: 使字体加粗 normal(相当于400),bold,lighter,bolder或100~900的九个数 font-size:

HTML 5标签、属性、事件及兼容性速查表

HTML 5 可以说是近十年来 Web 标准最巨大的飞跃.和以前的版本不同,HTML 5 并非仅仅用来表示 Web 内容,它的使命是将 Web 带入一个成熟的应用平台,在这个平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.尽管 HTML 5 的实现还有很长的路要走,但 HTML 5 正在改变 Web.为了方便大家学习HTML 5 ,本文与大家分享几份 HTML 5 标签.属性.事件及浏览器兼容性速查表. HTML 5 Cheat Sheet 非常完整的一份HTML 5速查表,包括HT