CSS from scratch (1), css2016

CSS from scratch (1), css2016
1. Basic syntax

CSS Rules consist of two main parts: Selector and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

 

A selector is usually an HTML element that needs to change the style.

Each declaration consists of an attribute and a value.

Property is the style attribute you want to set ). Each attribute has a value. The attribute and value are separated by colons.

selector {property: value}

 

The following code defines the text color in the h1 element as red, and sets the font size to 14 pixels.

In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.

h1{color:red;font-size:14px;}

 

 

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

 

 

2. Advanced syntax

① Selector group. You can group the selector so that the Group selector can share the same declaration. Use commas to separate the selectors to be grouped. In the following example, all the title elements are grouped. All title elements are green.

h1,h2,h3,h4,h5,h6 {  color: green;  }

 

② Inheritance

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.

3. CSS derived Selector

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

In the following example, only the style of the strong element in the li element is italic, and no special class or id needs to be defined for the strong element. The code is more concise.

li strong {    font-style: italic;    font-weight: normal;  }

 

<P> <strong> I am a bold Chinese character, not a italic, because I am not in the list, therefore, 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>

 

4 ID Selector

The id selector can specify a specific style for HTML elements labeled 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;}

 

<P id = "red"> the paragraph is red. </P> <p id = "green"> the section is green. </P>

 

① Id selector and derived Selector

In modern la S, the id selector is often used to create a derived selector.

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.

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

 

② Separate Selector

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

 

5. class selector

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

In the following example, all HTML elements with the center class are centered.

.center {text-align: center}

 

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.

 
① Like id, class can also be used as a derivative selector:
The table unit inside the larger element of the class named fancy displays orange text on a gray background. (A bigger element named fancy may be a table or div)
.fancy td {    color: #f60;    background: #666;    }
 
 
② Elements can also be selected based on their classes:
The table unit with the class name fancy will be orange with a gray background.
td.fancy {    color: #f60;    background: #666;    }
 
 
6. CSS attribute Selector
You can set styles for HTML elements with specified attributes, not limited to class and id attributes.
① Attribute Selector
Set the style for all elements with the title attribute:
[title]{color:red;}
 
② Attribute and value Selector
Set the style for all the elements of title = "W3School:
[title=W3School]{border:5px solid blue;}
 
③ Attribute and value selector-multiple values
Set a style for all elements that contain the title attribute of the specified value. Applicable to attribute values separated by spaces:
[title~=hello] { color:red; }
 
The following example shows how to set a style for all elements with the lang attribute containing the specified value. Applicable to attribute values separated by hyphens:
[lang|=en] { color:red; }
 
7. How to insert CSS
When you read a style sheet, the browser will format the HTML document based on it. There are three ways to insert a style sheet: external, internal, and inline.
① 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. Use the <link> label to link to the style sheet on each page. <Link> tag in (document) header:
 
The browser reads the style declaration from the file mystyle.css and uses it to format the document.
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. The following is an example of a style sheet file:
hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");}
 
 
② Internal Style Sheets
When a document requires a special style, you should use an internal style sheet. You can use the <style> label to define an internal style sheet in the Document Header, as shown in the following figure:
 
③ Inline style sheet
Because we need to mix the performance and content together, inline styles will lose many of the advantages of style sheets. Use this method with caution. For example, when a style only needs to be applied once on one element.
To use inline Styles, you must use the style attribute in the relevant labels. The Style attribute can contain any CSS attribute. 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>
 
 
 
Here is the basis of CSS. Next, let's take a look at the detailed introduction of each part.