First, the property list
color : #999999 文字颜色
font-family : 宋体 文字字型
font-size : 10pt 文字大小
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 加?h除线
text-decoration:overline 加顶线
text-decoration:underline 加底线
text-decoration:none ?h除连接底线
text-transform : capitalize 首字大写
text-transform : uppercase 英文大写
text-transform : lowercase 英文写
text-align:right 文字*右对齐
text-align:left 文字*左对齐
text-align:center 文字置中对齐
这些是一些简单的文字效果，可以应用到css的页面中。
背景
background-color:black 背景颜色
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轴的位置
链接
A 所有超连接
A:link 超连接文字格式
A:visited 浏览过的连接文字格式
A:active 按下连接的格式
A:hover 鼠标移至连接
边框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四边框
虚线
<TEXTAREA STYLE="border:1px dashed pink">
实线
<TEXTAREA STYLE="border:1px solid pink">
设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏.Second, common attributes
1、Height:设置DIV的高度；Width:设置DIV的宽度。
2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]
可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距离；margin-top: 到父容器上边框的距离；margin-bottom:到父容器下边框的距离。
3、padding:用于设置DIV的内边距（内如子元素与DIV边界的距离）。padding:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left]：需要注意的是padding设置的距离不包括在本身的width和height内(在IE7和FF中)，比如一个DIV的width设置了100px,而padding-left设置了50px,那么这个DIV在页面上显示的将是150px宽。
4、border:设置DIV的边框样式；display:设置显示属性。其值有block、none；float:设置DIV在页面上的流向，其值有left(靠左显示)、right(靠右显示)、none；
background:设置DIV的背景样式；background后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。
background-color:设置背景颜色；background-attachment:背景图像的附加方式，其值有scroll、fixed; background-image:指定使有的背景图片;background-repeat:背景图象的平铺方式。其值有no-repeat(不平铺)、repeat(两个方向平铺)、repeat-x(水平方向平铺)、repeat-y(垂直方向平铺); background-position:在DIV中定位背景位置。其值有top bottom left right的不同组合。也可以以用坐标指定具体的位置。
5、position:设置DIV的定位方式。position的属性中有static、fixed、relative、absolute四个属性。常用relative和absolute。若指定为static时，DIV遵循HTML规则；若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移（相对于自身的偏移），但是此时不可使用层；若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位（对自己最近的父级元素）；若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果（不知为什么）。
6、font:指定DIV中文本的样式，其后可跟文本的多个样式。font-family:设置要用的字体名称；font-weight:指定文本的粗细,其值有bold bolder lighter等；font-size:指定文本的大小；font-style:指定文本样式，其值有italic normal oblique等；color:指定文本颜色；text-align:指定文本水平对齐方式，其值有center(居中) left right justify；text-decorator:用于文本的修饰；其值有none underline overline line-through和blink的组合；text-indent:设置文本的缩进；text-transform:设置文本的字母大小写。其值有lowercase uppercase capitalize(首字母大写) none；direction:内容的流向。其值有ltr(从左至右)、rtl(从右至左)；line-height:指定文本的行高；Word-spacing:字间距。
7、overflow:内容溢出控制，其值有scroll(始终显示滚动条)、visible(不显示滚动条，但超出部分可见)、auto(内容超出时显示滚动条)、hidden(超出时隐藏内容)。Third, some of the special effects
1、z-index:设置DIV的层叠顺序。用z-index属性时，position必需要指定为absolute才行。
2、cursor:设置DIV上光标的样式。
3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。
4、opacity 透明度 filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;Fourth, positioning and control
Absolute and relative positioning (position)
Absolute positioning:
Positioning properties will be Wangchong key to open the gates of happiness:
H4 { position: absolute; left: 100px; top: 43px }
This CSS rule will allow the browser
Precisely set the start position of the left pixels from the browser 100, the position 43 pixels from the top. Note that this is the only set left and top, also said that the text from left to right, top to bottom loaded in the browser window.
Left and top property is very intuitive and left (left) is set from the left of the browser window from the elements, the top (top) Set the distance from the top of your browser window. When setting these distances, you can use a variety of units or ratio learned value. When using the scale value, the scale value is relative to the size of the parent element.
What can you locate it? anything! Paragraphs, words, GIF and JPEG images, QUICKTIME movies and so on.
Relative positioning:
Absolute positioning allows you to precisely position elements in a separate location on the page, regardless of page positioning set other factors. Refers to a position relative positioning element positioned relative to your location in the file assigned. example:
I { position: relative; left: 40px; top: 10px }
The key lies in the relative positioning of the positioning element relative to the position that it should normally be positioned at the position. Relative positioning unit in between the lines appear normal static positioning unit, did not completely separated himself and static positioning unit positioning. If you stop using relative positioning, the display position of the text will return to normal. Be careful when using relative positioning, or easy to get very messy page.
In addition to the relative and absolute positioning, you can also use the static (stationary) parameter values. Static is the default position characteristics. It is common to use the same positioning method in HTML, specific targeting can not be attached. That is, in addition to the margin characteristics, or by using a float to float units may affect the characteristics of the positioning unit, the other can not.
Control (width, height, visiblility) of the positioning unit
In addition to controlling the position of the upper left corner of the positioning unit, you can control the width and height of the cell, and the cell in the visibility of the page.
Width: from left to right will still show up when positioning the display elements on the page. Using the width of the character attribute can be set to limit the flow to the right, i.e., to set the width of the element.
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
When this rule to the browser, it will effect the text in accordance with the provisions of the rules display, it will also limit the maximum horizontal dimension in paragraphs 150 pixels.
Width property applies only to absolutely positioned elements. You can use any length units we have learned, using a proportional value or set width, the ratio refers to the ratio value of the parent element. IE 4, the image can be used for this property. You can artificially by widening or compression image width setting.
Height: In theory, setting the height and width should be similar, only in the vertical direction:
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
Here I used the term "theory" because some browsers do not support the height of the property.
Visibility: Using CSS, you can hide elements, making it invisible on the page. This property positioning and the positioning of elements not apply.
H4 { visibility: hidden }
Options:
the visible elements can be seen
the hidden elements are hidden
refer to inherit it inherits the visibility setting of the parent element.
Value inherit the default. This allows inherit the parent unit visibility unit. Therefore, any unit if a certain period between the lines is hidden, it contains are also hidden. This inheritance can be explicitly specified visibility replaced. For example, EM unit within the segment is designated as visible, then if the segment is hidden, all other content within the segment will disappear, and only the EM text unit is visible.
When an element is hidden, it still occupies the original browser window space. So, if you surround the text in a hidden image around, then it will display the text surrounded by a blank area. This news
This property is useful in the preparation of language and the use of dynamic HTML, for example you can make a paragraph or image is displayed only when the mouse rolls over.
Cell level (z-index)
Z-index characteristics in the stacking unit for the screen. By default, the cell stack is the order they appear in the HTML tag sequence - that is, above the cell stack occurs in the early post-emergence of the unit. Z-index characteristics actually defines belong (sibling) stacking order relative to the parent unit and a unit stacking unit. In accordance with the draft specification, cell group having a positive value of z-index are stacked on top of the parent unit, the stacking order of their own to determine the size of its value (large value in the upper unit). Similarly, a negative z-index value of the cell group are under the parent cell stack, the stacking order of their own are also given by the magnitude of the value (large value in units of an upper layer, for example, a value of -1 means the value of the above unit-2).
The parameter value using pure integer. z-index for the relative or absolute positioning element of the positioning. You can set the z-index to the image. (For Communicator, preferably the label on the package or
Absolute positioning unit clip (Clip)
Absolute positioning unit may be clipped - i.e. the clip display to the user area, but only a part of the display unit transparent for the remainder of the process. For traditional-based Web pages with text and images, this is not a very useful feature. However, if the requirements of multimedia page, which is very useful. The Netscape Communivator 4 and Internet Explorer 4 supports multimedia pages, the surrounding region thereof by a document editing scripting interface dynamically adjusting means, whereby the solid line text "classified" display feature images fade and the like.
In CSS, controlled by a clip clip characteristic, this characteristic can be used for absolute positioning means, the default value is auto, the outer edge of the press section to the clip unit (not substantially equal to the clip). Further, the clip frame can be provided by the following expression:
clip : rect(top,right.bottom,left) ;
Wherein the top, right, bottom left and upper positions, respectively, on the right, left and lower side of the rectangular frame with respect to the clipping unit clipping the upper left corner. Value Top, right, bottom left, and may be of any absolute or relative values of the length (but not as a percentage value), or the keyword auto. After each side of the mean value of auto clipping region put away, is any content clip unit will not exceed this area.
The control unit overflow (overflow)
Fixed absolute or relative positioning unit of width and height, likely because the specified unit area can not meet the needs of the actual content, which leads to cell content overflow. Then use the browser to overflow to specify how to handle overflow: Value none (the default) allows the browser to display the contents of overflow, the overflow unit may thus designated area. And the value of the browser in claim clip in clip units in the cell bottom and to the right of the content, so that, beyond a designated area of the cell content will not be displayed. Scroll value also requires the browser to the right of the base unit and the cell content clip (Clip same), however, the browser should (if possible) to provide means to enable the scroll bar to scroll the user can browse content clip