Using Web standards to build a station day 7th: Getting Started with CSS

Source: Internet
Author: User
Tags define definition
Css|web|web standard |css|web Standard after understanding the XHTML code specification, we need to do CSS layout. First, introduce some of the basics of CSS. If you are already familiar with it, you can skip this section and go straight to the next section. CSS is the abbreviation for cascading style Sheets (cascading style sheets). is a simple mechanism for adding styles to Web documents, belonging to the layout language of the presentation layer.

1. Basic Grammatical specifications
Parse a typical CSS statement:

P {COLOR: #FF0000; BACKGROUND: #FFFFFF}

Where "P" we call "selector" (selectors), indicates that we want to define a style for "P";
The style declaration is written in a pair of curly braces "{}";
Color and background are called "Properties", with semicolons ";" between different attributes. Separated
"#FF0000" and "#FFFFFF" are the values (value) of the property.
2. Color value
Color values can be written in RGB values, such as: Color:rgb (255,0,0), or in hexadecimal, as in the example color: #FF0000. If the hexadecimal value is a pair of duplicates, the effect will be the same. For example: #FF0000可以写成 #f00. However, if you do not repeat, you can not abbreviate, for example, #fc1a1b must be written full six digits.

3. Define Fonts
Web standards recommend the following font definition methods:

Body {font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, XXFarEastFont-Franklin, Sans-serif;

Fonts are selected in the order listed. If the user's computer contains Lucida Grande fonts, the document is specified as Lucida Grande. If not, it is specified as a Verdana font, and if there is no Verdana, specify the Lucida font, and so on;
Lucida Grande fonts for Mac OS X;
Verdana fonts are suitable for all Windows systems;
Lucida for UNIX users
"Song body" suitable for Chinese simplified users;
If none of the listed fonts are available, the default Sans-serif font is guaranteed to be invoked;
4. Group Selector
When several element style attributes are the same, a declaration can be invoked together, separated by commas between the elements: P, TD, Li {font-size:12px;}

5. Derivation Selector
You can use a derivation selector to define a style for a child element in an element, such as this:

Li Strong {font-style:italic; font-weight:normal;}

is to give Li the following child element strong defines an italic bold style.

6.id Selector
The CSS layout is implemented primarily with the layer "div", and the div style is defined by the "ID selector". For example, we first define a layer

<div id= "MenuBar" ></div>

Then define it in the stylesheet:

#menubar {margin:0px; BACKGROUND: #FEFEFE; COLOR: #666;}

where "menubar" is your own definition of the ID name. Note that the "#" number is added to the front.

The ID selector also supports derivation, for example:

#menubar p {text-align:right; margin-top:10px;}

This method is primarily used to define layers and those that are more complex and have multiple derived elements.

6. Category Selector
A class selector definition is represented in a CSS with a point beginning, for example:

.14px {color: #f60; font-size:14px;}

In the page, call the class= "category name" method:

<span class= "14px" >14px size font </span>

This method is relatively simple and flexible and can be created and deleted at any time according to page needs.

7. Define the style of the link
CSS uses four pseudo classes to define the style of the links, respectively: A:link, a:visited, A:hover, and a:active, for example:

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;}

The preceding statements define the style "link, visited link, when mouse is stopped above, when mouse is clicked." Note that you must write in the order shown above, otherwise the display may be different from what you expected. Remember that they are in the order of "LVHA".

Oh, see so much, a little dizzy bar, in fact, there are a lot of CSS syntax, here are only some of the common, after all, we are gradual, it is impossible to eat into the fat:




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.