XHTML coding standards in understanding, we will be CSS layout. First entry first introduce some knowledge of CSS.
If you are already familiar, you can skip this section.
CSS is Cascading Style Sheets (Cascading Style Sheets) abbreviation.
Documents on the web is a simple mechanism for adding style, belonging to the layout of the presentation layer language.
1. Basic Specifications
Analysis of a typical CSS statement:
p {COLOR: # FF0000; BACKGROUND: # FFFFFF}
* Where “p” we called the “Selector” (selectors), specified that we give the “p” defined style;
* Style statement written in a pair of curly braces “{}” in;
· COLOR and BACKGROUND as “property” (property), among the different attributes with a semicolon “;” to separate;
· “# FF0000″ and “# FFFFFF” is the value of the property (value).
2. Color values
RGB value of color values can be written, for example: color: rgb (255,0,0), can also be written in hexadecimal, as the example above color: # FF0000. If the hexadecimal value of duplicate pairs can be shortened, the effect is the same. For example: # FF0000 can be written as # F00. But if you do not repeat not be abbreviated, for example, # FC1A1B must be filled with six.
3. Custom font
recommend the following web standard font definition methods:
body {font-family: “Lucida Grande”, Verdana, Lucida, Arial, Helvetica, Arial, sans-serif;}
Fonts used in accordance with the order listed. If the user’s computer with Lucida Grande font, the document will be designated as the Lucida Grande. If not, he was designated as the Verdana font, and if there is no Verdana, Lucida fonts to specify, and so on;
· Lucida Grande font for Mac OS X;
· Verdana font for all Windows systems;
· Lucida for UNIX Users
* “Arial” for Simplified Chinese Users;
If the font can be used not listed, then the default sans-serif fonts can guarantee the call;
4. Group selector
When several elements in the same style properties, you can call a joint statement, separated by a comma between the elements,:
p, td, li {font-size: 12px;}
5. Derived selector
Can be used to derive an element selector child element of the definition of style, such as this:
li strong {font-style: italic; font-weight: normal;}
Li is to define the following sub-elements of a strong non-bold italic style.
6.id selector
CSS layout is mainly used by layer “div” to achieve, and div’s style through the “id selector” to define. For example, we first define a layer
<div id=”menubar”> </ div>
Then in the style sheet that defines:
# Menubar {MARGIN: 0px; BACKGROUND: # FEFEFE; COLOR: # 666;}
Where “menubar” is defined in your own id name. Note added in front of “#” symbol.
id selector also supports derived, for example:
# Menubar p {text-align: right; margin-top: 10px;}
This method is mainly used to define the layer and the more complex, there are multiple derived elements.
6. Category Selector
With a point in the CSS class selector that defines the beginning, for example:
.14 Px {color: # f60; font-size: 14px;}
In the page, use the class = “category name” method calls:
<span class=”14px”> 14px size font </ span>
This method is simple and flexible, you can always need new and delete on the page.
7. Define the style of links
CSS class used to define four pseudo-links style, namely: a: link, a: visited, a: hover and a: active, such as:
a: link {font-weight: bold; text-decoration: none; color: # c00;}
a: visited {font-weight: bold; text-decoration: none; color: # c30;}
a: hover {font-weight: bold; text-decoration: underline; color: # f60;}
a: active {font-weight: bold; text-decoration: none; color: # F90;}
Are defined above statement of “link, visited link, mouse over the top, the point when the mouse” style. Note that the above sequence must be written, otherwise the display may not the same as you expected. Remember that their order is “LVHA”.
Oh, read so many, a little dizzy now, in fact, there are many CSS syntax specification, where the columns are just some common, after all we are gradual, not an eat into fat!
Related posts:
- The eighth day : Getting Started of CSS layout CSS layout with the traditional form (table) the biggest difference...
- The eleventh day : the menu without table Build up the initial layout, I began to fill the...
- HTML page layout structure of the DIV CSS Getting Started Guide You are learning CSS layout? Is not fully grasp the...
- how to apply the standards to improve the existing WEB site? Most of our designers are still using the traditional form...
- The third Day : definition language code The third step is to define your language code: <meta...
Related posts brought to you by Yet Another Related Posts Plugin.
