CSS step-by-Step (three) style "table" show

CSS do not know whether you read the previous two after the use of style has had a little experience, in fact, the previous article is just the most basic style table application. I would like to ask, the reader has not felt that the HTML in the standard form of table (table) and form (form) look too stiff, and style is often incompatible with their own web page? And, for a large amount of information and interactive Web pages, Tables and forms need to be used heavily and occupy a very important position. Now if I tell you to use style sheets to customize your own personal style of forms and forms, you will be excited to jump up? In fact, if you use style properly, you can even make a better result than the graph.

Let's talk about some details about customizing the form. In the example in the first chapter, you should see a lot of places that use custom forms. It should be said that the custom form is not complex, the main is to define the background (background) and borders (border). The use of these two aspects is only the attribute.

Block parameters (Block-level formatting Properties)

		example
Left-margin,right-margin!--? Xml:namespace PREFIX = O/-->	Left blank	Length value, percent value
Padding-top ...	Content Border spacing	Length value, percent value
border-width	Border width	Length value
Border-s Tyle	Border Style	Solid,double,groove
Border-color	Border color	Color value
Width	width	Length value, Percent value
Float	< p>	Left,right

Color parameters (colors and Background Properties)

		example
Color	foreground color	Color value (red, #FF0000)
Background-image	Background file	File address
Background-color	Background color	Color value
background-attachment	Background dependencies	scroll (scrolling with content) and fixed (stationary position)
background-repeat	Background repeating format	Repeat-x (horizontal repeat) , repeat-y (repeat vertically), no-repeat (No Duplicates)

These attributes were used in the last time you introduced text typesetting, but this time you'll look at how it behaves in the table, and the role they play here is very important, and I am by no means simply a rehash of the same. It is important to note that all border properties are divided, that is, you can set the top, bottom, left, and right four directions of the appearance, that is, for each border property, there are Border-left-width,border-right-width, The four-Border-top-width,border-bottom-width attribute can also be followed by four values after a property, representing the definition of top, right, bottom, and left respectively. This is very useful, we can use it to make a similar effect of lighting. Another attribute, the so-called style, is difficult to define. Some statements, such as solid (solid), double (double) are well understood. But some of the effects I'm afraid you have to use before you can understand what is going on. Here the author lists them all as follows:

Dotted, dashed, solid, double, groove, Ridge, inset, outset.

Here is a special example of the table, you see, the effect as shown in Figure a

The source code is as follows:

 < html>< head>< title>untitled document</title>< meta http-equiv= "Content-Type" Content= "text/html; charset=gb2312 ">< style type=" text/css ><!--Table {font-family: "XXFarEastFont-Arial"; font-size:9pt; color: #000033; text- Decoration:none; Background-color: #FFCCCC; padding-top:4px; padding-right:3px; padding-bottom:2px; padding-left:2px; border: #CCCCFF; Border-style:groove; Border-top-width:thick; Border-right-width:thick; Border-bottom-width:thick; border-left-width:thick}--></style>
As for the form, because of the interactive nature of the Web page more and more people pay attention to the use of forms more and more. But the way the HTML itself is made of the standard form of the form is really not flattering. Text boxes are all deep inside the strip, and the button is all that gray block, placed in a delicate site is not the way. So it can be said that the appropriate adjustment of the border size, color, to make a Web site personalized form is also a link to the success of the site.

If you want to see the effect, you can draw on the example of Fanso's Open Music (http://music.fanso.com). (also can look at figure II ) You look at its right row of input box, in fact it is the input box to achieve the smallest, but the taste is enough.

The definition statement used is actually very simple:

. input1 {background-color: #e8e8e8; Border-bottom: #a8a8a8 1px solid; Border-left: #a8a8a8 1px solid; Border-right: #a8a8a8 1px solid; Border-top: #a8a8a8 1px solid; FONT-SIZE:9PT}
You should be able to see that the most important place for table and form customization lies in the selection and collocation of border and color, which is the key to the effect of its appearance.