XHTML Day 7th: CSS Entry knowledge

Source: Internet
Author: User
Tags define definition
Css|xhtml

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

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.

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:

14px size font

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.