CSS tutorial Part1 [Introduction, syntax, selector] (Excerpted from W3C School)

ArticleDirectory

• CSS Introduction
• Basic CSS syntax
• CSS advanced syntax
• CSS derived selector (also known as parent-child selector)
• Css id Selector
• CSS class selector
• How to Create CSS

CSS Introduction

• CSS refers to the Cascading Style Sheet)
• Style definition how to display HTML elements
• Styles are usually stored in style sheets.
• Adding styles to HTML 4.0 aims to solve the problem of separation of content and performance.
• External style sheets can greatly improve work efficiency
• External style sheets are usually stored in CSS files.
• Multiple style definitions can be stacked into one

Style solves a common problem

HTML tags are originally designed to define document content. By using tags such as

Because the two major browsers (Netscape and Internet Explorer) constantly add new HTML tags and attributes (such as font tags and color attributes) to the HTML specification, it is increasingly difficult to create sites whose content is clearly independent from the document presentation layer.

To solve this problem, the W3C, a non-profit standardization alliance, shoulder the mission of HTML standardization and create styles beyond HTML 4.0 ). All mainstream browsers support Cascading Style Sheets.

 

Style Sheets greatly improve work efficiency

A style sheet defines how to display HTML elements, just as the font tag and color attribute of HTML 3.2 play a role. Styles are usually stored in external. CSS files. By editing only a simple CSS document, the external style sheet enables you to change the layout and appearance of all pages on the site at the same time.

As multiple page styles and la s can be controlled at the same time, CSS can be a breakthrough in the web design field. As a website developer, you can define styles for each HTML element and apply them to any number of pages you want. To perform global updates, you only need to change the style, and all elements in the website are automatically updated.

 

Multiple styles are stacked into one

Style sheets allow you to specify style information in multiple ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets in the same HTML document.

Which style will be used when the same HTML element is defined by more than one style?

Generally, all styles are stacked in a new virtual style table according to the following rules, where number 4 has the highest priority.

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside the
4. Inline style (inside the HTML element)

Therefore, inline styles (inside an HTML element) have the highest priority, which means they take precedence over the following style Declaration:

 

Basic CSS syntax

CSS syntax consists of three parts: selector, attribute, and value: Selector {property: Value}

Selector is usually the HTML element or tag you want to define. Property is the attribute you want to change and each attribute has a value. The attribute and value are separated by colons and surrounded by curly brackets, thus forming a complete style Declaration (Declaration ):

 

Different write methods and units of Values

In addition to the English word red, we can also use the hexadecimal color value # ff0000: P {color:# Ff0000;}

To save bytes, we can use the abbreviated form of CSS: P {color:# F00;}

We can also use the RGB value p {color:RGB (255, 0, 0);} P {color:RGB (100%, 0%, 0%);}

When the RGB percentage is used, the percentage symbol must be written even if the value is 0. However, this is not required in other cases. For example, when the size is 0 pixels, PX units are not required after 0, because 0 is 0, regardless of the unit.

 

Space and case

Most Style Sheets contain more than one rule, while most rules contain more than one declaration. Multiple declarations and spaces make the style sheet easier to edit:

Body {color: #000; Background: # FFF; margin: 0; padding: 0; font-family: Georgia palatino serif ;}

 

CSS advanced syntax selector grouping

You can group the selector so that the Group selector can share the same declaration. Use commas to separate the selectors to be grouped.

H1, H2, H3, H4, H5, h6{Color: green ;}

 

Inheritance and Problems

Based on CSS, child elements inherit attributes from parent elements. But it does not always work in this way. Take a look at the following rule:

Body {font-family: verdana, sans-serif ;}

According to the above rule, the site's body element uses the verdana font (if the visitor's system has this font ).

Through CSS inheritance, sub-elements inherit the attributes of the highest level elements (in this example, the body) (these sub-elements such as P, TD, UL, ol, UL, Li, DL, DT, and DD ). No other rules are required. All the child elements of the body must display the verdana font. And most modern browsers do.

However, in the bloody Age of the browser war, this situation may not necessarily happen. At that time, standard support was not a priority for enterprises. For example, Netscape 4 does not support inheritance. It not only ignores inheritance, but also ignores rules applied to body elements. There are still problems with IE/windows and IE6, And the font style in the table will be ignored. What should we do?

Fortunately, you can use the redundancy rule we call "Be kind to Netscape 4" to handle inheritance issues that legacy browsers cannot understand.

Body {font-family: verdana, sans-serif;} p, TD, UL, ol, Li, DL, DT, DD {font-family: verdana, sans-serif ;}

4.0 browsers cannot understand inheritance, but they can understand the group selector. Although this will waste some user bandwidth, if you need to support Netscape 4 Users, you have to do so. If you do not want the "verdana, sans-serif" font to be inherited by all sub-elements, what should you do? For example, you want the paragraph to have a font of times. No problem. Create a special rule for P so that it will get rid of the rule of the parent element:

Body {font-family: verdana, sans-serif;} TD, UL, ol, UL, Li, DL, DT, DD {font-family: verdana, sans-serif ;}P{Font-family: Times, "Times New Roman", Serif ;}

 

CSS derived selector (also known as parent-child selector)

You can define a style based on the context of the element in its position to make the tag more concise.

In css1, the selectors that apply rules are called contextual selectors because they depend on context relationships to apply or avoid a rule. In css2, they are called derivative selectors, but whatever you call them, they all play the same role.

The derived selector allows you to determine the style of a tag Based on the context of the document. By reasonably using the derived selector, we can make the htmlCodeBecome more clean.

 

Li strong{Font-style: italic; font-weight: normal ;}

Note the context of the Blue Code marked as <strong>:

<P> <strong> I am in bold or not, because I am not in the list, this rule does not work for me </strong> </P> <ol><Li><Strong>I am a italic. This is because the strong element is located in the Li element.</Strong></LI><Li> I am a normal font. </LI> </OL>

 

Css id Selector

The ID selector can specify a specific style for HTML elements marked with a specific ID,The ID selector is defined.

The following two ID selectors can be used to define the color of the first element as red, and the color of the second element as Green:

# Red{Color: red ;}# Green{Color: green ;}

In the following HTML code, the P element whose ID attribute is red is displayed in red, while the P element whose ID attribute is green is displayed in green.

<PId = "red"> This paragraph is in red. </P> <pId = "green"> This section is green. </P>

Note: The ID attribute can only appear once in each HTML document.

 

Id selector and derived Selector

# Sidebar P{

Font-style: italic;

Text-align: right;

Margin-top: 0.5em;

}

The above style will only apply to paragraphs that appear in the element where ID is sidebar. This element may be a div or table unit, although it may also be a table or other block-level element.

 

One selector, multiple usage, Even if the element labeled as sidebar appears only once in the document, this ID selector can be used many times as a derived selector:

# Sidebar P{

Font-style: italic;

Text-align: right;

Margin-top: 0.5em;

}

# Sidebar H2{

Font-size: 1em;

Font-weight: normal;

Font-style: italic;

Margin: 0;

Line-Height: 1.5;

Text-align: right;

}

Here, unlike other P elements on the page, the P elements in the sidebar get special processing, and, unlike all other H2 elements on the page, the H2 elements in the sidebar get different special processing.

 

The ID selector can be used independently even if it is not used to create a derived selector:

# Sidebar{

Border: 1px dotted #000;

Padding: 10px;

}

According to this rule, the element with the ID of Sidebar will have a black dot border with a pixel width, and there will be a 10 pixel width padding (padding, internal blank) around it ).

 

CSS class selector

In CSS, the class selector is displayed with a dot:

. Center{

Text-align: Center

}

All HTML elements with the center class are centered. In the following HTML code, both H1 and P elements have center classes. This means both of them will comply with the rules in the ". Center" selector.

<H1Class = "center"> This heading will be center-aligned

<PClass = "center"> This paragraph will also be center-aligned. </P>

The first character of the class name cannot contain numbers! It does not work in Mozilla or Firefox.

 

Like ID, class can also be used as a derivative selector:

. Fancy TD{Color: # f60; Background: #666 ;}

In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (A bigger element named fancy may be a table or Div)

 

Elements can also be selected based on their classes:

TD. Fancy{Color: # f60; Background: #666 ;}

In the above example, the table unit named fancy will be orange with a gray background.

<TDClass = "fancy">

You can allocate the fancy class to any table element for any number of times. Cells marked with fancy will all be orange with a gray background. Cells that are not assigned a class named fancy will not be affected by this rule. It is worth noting that paragraphs with a class of fancy will not be orange with a gray background. Of course, any other elements marked as fancy will not be affected by this rule. This is because of the way we write this rule. This effect is limited to the table units labeled as fancy (that is, using TD elements to select the fancy class ).

 

How to Create CSS

There are three ways to insert a style sheet:

External style sheet

When a style needs to be applied to many pages, the external style sheet is ideal. When using an external style sheet, you can change the appearance of the entire site by changing a file.

<Head> <LinkRel = "stylesheet" type = "text/CSS" href ="Mystyle.css"/> </Head>

External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with the. CSS extension.

HR {color: Sienna;} p {margin-left: 20px;} body {background-image: URL ("images/back40.gif ");}

Do not leave spaces between attribute values and units.Assume that "margin-left: 20 PX" instead of "margin-left: 20px "!

 

Internal style sheet

When a document requires a special style, you should use an internal style sheet.

<Head><Style type = "text/CSS">HR {color: Sienna;} p {margin-left: 20px;} body {background-image: URL ("images/back40.gif ");}</Style></Head>

Inline Style

Because we need to mix the performance and content together, inline styles will lose many of the advantages of style sheets. Please use this method with caution!

<PStyle= "Color: Sienna; margin-left: 20px"> This is a paragraph </P>

Multiple styles

If some attributes are defined by the same selector in different style sheets, the attribute values will be inherited from more specific style sheets.

For example, an external style sheet has three attributes for the H3 selector:

H3 {color: red; text-align:Left; Font-size:8pt;}

The internal style sheet has two attributes for the H3 selector:

H3 {text-align:Right; Font-size:20pt;}

If the page with an internal style sheet is linked to an external style sheet at the same time, the style obtained by H3 is:

Color:Red; Text-align:Right; Font-size:20pt;

color attributes are inherited from external style sheets, while text-alignment and font-size are replaced by rules in internal style sheets.