css常用的基本属性.docx

1、css常用的基本属性背景属性共有六项:背景颜色(background-color,设置背景颜色。背景图像(background-image,设置网页背景图像。重复(background-repeat,控制背景图像的平铺方式,有不重复(no-repeat、重复(repeat,沿水平、垂直方向平铺、横向重复(repeat-X,图像沿水平方向平铺和纵向重复(repeat-Y,沿图像垂直方向平铺等4种选择。附加(background-attachment,用于控制背景图像是否会随页面的滚动而一起滚动。有固定(fixd,文字滚动时,背景图像保质固定和滚动(scroll,背景图像随文字内容一起滚动两种选择

2、。水平位置/垂直位置(background-position,确定背景图像的水平、垂直位置。共有左对齐(left、右对齐(right、顶部(top、底部(bottom、居中(center和值(自定义背景图像的起点位置,可使用户对背景图像的位置做出更精确的控制等6种选择。引用内容引用内容类型属性共有九项:字体(font-family,设定时,需考虑浏览器中有无该字体。大小(font-size,注意度量单位。粗细(font-weight,除了normal(正常、bold(粗体、bolder(特粗、lighter(细体外,还有9种以像素为度量为单位的设置方式。样式(font-style,也就是字型。

3、行高(line-height,就是行距。注意,行距只能以是字体大小值为变形(font-variant,可以将正常文字一半尺寸后大写显示,但IE目前不支持这项属性。大小写(text-transform,这项属性能轻而易举地控制字母大小写,有首字大写(capitalize、大写(uppercase、小写(lowercase和无(none,使所有继承文字和变形参数被忽略,文字将以正常形式显示等4种。修饰(text-decoration,用于控制链接文本的显示形态,有下划线(underline、无下划线(overline、删除线(line-through、闪烁(blink和无(none ,使上述效果均

4、不会发生等5种修饰方式。但IE4不支持文字闪烁。引用内容引用内容区块属性共有六项:单词间距(word-spacing,主要用于控制文字间相隔的距离。有正常(normal和值(自定义间隔值两种选择方式。当选择值时,可用的单位有英吋(in、厘米(cm、毫米(mm、点数(pt、12pt字(pc、字体高(em、字体x有高(ex像素(px。字母间距(letter-spacing,其作用与字符间距类似,也有正常(normal和值(自定义间隔值两种选择方式。垂直对齐(vertical-align,控制文字或图像相对于其母体元素的垂直位置。如将一个23像素的GIF图像同其母体元素文字的顶部垂直对齐,则该GIF

5、图像将在该行文字的顶部显示。共有基线(baseline,将元素的基准线同母体元素的基准线对齐、下标(sub,将元素以下标的形式显示,上标(super,将元素以上标的形式显示、顶部(top ,将元素顶部同最高的母体元素对齐、文本顶对齐(text-top,将元素的顶部同母体元素文字的顶部对齐、中线对齐(middle,将元素的中点同母体元素的中点对齐、底部(bottom,将元素的底部同最低的母体元素对齐及值(自定义等9种选择。文本对齐(text-align,设置块的水平对齐方式。共有左对齐(left、右对齐(right、居中(center和均分(justify等4种选择。文字缩进(text-inde

6、nt,控制块的缩进程度。空白间距(white-space,在HTML中,空格是被省略的;在CSS中则使用属性(white-space控制空格的输入。共有正常(normal、保留(pre和不换行(nowrap等3种选择。引用内容引用内容边框的属性有3项:宽(border- width,控制边框的宽度,其中分为4个属性:border-top-width顶边框的宽度、border-right-width右边框的宽度、border-bottom-width底边框的宽度、border-left-width 左边框的宽度。颜色(border-color,设置各边框的颜色。若要使边框的四边显示不同的颜色,可

7、在设置中分别列出。如,p: #ff0000 #009900 #0000ff #55cc00浏览器将四种颜色依次理解为:上边框、右边框、底边框和左边框(自上开始顺时针。样式(border-style,设定边框的样式,共有无(none、虚线(dotted、点划线线(dotted、点划线(dashed、实线(solid、双线(double 、槽状(grove、脊状(ridge、凹陷(inset和凸起(outset等9种。引用内容引用内容盒子属性共有6项:宽(width,确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少。高(height,确定盒子本身的高度。浮动(float,设置块元素的浮

8、动效果。清除(clear,用于清除设置的浮动效果。边距(margin,控制围绕边框的边距大小。其中包含4个属性:margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。边界(padding,确定围绕块元素的空格填充数量,其中包含4个属性padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。引用内容引用内容列表属性共有3项:类型(list-style-type,确定列表每一项

9、前使用的符号,共有圆点(disc、圆圈(circle、方形(square、数字(decimal、小写罗马数字(lower-roman 、大写罗马数字(upper-roman、小写字母(lower-alpha和大写字母(upper-alpha等8种。项目图像(list-style-image,其作用是将列表前面的符号换为图形。位置(list-style-position,用于描述列表位置,有内(outside和外(inside两种选择。引用内容引用内容定位属性共有6项:类型(position,用于确定定位的类型,共有绝对(absolute、相对(relative和静态(static等3种选择。Z

10、轴(z-index,用于控制网页中块元素的叠放顺序,可为元素设置重叠效果。该属性的参数值使用纯整数,值为0时,元素在最下层,适用于绝对定位或相对定位的元素。显示(visibility使用该属性可将网页中的元素隐藏,共有继承(inherit,继承母体要素的可视性设置、可见(visible和隐藏(hidden等3种选择。溢出(overflow,在确定了元素的高度和宽度后,如果元素的面积不能全部显示元素中的内容时,该属性做一日和尚撞一天钟起作用了。其中共有可见(visible,扩大面积以显示所有内容、隐藏(hidden,隐藏超出范围的内容、滚动(scroll,在元素的右边显示一个滚动条和自动(aut

11、o,当内容超出元素面积时,显示滚动条等4种选择。定位,当为元素确定了绝对定位类型后,该组属性决定元素在网页中的具体位置。该组属性包含4个子属性,分别是左(属性名为left,控制元素左边的起始位置、上(属性名为top,控制元素上面的起始位置、宽或高(与盒子类属性面板中宽或高的属性作用相同。剪辑(clip,当元素被指定为绝对定位类型后,该属性可以把元素区域切成各种形状,但目前提供的只有方形一种。属性值为rect(top right bottom left,即:rect(top right bottom left,属性值的单位为任何一种长度单位。引用内容引用内容扩展属性共有两部分:分页,其中两个属性

12、的作用是为打印的页面设置分页符。之前(page-break-before;之后(page-break-after。视觉效果,其中两个属性的作用是为网页中的元素施加特殊效果。光标(cusor,可以指定在某个元素上要使用的光标形状,共有15种选择方式,分别代表鼠标在Windows操作系统中的各种形状。另外它还可以指定指针图标的URL地址;滤镜(fiter,可以为网页中元素施加各种奇妙的滤镜效果,共包含有16种滤镜。字体属性:(font大小font-size: x-large;(特大 xx-small;(极小 一般中文用不到,只要用数值就可以,单位:PX、PD样式font-style: obliqu

13、e;(偏斜体 italic;(斜体 normal;(正常行高line-height: normal;(正常 单位:PX、PD、EM粗细font-weight: bold;(粗体 lighter;(细体 normal;(正常变体font-variant: small-caps;(小型大写字母 normal;(正常大小写text-transform: capitalize;(首字母大写 uppercase;(大写 lowercase;(小写 none;(无修饰text-decoration: underline;(下划线 overline;(上划线 line-through;(删除线 blink;

14、(闪烁常用字体:(font-familyCourier New, Courier, monospace, Times New Roman, Times, serif, Arial, Helvetica, sans-serif, Verdana字体投影效果:filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1; 背景属性:(background色彩background-color: #FFFFFF;图片background-image: url(;重复background-repeat: no-repeat;滚动backgroun

15、d-attachment: fixed;(固定 scroll;(滚动位置background-position: left(水平 top(垂直;简写方法background:#000 url(. repeat fixed left top;区块属性:(Block字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐 left;(左对齐 right;(右对齐 center;(居中缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线 sub;(下标 super;(下标 top; text-

16、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; tabl

17、e-cell; table-caption;(表格标题方框属性:(Boxwidth:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左边框属性:(Borderborder-style: dotted;(点线 dashed;(虚线 solid; double;(双线 groove;(槽线 ridge;(脊状 inset;(凹陷 outset;border-width:; 边框宽度border-color:#;简写方法border:width style color;列表属性:(List-style类型list-style-type:

18、 disc;(圆点 circle;(圆圈 square;(方块 decimal;(数字lower-roman;(小罗码数字 upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外 inside;图像list-style-image: url(.;定位属性:(PositionPosition: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip:

19、 rect(12px,auto,12px,auto (裁切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; /*下

20、标字*/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; /

21、*文字右对齐*/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; /*文字垂直向下对齐*/ layout-flow:vert

22、ical-ideographic /*文字竖着排列*/ 二、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; /*大写罗

23、马数字*/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背景样

24、式: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

25、: 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

26、: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-re

27、size漏斗cursor:wait光标图案(IE6p 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-w

28、idth :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-

29、left:10px; /*左边界值*/CSS 属性:字体样式(Font Style序号中文说明标记语法1 字体样式font:font-style font-variant font-weight font-size font-family2 字体类型font-family:字体1,字体2,字体3,.3 字体大小font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small4 字体风格font-style:inherit|italic|normal|oblique5

30、 字体粗细font-weight:100-900|bold|bolder|lighter|normal;6 字体颜色color:数值;7 阴影颜色text-shadow:16位色值8 字体行高line-height:数值|inherit|normal;9 字间距letter-spacing:数值|inherit|normal10 单词间距word-spacing:数值|inherit|normal11 字体变形font-variant:inherit|normal|small-cps 12 英文转换text-transform:inherit|none|capitalize|uppercase

31、|lowercase13 字体变形font-size-adjust:inherit|none14 字体font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|na rrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider文本样式(Text Style序号中文说明标记语法1 行间距line-height:数值|inherit|normal;2 文本修饰text-decoration:inherit|none|underline|overline|line-through|blink3 段首空格text-indent:数值|inherit