Simple understanding and application of CSS

I. basic CSS concepts:

CSS-Cascading Style Sheet (CSS), also known as "style sheet", is used for designing webpage styles.

CSS can precisely control the position and layout of objects in hmtl at the pixel level, supports almost all font size styles, and has the ability to model object boxes on webpages; the ability to centrally control the display attributes of each logo in hmtl; the ability to effectively control the appearance of webpages and create special effects, it is a style design language that truly separates webpage performance from content.
Ii. CSS structure and syntaxCSS separates webpage performance from content, and has to talk about the syntax and structure of CSS.

CSS attributes and selectors

The syntax structure of CSS consists of three parts: selector, property, and value ).
Usage:

selector {Property:value;}

Selector)It refers to the object to be targeted by this set of style encoding. It can be an XHTML tag, such as body, H1; or a tag that defines a specific ID or class. For example, the # main selector selects <Div id = "Main">, that is, an object with the specified main as ID. The browser strictly parses the CSS selector, and each set of styles will be applied to the corresponding objects by the browser.

Property)CSS is the core of CSS style control. For every XHTML tag, CSS provides rich style attributes, such as color, size, positioning, and floating mode.

Value)It refers to the value of an attribute in two forms. One is the value of a specified range, such as the float attribute. Only left, right, and none values can be applied; the other is numerical, for example, width can be 0-9999, or other mathematical units.

In practical applications, we often use the following similar application forms:

body {background-color:blue;}

There are three types of selectors: Id selector, class selector, and HTML Tag selector. The priority is: Id selector> class selector> HTML Tag selector.

Id Selector

ID is used to identify HTML in the webpageOneThe ID selector of a specific element is defined by # in CSS.

Example:

In HTML:

<Span id = "special"> Column 2 </span>

In css:

#special{    font-size:14px;}

Class Selector)

Class is used to identifyGroupFor specific elements, the class selector is defined by a. Number in CSS.

Example:

In HTML:

<SPAN class = "menu3"> column 3 </span>

In css:

.menu3 span{    color:#00f;    font-size:40px;}

Tag selector (type selector)

A type selector is a type selector that uses an existing tag type in a webpage as its name. The body is a tag type in the webpage, And the DIV is also, and the span is also. Therefore, the following selectors are all type selectors that control all the body, Div, or span on the page:

body{}div{}span{}

Of course, CSS also provides convenient Syntax:

①. Apart from specifying styles for a single XHTML element, you can also assign the same styles for a group of objects and use commas to separate the selectors.

h1,h2,h3,p,span{font-size:12px; font-family:arial;}

Make all H1, H2, H3, P, and span on the page have the same style definition. The advantage of this is that you only need to write a style sheet once to use the same style on the page, which reduces the amount of code and improves the structure of CSS code.

②. You can set the style of a sub-object of an object, and use spaces as separators between objects.

Example:
In HTML:

<H1> This is a piece of text. <span> This is a text in a span </span> 
In css:
h1 span{font-weight:bold;}
The span label under the H1 label will be applied to the font-weight: Bold Style settings. Note: This style is only valid for labels with this structure. This style is not applied to separately existing H1 or separately existing span and other spans not under the H1 label. This helps us avoid setting too many IDs and classes, and directly set too many settings.
Also:
H1. P1 {}/* indicates all the class P1 labels under the H1 label. */# Content H1 {}/* indicates all H1 labels under the tag whose ID is content. */
Of course, the multilevel mode is also supported. The following selector style can also be used:
body h1 span stront{ font-weight=bold;}
CSS also provides some special label Representation Methods:

1. Use "*" to indicate all elements.
*{margin:0PX;padding:0Px;border:0px;}
②. Set the full-text style in the body
body{font-size:14px;}
③ A: Link, A: hover, A: visited allows you to set hyperlink styles that are not moved up, passed, or accessed
A: Link, A: visited {/* hyperlink style not moved with the mouse * // * hyperlink style after access */color: #000; text-Decoration: none;} A: hover {/* the style of the hyperlink that the mouse moves up */color: # 00f; text-Decoration: underline ;}

④. Center alignment:

Text-align: center;/* horizontal text alignment */line-Height: 2px;/* (automatically vertical alignment if the value is the same as the Row Height) */vertical-align: middle;/* vertical alignment of elements */
 
Iii. Advantages of CSS layoutCSS-based web pages have four advantages over traditional table-based web pages: 1. indicates separation from content 2. increase page loading speed 3. ease of maintenance and Revision 4. more in line with W3C specified web standards
Iv. CSS usage:CSS can be used in three ways on the site webpage: ① inline style: The style attribute is used to embed the style into each page element.
② Internal style sheet: insert the embedded style sheet created with the style element into the head element section of the webpage.
③ External style sheet: Use the link element to link an external style sheet to a webpage. Example: [inline style]
<HTML> [Internal style sheet]
<HTML> External table example test.htm file content:
<HTML> “Csstest.css "file content:
 h1  {color:marron;} p   {color:hotpink; font-familiy:Arial;}