CSS starting from scratch (1)--CSS basic syntax

1. CSS Syntax

CSS rules consist of two main parts: selectors, and one or more instructions.

For example: Selector{declaration1;declaration2;declaration3, ...;}

Note: Selectors are usually HTML elements that you need to change the style.

Each declaration has a property and a value.

The property is the style property (style attribute) that you want to set. Each property has a value separated by a colon (:) between the property and the value.

Example: h1{color:red;font-size:10px;}

2. Different notation and unit of value

In addition to the English word red, we can also use the hexadecimal color value #ff0000;

Example: P{color: #ff0000;}

In order to save bytes, we can use the abbreviation of CSS

Example: P{color: #f00;}

You can also use RGB values in two ways (this method is rarely used, just need to understand the line)

Example: P{color:rgb (255,0,0);}

P{color:rgb (100%,0%,0%);} Note: The use of rgb,0 also requires a percent sign 0%

3. When the value has a word, remember to add the quotation mark ""

Example: p{font-family: "Sans serif";}

4, the definition of multiple declarations, you need to separate it with a semicolon, that is, the attribute and the attribute separated by a semicolon (;).

Example: p{text-align:center;color:black;font-family:arial;}

5. Grouping of selectors

You can group selectors so that the grouped selectors can share the same claims. Use commas to separate the selected areas of the Ouch grouping,

Example: H1,h2,h3,h4,h5{color:green;}

All headings are divided into groups, and the attribute color of all headings is green.

6. Succession and problems

Depending on the CSS, child elements inherit attributes from the parent element. But it doesn't always work this way. Take a look at the following rule:

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

According to the above rule, the BODY element of the site will use the Verdana font (if the font exists in the visitor's system).

With CSS inheritance, child elements inherit the attributes owned by the highest-level elements (in this case, the body) (these child elements such as P, TD, UL, OL, UL, Li, DL, DT, and DD). No additional rules are required, and all child elements of the body should display the Verdana font, as are the child elements of the child element. And in most modern browsers, it is true.

But that is not necessarily the case in the bloody era of browser wars, when support for standards is not a business priority. For example, Netscape 4 does not support inheritance, it ignores inheritance, and also ignores rules applied to the BODY element. Ie/windows until IE6 there is a related problem, the font style inside the table is ignored. What are we supposed to be doing?

Treat Netscape4 with Kindness

Fortunately, you can deal with the Legacy browser's inability to understand inheritance by using the redundancy rules we call "be Kind to Netscape 4".

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

P, TD, UL, OL, Li, DL, DT, DD {font-family:verdana, Sans-serif;}

4.0 browsers do not understand inheritance, but they can understand group selectors. This will waste some of the user's bandwidth, but if you need to support Netscape 4 users, you have to.

What if you don't want the "Verdana, Sans-serif" font to be inherited by all the child elements? For example, you want the font of the paragraph to be times. No problem. Create a special rule for P so that it will get rid of the rules 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;}

7. Derivation Selector

By defining the style based on the context in which the element is positioned, you can be more concise with the markup.

In CSS1, the selection of rules that are applied in this way is called the context selector, because they rely on context to apply or avoid a rule, and in CSS2 they are referred to as derived selectors, but the effect is the same regardless of what you call them.

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

In the example above, only the strong element in the LI element is styled in italics, without defining a particular class or ID for the strong element, and the code is more concise.

8. ID Selector

The ID selector can specify a specific style for an HTML element of a specific ID.

The ID selector is defined as "#".

Dismount two ID selectors, the first one can define the color of the element to be red, the second defines the color of the element as green:

#red {color:red;}

#green {color:green;}

In the following HTML code, the P element with the ID property of red is shown in red, and the P element with the id attribute green is shown in color.

<p id= "Red" > This paragraph is red </p>

<p id= "Green" > This paragraph is the Greens </p>

9. ID selector and derivation selector

#sidebar p{font-style:italic; text-align:right; margin-top:0.5em;}

The above style will only apply to paragraphs that appear in an element with an ID of sidebar. This element is most likely a div or a table cell, although it may also be a table or other block-level element. It can even be an inline element, such as <em></em> or <SPAN></SPAN>, but this usage is illegal because it is not possible to embed <p> in inline element <span>

A selector can be used multiple times, and this ID selector is available for multiple uses:

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

Separate selectors

ID selection is not used to create a derived selector in a timely manner, it can also function independently

Example: #sidebar {border:1px dotted #000; padding:10px;}

According to this rule, an element with ID sidebar will have a pixel-wide black dot border with a width of 10 pixels (padding, internal whitespace) around it. Older versions of the Windows/ie browser may ignore this rule unless you specifically define the element to which this selector belongs:

Example: div#sidebar {border:1px dotted #000; padding:10px;}

10. CSS Class Selector

In CSS, the class selector takes a dot (.) Show:

. Center{text-align:center;}

In the example above, all HTML elements that have the center class are centered.

In the following HTML code, both the H1 and P elements have the center class. This means that both are subject to the rules in the. Center selector.

<H1 class="center" > This heading'll be center-aligned

<p class="center" > This paragraph'll also be center-aligned. </p>

Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.

As with the ID, class can also be used as a derived selector :

.fancy td{color: #f60; background: #666;}

In the above example, the table cells inside the larger element with the class name fancy will display the orange text on a gray background. (a larger element called fancy may be a table or div)

Elements can also be selected based on their class two:

td.fancy{color: #f60; background: #666;}

In the example above, a table cell with the class name fancy will be orange with a gray background.

<TD class="fancy" >

You can assign a class fancy to any number of table elements as many times as you like. Those cells marked with fancy will be orange with a gray background. Cells that are not assigned a class named fancy are not affected by this rule. It is also worth noting that the paragraph of class fancy will not be orange with a gray background, and of course, any other elements labeled as fancy will not be affected by this rule. This is due to the way we write this rule, which is limited to the table cell labeled fancy (that is, using the TD element to select the fancy Class).

11. CSS Property Selector

Sets the style for the HTML element with the specified property.

You can set the style for the HTML element that owns the specified property, not just the class and ID properties.

Note: Only in the rules! DOCTYPE, IE7 and IE8 support property selectors, and attribute selection is not supported in IE6 and earlier versions.

The following example sets the style for all elements with the title property:

[title]{color:red;}

The following example sets the style for all elements of title= "W3school":

[title=W3School]{border:5px solid blue;}

The following example sets the style for all elements that contain the title property of the specified value. Applies to property values separated by spaces:

[title~=hello]{color:red;}

The following example sets the style for all elements with the lang attribute that contains the specified value. Applies to attribute values separated by hyphens:

[Lang|=en] {color:red;}

Set the style of a form

The property selector is especially useful when styling a form that does not have a class or ID:

Input[type= "Text"] {

width:150px; Display:block; margin-bottom:10px;

Background-color:yellow; Font-family:verdana, Arial; }

Input[type= "button"] {

width:120px; margin-left:35px;

Display:block; Font-family:verdana, Arial;

}

CSS Selector Reference Manual Selector

Selector	Description
[attribute]	Used to select an element with the specified attribute.
[attribute=value]	Used to select an element with the specified attributes and values.
[attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value]	Matches each element of the property value to the beginning of the specified value.
[attribute$=value]	Matches each element of the property value to the end of the specified value.
[attribute*=value]	Matches each element of the property value that contains the specified value.

12. How to create CSS

How do I insert a style sheet? When you read a stylesheet, the browser formats the HTML document according to it, and there are three ways to insert the style sheet:

External style sheet

An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file. Each page uses <link> tags to link to the style sheet. <link> tags at the head of (document):

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

The browser reads the style declaration from the file mystyle.css and formats the document according to it.

External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with a. css extension. Here is an example of a style sheet file:

hr {Color:sienna;}

p {margin-left:20px;}

Body {background-image:url ("Images/back40.gif");}

Do not leave spaces between the attribute values and the units. If you use "margin-left:20 px" instead of "margin-left:20px", it works only in IE 6, but not in Mozilla/firefox or Netscape

Internal style

An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:

<style type="text/css">

hr {Color:sienna;}

p {margin-left:20px;}

Body {background-image:url ("Images/back40.gif");}

</style>

inline style

Inline styles lose many of the benefits of stylesheets because of the mix of performance and content. Use this method with caution, such as when the style only needs to be applied once on one element.

To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:

<p style = "Color:sienna; margin-left:20px" > This is a paragraph </p>

Multiple styles

If some properties are defined by the same selector in a different style sheet, the property values are inherited from the more specific style sheet.

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

h3 {color:red; Text-align: left ; font-size: 8pt ;}

An internal style sheet has two properties for the H3 selector:

h3 {text-align: right ; font-size: 20pt ;}

If this page with an internal stylesheet is connected to an external style sheet, the H3 gets the following style:

Color:; red text-align: right ; font-size: 20pt ;

That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text-alignment) and font size (font-size) will be superseded by the rules in the inner style sheet.

CSS starting from scratch (1)--CSS basic syntax