Getting Started with CSS

The following items are from the MU-class network

CSS is all called Cascading style sheets (cascading style Sheets), which is primarily used to define the display style of HTML content within the browser, such as text size, color, font bold, and so on.

CSS code Syntax

CSS styles consist of selectors and declarations, and declarations are made up of attributes and values, as shown in:

selectors , also called selectors, indicate the elements in the Web page to which you want to apply a style rule, as in this case, the text in all segments (p) in the page will turn blue, while other elements, such as OL, will not be affected.

declaration : in English curly braces "{}" is the declaration, the attribute and the value are separated by the English colon ":". When there are more than one statement, the middle can be a semicolon ";" Separated.

From the form of CSS-style code insertion, the basic can be divided into the following 3 kinds: inline, embedded and external three kinds.

内联式 CSS style sheets are simply writing CSS code directly into existing HTML tags.

The embedded CSS style is the ability to write CSS style code between <style type= "text/css" ></style> tags.

an external CSS style (also known as an inline) is to write the CSS code in a separate external file, with the CSS style file " .css " as the extension, within <link href= "Style.css" rel = "stylesheet" type = "Text/css" />

Priority level:内联式 > 嵌入式 > 外部式

But embedded > external has a premise : The placement of the embedded CSS style must be behind the exterior. That is, the <link href= "Style.css" ...> code is in front of <style type= "Text/css" >...</style> Code (also written in the actual development). In fact, in summary, that is --就近原则（离被设置元素越近优先级别越高） .

What is a selector?

The part before {} is the selector, and the selector indicates the object of the style in {}, that is, which elements in the Web page the style acts on.

Tag Selector : the tag selector is actually a tag in the HTML code. p{font-size:12px; Line-height:1.6em;}

class selector: . Class Selector name { CSS style code; }With (.)

ID Selector:    #setGreen{ color:green;} With (#)

The difference between the class and the ID selector is the same: It can be applied to any element; different points:1, the ID selector can only be used once in the document. 2. You can use the class selector word list method to set multiple styles for an element at the same time.

Child selector: the greater than symbol (>), which selects the first generation of child elements of the specified label element. . Food>li{border:1px solid red;}

include (descendant) selectors: contains selectors, which include spaces that are used to select the Descendants element under the specified label element. . First span{color:red;}

The child selector and the containing selector distinguish :> acting on the first generation of descendants of the element, and the Spaces Act on all descendants of the element.

Universal selector: specified with a (*) number, it is used to match all tag elements in the HTML. * {color:red;}

pseudo-Class selector: It allows you to set a style for a label that does not exist in the HTML (a state of the label), such as when we set the font color for the mouse-over state of a tagged element in html, a:hover {color:red;}

About pseudo-class selectors, so far, the "pseudo-class selector" that can be compatible with all of the hover is used on the A-label: (There are many pseudo-class selectors, especially in CSS3, but because they are not compatible with all browsers, this tutorial is just about one of the most common). In fact: hover can be placed on any label, such as P:hover, but their compatibility is also very bad, so now more commonly used or a:hover combination.

category selector: when you want to set the same style for multiple label elements in the HTML, you can use the grouping selector (,), which is the following code for the H1 in the right-hand code editor, and a span label that also sets the font color to red: h1,span{ color:red;}

Getting Started with CSS