为了正常的体验网站,请在浏览器设置里面开启Javascript功能!

任庆总结css

2013-07-03 14页 doc 173KB 12阅读

用户头像

is_810171

暂无简介

举报
任庆总结css任庆总结css大全 1.1 字体属性 1.1.1 font-family 设置字体 1.1.2 font-size 设置字号 1.1.3 font-style 字体风格 样式的取值范围:normal | italic | oblique 1.1.4 font-weight 设置加粗字体 取值范围:normal | bold | bolder | lighter | number 1.1.5 font 字体复合属性 font属性的字体取值可以包含字体族科、字体大小、字体风格、加粗字体、小型大写字母,值之间用空格相隔...
任庆总结css
任庆css大全 1.1 字体属性 1.1.1 font-family 设置字体 1.1.2 font-size 设置字号 1.1.3 font-style 字体风格 样式的取值范围:normal | italic | oblique 1.1.4 font-weight 设置加粗字体 取值范围:normal | bold | bolder | lighter | number 1.1.5 font 字体复合属性 font属性的字体取值可以包含字体族科、字体大小、字体风格、加粗字体、小型大写字母,值之间用空格相隔。 p { font:italic small-caps bold 12pt/18pt 宋体; } 1.2 颜色及背景属性 1.2.1 color 颜色属性设置 color颜色取值可以是颜色关键字,如yellow,也可以是RGB颜色代码。在CSS中,RGB颜色代码有多种写法: · #rrggbb。例如,#FF0000。 · #rbg。例如,#F00。 · rgb(x,x,x)。其中,x是一个介于0~255之间的整数。例如,rgb(255,0,0)。 · rgb(y%,y%,y%)。其中,y是一个介于0.0~100.0之间的自然数,例如,rgb(100%,0%,0%)。 1.2.2 background-color 背景颜色 1.2.3 background-image 背景图片 background-image: url(图像地址) 1.2.4 background-repeat 背景重复 取值范围:repeat | no-repeat | repeat-x | repeat-y 1.2.5 background-attachment 背景附件 取值范围:scroll | fixed 1.2.6 background-position 背景位置 取值范围:[ <百分比> | <长度> ]{1,2} | [ top | center | bottom ] || [ left | center | right ] 取值范围包括两种,一种是采用数字,即[ <百分比> | <长度> ]{1,2};另一种是关键字描述,即[ top | center | bottom ] || [ left | center | right ],它们的具体含义如下: · [ <百分比> | <长度> ]{1,2}:示使用确切的数字表示图像位置,使用时应该首先指定横向位置,接着是纵向位置。例如20%65%,指定图像会被放在元素的左起20%、上起65%的那点的所在位置。百分比和长度可以混合使用,设定为负值也是允许的。默认情况下,位置的取值是0%0%。 · [ top | center | bottom ] || [ left | center | right ]:left、center、right是横向的关键字,它们表示在横向上取0%、50%、100%的位置,即采用居左、居中和居右;top、center、bottom是纵向的关键字,它们分别表示在纵向上取0%、50%、100%的位置,即位于顶端、居中和底端。 1.2.7 background 复合背景 background取值范围可以包含背景颜色、背景图像、重复属性、附件属性和背景位置,各个属性之间以空格相连。 1.3 文本属性 1.3.1 word-spacing 单词间隔 取值范围:normal | <长度> normal是指正常的间隔,是默认选项;长度是设定单词间隔的数值及单位,可以使用负值。 1.3.2 letter-spacing 字符间隔 取值范围:normal | <长度> 1.3.3 text-decoration 文字修饰 取值范围:none | [underline || overline || line-through || blink] none表示不对文本修饰,这是默认属性值;underline表示对文字添加下划线;overline表示对文本添加上划线;line-through表示对文本添加删除线;blink则表示文字闪烁效果,这一属性值只有在Netscape浏览器中才能正常显示。 1.3.4 vertical-align 纵向排列 取值范围:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> baseline使元素和上级元素的基线对齐;sub为下标;super为上标;top使元素和行中最多的元素向上对齐;text-top使元素和上级元素的字体向上对齐;middle是纵向对齐元素基线加上上级元素的x高度的一半的中点,其中x高度是字母“x”的高度;text-bottom使元素和上级元素的字体向下对齐。 影响相对于元素行的位置的关键字有top和bottom。其中,top使元素和行中最高的元素向上对齐;bottom使元素和行中最低的元素向下对齐。 百分比是一个相对于元素行高属性的百分比,它会在上级基线上增高元素基线的指定的数量。这里允许使用负值,负值负责减少相应的数量。 1.3.5 text-transform 文本转换 取值范围:none | capitalize | uppercase | lowercase 文本转换属性允许通过4个属性中的一个来转换文本。其中,none表示使用原始值;capitalize使每一个字的第一个字母大写;uppercase使每个字的所有字母大写;lowercase则使用每个字的所有字母小写。 1.3.6 text-align 文本排列 取值范围:left | right | center | justify 可以选择4个对齐方式。left为左对齐;right为右对齐;center为居中对齐;justify为两端对齐。 1.3.7 text-indent 文本缩进 文本的缩进必须是一个长度或一个百分比。若设定为百分比,则以上级元素的宽度而定。 1.3.8 line-height 文本行高 取值范围:normal | <数字> | <长度> | <百分比> normal表示默认的行高,一般由字体大小的属性自动产生; 值为数字时,行高由元素字体大小的量与该数字相乘所得; 长度属性则是直接使用数字和单位设置行高; 值为百分比时,表示相对于元素字体大小的比例,不允许使用负值。 1.3.9 white-space 处理空白 取值范围:normal | pre | nowrap white-space只能取3个值中的一个,其中normal是默认属性,即将连续的多个空格合并; pre会导致源文件中的空格和换行符被保留,但这一选项只有Internet Explorer 6中才能正确显示; nowrap则表示强制在同一行内显示所有文本,直到文本结束或者遇到
标记。 1.3.10 unicode-bidi与direction 文本反排 · unicode-bidi取值范围:normal | bidi-override | embed normal是系统的默认值,表示对象不打开附加的嵌入层; bidi-override表示严格按照direction属性的值重排序,忽略隐式双向运算规则; embed表示对象打开附加的嵌入层,将direction属性的值指定给嵌入层,在对象内部进行隐式重排序。 如果想要在内联文本中应用direction属性,必须设定该属性的值为embed或bidi-override。 Unicode双向运算法则是自动翻转嵌入字符顺序依照它们固有的流动方向。例如,英文文档的默认书写方向是从左到右,假如其中包含的部分其它语种的字符书写方向是从右到左,双向运算符则就可以用来代理用户正确地反转其流动方向。 · direction取值范围:ltr | rtl | inherit direction属性的值中,ltr表示从左到右的阅读顺序;rtl表示从右到左的阅读顺序;inherit则表示文本流的值不可继承。 1.4 边距与填充属性 1.4.1 margin-top 顶端边距 取值范围:长度值 | 百分比 | auto 长度值相当于设置顶端的绝对边距值,包括数字和单位;百分比值则是设置相当于上级元素的宽度的百分比,允许使用负值;auto是自动取边距值,即取元素的默认值。 1.4.2 margin-bottom、margin-left、margin-right 其他边距 底端边距用于设置元素下方的边距值;左侧边距则分别用于设置元素左右两侧的边距值。其语法和使用方法和同顶端边距类似,下面用一个实例说明底端边距、左侧边距和右侧边距的效果。 1.4.3 margin 复合边距 与其他属性类似,边距属性是用于对4个边距设置的略写。 取值范围:长度值 | 百分比 | auto margin 的值可以取1 到4 个,如果只设置了1 个值,则应用于所有的4 个边界;如果设置了两个或3 个值,则省略的值与对边相等;如果设置了4个值,则按照上、右、下、左的顺序分别对应其边距。 1.4.4 padding-top 顶端填充 顶端填充属性也称为上补白,即上边框和选择符之间的间隔数。 间隔值可以设置为长度和值或百分比。其中,百分比不能使用负值。 1.4.5 padding-bottom、padding-left、padding-right 其他填充 其他填充属性是指底端、左右两侧的补白值,其语法和使用方法同顶端填充类似。 1.4.6 padding 复合填充 与其他复合属性特别是边距属性padding 的使用方式和用法类似。 取值范围:长度值 | 百分比 | auto body { padding:18pt 35pt 12pt; } 1.5 边框属性 边框属性列表 属性 含义 border-top-width 设置上边框的宽度 border-right-width 设置右边框的宽度 border-bottom-width 设置下边框的宽度 border-left-width 设置左边框的宽度 border-width 复合属性,同时设置边框宽度的4个属性 border-top-color 设置上边框的颜色 border-right-color 设置右边框的颜色 border-bottom-color 设置下边框的颜色 1.5.1 border-style 边框样式 border-style、border-top-style、border-bottom-style、border-left-style、border-right-style 取值范围:可以设置的值有9种,见表。 边框样式取值列表 取值 含义 none 不显示边框,此为默认属性值 dotted 点线 dashed 虚线 solid 实线 double 双实线 groove 边框带有立体感的沟槽 ridge 边框成脊形 inset 使整个方框凹陷,即在边框内嵌入一个立体边框 outset 使整个方框凸起,即在边框外嵌入一个立体边框 1.5.2 border-width 边框宽度 border-width、border-top-width、border-bottom-width、border-right-width、border-left-width 取值范围:thin | medium | thick | <长度> 这几种属性的取值范围相同。其中medium是默认宽度;thin表示小于默认宽度,称为细边框;thick大于默认宽度,称为粗边框;<长度>则是由数字和单位组成的长度值,不可为负值。 1.5.3 border-color 边框颜色 border-color、border-top-color、border-bottom-color、border-right-color、border-left-color 1.5.4 border 边框属性 边框属性用来设置一个元素的边框宽度、样式和颜色。边框属性只能设置4种边框,它所包含的5种属性(即上、下、左、右4个边框属性和一个复合的边框属性)都是复合属性,在使用中只能给出一组边框宽度和样式。基本语法如下: 在这些复合属性中,边框属性border只能同时设置4种边框,也只能给出一组边框的宽度和样式。其他边框属性(如上边框属性border-top)只能给出某个边框的属性,包括宽度、样式和颜色。 1.6 定位及尺寸属性 定位属性主要通过相对定位和绝对定位两种方式定位。 · 相对定位允许元素在相对于文档布局的原始位置上进行偏移。 · 绝对定位允许元素与原始的文档布局分离且任意定位。 定位属性主要包括定位方式、层叠顺序等。 尺寸属性主要包括长度和宽度属性,用于确定元素的大小。 1.6.1 position 定位方式 取值范围:static | absolute | fixed | relative 1.6.2 top、right、bottom、left 元素位置 取值范围:auto | <长度> | <百分比> 1.6.3 z-index 层叠顺序 取值范围:auto | <数字> 1.6.4 float 浮动属性 取值范围:left | right | none 1.6.5 clear 清除属性 取值范围:none | left | right | both 1.6.6 clip可视区域 但是只有在position的值设定为absolute时,该属性才能正常使用。 取值范围:auto | rect(数值) auto表示对象不裁剪,rect(数值)中可以设定4个数字,它表示依据上、右、下、左的顺序,以对象左上角为(0,0)坐标计算的4个偏移值,其中任何一个数值都可用auto替换,表示此边不裁剪。 1.6.7 width、height 设定大小 取值范围:auto | <长度> 1.6.8 overflow 超出范围 取值范围:visible | auto | hidden | scroll visible表示不裁剪内容也不添加滚动条;auto是对象和