Must master CSS three styles and their order of precedence

Source: Internet
Author: User
CSS is all called "Cascading style sheets (cascading style Sheets)"

CSS code syntax

CSS styles consist of selectors and declarations , and declarations are made up of attributes and values , as shown in:

selectors , also called selectors, indicate the elements in the Web page to which you want to apply a style rule, as in this case, the text in all segments (p) in the page will turn blue, while other elements, such as OL, will not be affected.

declaration: in English curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are more than one statement, the middle can be a semicolon ";" Delimited, as follows:

p {font-size:12px;color:red;}

1, the last statement may not have a semicolon, but for later modification convenient, usually plus a semicolon.

2, in order to use the style easier to read, you can write each code in a new line, as follows:

p {   font-size:12px;   color:red; }

Just like in HTML annotations, there are comment statements in CSS: Use the/* Comment statement */to mark (using <!--comment statement in HTML). Just like the following code:

Inline CSS style, written directly in existing HTML tags

From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline, embedded and external three kinds.

Inline CSS stylesheet is to write CSS code directly in the existing HTML tags, such as the following code:

<p style= "Color:red" > here the text is red. </p>
Note that it is wrong to write in the start tag of the element:
<p> here the text is red. </p style= "color:red" >
and CSS style code to write in style= "" double quotes, if there are multiple CSS style code settings can be written together, separated by semicolons. The following code:
<p style= "color:red;font-size:12px" > here the text is red. </p>

Embedded CSS style, written in the current file

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags. The following code is implemented to set the text in three <span> tags to red:

<style type= "Text/css" >span {color:red;} </style>

Embedded CSS styles must be written between <style></style>, and in general the embedded CSS style is written between

External CSS style, written in a separate file

An external CSS style (also known as an inline) is to write the CSS code in a separate external file, with a CSS style file with a ". css" extension, within

<link href= "Base.css" rel= "stylesheet" type= "Text/css"/>

Attention:

1. CSS style file names are named with meaningful English letters, such as MAIN.CSS.

2, rel= "stylesheet" type= "text/css" is fixed notation cannot be modified.

3, <link> label location is generally written in the

Three ways to prioritize

Remember their priorities: inline > Embedded > External

But embedded > external has a premise: the placement of the embedded CSS style must be behind the exterior.

In fact, in summary, that is-the nearest principle (the higher the priority level from the Set element).

But note that the precedence summarized above is premised on the premise that CSS styles in inline, inline, and external style sheets are in the same weighted value case

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial

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.