Basic CSS (Cascading Style Sheet) Knowledge

Basic CSS (Cascading Style Sheet) Knowledge
CSS refers to the Cascading Style Sheet ). A style defines how to display HTML elements. It is usually stored in the style sheet and added to HTML 4.0 to solve the problem of separation of content and performance.

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.

The browser sets the internal style sheet of the external style sheet by default (located inInside the tag) inline style (inside the HTML element)

Therefore, inline styles (inside HTML elements) have the highest priority, which means they will take precedence over the following style declarations:The style declaration in the label, the style declaration in the external style table, or the style declaration in the browser (default value ).

CSS 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 you need 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;}

The following shows the structure of the above Code:

Tip: Use curly brackets to enclose the declaration.

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 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?

Derived 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 properly using the derived selector, we can make HTML code more clean.

For example, if you want the strong element in the list to become italic, rather than the regular italic, you can define a derived selector as follows:

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

Note thatThe context of the blue code:

I am in bold, not italic, because I am not in the list, so this rule does not work for me
 
 

  
  
I am a italic. This is because the strong element is located in the li element.
I am a normal font.
 
 

In the above 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.

Id Selector

The id selector can specify a specific style for HTML elements labeled with a specific id.

The id selector is defined.

Note that each id can only appear once in the same html document.

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

.center {text-align: center}

In the preceding example, 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.

class="center">This heading will be center-aligned
class="center">This paragraph will also be center-aligned.

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

The use and combination of various types of CSS should be used flexibly.

How to insert a style sheet

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 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 label is linked to the style sheet. Tag in (document) header:

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

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

Do not leave spaces between attribute values and units. If you use "margin-left: 20 px" instead of "margin-left: 20px", it is only valid in IE 6, however, it cannot work normally in Mozilla/Firefox or Netscape.

Internal style sheet

When a document requires a special style, you should use an internal style sheet. You can useInline Style

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:

style="color: sienna; margin-left: 20px">This is a paragraph

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;

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