HTML基础___CSS样式表__中 <第十天>

学习内容:

1.CSS 文本属性

2.CSS 边距与填充属性

3.CSS 边框属性

4.CSS 定位及尺寸属性

 

1.CSS 文本属性

单词间隔___word-spacing

语法:word-spacing:取值

 normal正常的间隔也是默认值. 长度是设定单词间隔的数值及单位,可以使用负值.

字符间隔___letter-spacing

语法:letter-sapcing:取值

取值范围:normal 或长度值

文字修饰___text-decoration

语法:text-decoration:取值

取值范围:none 不对文本进行修饰,默认值

                underline对文字添加下划线

                overling 对文字添加上划线

                line-throuth 对文本添加删除线

                blink 文字闪烁效果

如:text{font-size:10pt;text-decoration:line-through}

纵向排列____vertical-align

语法:vertical-align:排列取值

取值范围:baseline  使元素和上级元素的基线对齐.sub为下标 super为下标

                top使元素和行中最多的元素上对齐

               text-top使元素和上级元素的字体向上对齐.

               middle是纵向对齐元素基线加上上级元素的X高度的一半的中点.X的高度是字母X的高度.  text-botom使元素和元素的字体向下对齐.

文本转换__text-transform

语法:text-transform: 转换值 (转换英文文字的大小写)

取值范围: none 原始值  capitalize使第个字的第一个字母大写 uppercase 每个字的所有字母大写   lowercase 每个字的所有字母都小写

文本排列__text-align

语法:text-align:排列值

取值范围:left 左对齐right右对齐 center中间对齐   justify 两端对齐

文本缩进__text-indent

语法:text-indent:缩进值

取值必须是一个长度或是一个百分比.

.text{font-size:10pt;text-indent:50%}

文本行高____line-height

语法:line-height:行高值

取值:normal默认行高 数字,长度,百分比

 text{font-size:10pt;text-indent:20pt;line-leight:200%}

处理空白____white-space

语法:white-space:值

取值范围:normal默认属性,即将连续的多个空格合并.

                 pre 会导致源中的空格和换行符被保留,

                nowraprp强制在同一行内显示所有文本..

文本反排___unicode-bidi与direction

用于同一页面里存在从不同方向读进的文本的显示,它一般与direction属性一起使用,direction属性用来设置对象的阅读顺序.

语法:unicode-dibi:normal或bidi-override或embed

bidioverride按着direction属性的值重排序,忽略隐式双向运算规则;embed表示对象打开附加的嵌入层,将direction属性的值指定给嵌入层,在对象内部进行隐式重排序.如果想要在内联文本中应用diection属性,必须设定该属性的值为embed或bidi-override.

   unicode双向运算法则是自动翻转嵌入字符顺序依照它们固有的流动方向.

direction属性

语法:direction:ltr 或rtl或inherit

ltr从左到右 rtl从右到左 inherit 表示文本流的值不可继承.

如:text{font-size:10pt;text-indent:20pt;direction:rtl;unicode-bidi-override;}文本是从右到左读

 

2.CSS 边距与填充属性

顶端边距___margin-top

语法:margin-top:边距值

取值范围:长度值或百分比或auto

如:h2{font-family:黑体;font-size:16pt;margin-top:15pt}

      img{margin-top:25pt}

其它距__margin-tottom,margin-left,margin-right

和顶端边距设置方法相同.

复合属性:边距___margin

语法:margin:长度值或百分比或auto

边距属性是用于对4个边距设置的略写

margin到1个值,则应用于所有的4个边界,如设2到3个值,则省略的值与对边相等;如设置4个值,则按上,右,下,左的顺序分别对应其边距

如:img{margin: 8pt 30pt 10pt}

顶端填充___padding-top

语法:padding-top:间隔值(长度值或百分比)

如body{padding-top:26pt}

其它填充___padding-bottom,padding-right,padding-left

复合属性:填充__padding

语法:margin:长度值或百分比

和margin的用法类似,请参照上面的设置.

如:body{padding:18pt 35pt 22pt}

 

3.CSS 边框属性

 边框属性表

border-top-width                          设置上边框的宽度值

border-right-width                         设置右边框的宽度值

border-bottom-width                     设置下边框的宽度值

border-left-width                           设置左边框的宽度值

border-width                                  复合属性,是设置边框宽度值的4个属性的略写

border-top-color                            设置上边框的颜色

border-right-color                          设置右边框的颜色

border-bottom-color                      设置下边框的颜色

border-left-color                            设置左边框的颜色

border-color                                   复合属性,是设置边框颜色的4个属性的略写

border-top-style                           设置上边框的样式

border-right-style                         设置右边框的样式

border-bottom-style                     设置下边框的样式

border-left-style                           设置左边框的样式

border-style                                   复合属性,是设置边框样式的4个属性的略写

border-top                                     复合属性,是设置上边框的宽度,颜色,样式

border-right                                    复合属性,是设置右边框的宽度,颜色,样式

border-bottom                               复合属性,是设置下边框的宽度,颜色,样式

border-left                                     复合属性,是设置左边框的宽度,颜色,样式

border                                            复合属性,相当于对上面所有属性的集合

 

边框样式____border-style

语法:border-style:样式值

取值:

none 不显示边框,默认值. 

dotted 点线 

dashed 虚线也称为短线

solid 实线 double 双实线

groove 边框带有立体感的沟槽

ridge 边框成脊形

inset 使整个方框凹陷,即在边框内嵌入一个立体边框.

outset  使整个方框凸陷,即在边框内嵌入一个立体边框

 

边框宽度___border-width

语法:border-width:宽度值

取值范围:thin / medium / thick / 长度 /

medium是默认宽度, thin 表示小于默认宽度,细边框.thick大于默认宽度,称粗边框.

长度是由数字和单位组成的长度值.不可为负值

 

边框属性___border

border:边框宽度  边框样式 颜色

border-top 上边框宽度 上边框样式 上边框颜色

........

 

 

4.CSS 定位及尺寸属性

定位方式___position

语法:position: static \ absolute\ fixed \ relative

static     无特殊定位,默认值.

absolue 采用绝对定位,需要同时使用left,right,top,bottom等属性进行绝对定位.而其层叠通过

              z-index属性定义,此时对象不具有边距,但仍有补白和边框.

fixed     表示当页面滚动时,元素保持在浏览器视区内,ie5.5中不支持该属性.

relative 表示采用相对定位,对象不可层叠,但将依据left,right,top,bottom等属性设置在页面中

             的偏移位置.

 

元素位置___top,right,bottom,left

语法:top:auto \ 长度值 \ 百分比 其它同理

例:.place{font-size:11pt;color:#cc0000;text-indent:20pt;position:absolute;top:70pt;left:30pt}

 

层叠顺序____z_index

语法:z_index:auto /数字

层叠顺序属性用于设定层的先后顺序和覆盖关系,高层覆盖低层,z-index为1时,该层位于最下层

 

浮动属性___float

语法:float:left  \  right \ none

浮动属性也称漂浮属性,用于将文字设置在某个元素的周围,它的功能相当于img元素的align=left和align=right 但是float能应用于所有的元素,而不仅是图像和表格.

 

清除属性___clear

语法:clear:none \left \right \both

指定一个元素是否允许有其他元素漂浮在它的周围.

none是允许两边有 left不允许左边有 both 完全不允许有.

 

可视区域____clip

语法:clip: auto \ rect(数值)

auto表示对象不裁切,

rect(数值)中可以设定4个数字,表示依据上右下左的顺序.以象左上角(0,0)坐标计算的4个偏移数值,其中任何一个数值都可用auto替换.表示此边不裁切.

如:clip:rect(auto 16cm 160px 3cm)

 

设定大小___width,height

语法:width:auto \ 长度 height:auto \  长度

height和width分别用于设定层的高度和宽度.

 

超出范围____overflow

用于设定当层的内容超出所能容纳的范围时的显示属性.

语法:overflow:visible \ auto \ hiden \ scroll

visible: 表示不剪切内容也不添加滚动条.

auto:是< body>对象和<textrarea>对象的默认值.它在需要时剪切内容并添加滚动条

hidden:表示不显示超过对象尺寸的内容

scroll:表示总显示滚动条.

 

可见属性___visibility

用于设定嵌套层的显示属性,此属性可以将嵌套层隐藏.但仍然为其占据物理空间.

语法:visibility:inherit \ visible  \ hidden

inherit:表示继承上一个父对象的可见性,父可见其可见,反之则不可见.

visible:表示对象可见

hiden表示对象隐藏

本文出自 “Persist Persist Insists” 博客，谢绝转载！