Getting started with the front end (CSS first half)

CSS styles consist of selectors and declarations, which in turn consist of properties and values, e.g. p{font-size:12px;color:red;}

The comment syntax is /*comment statement*/

Inline CSS style is to write CSS code directly in existing HTML tags, such as <p style="color:red;font-size:12px"> where the text is red. </p>

Embedded CSS style is to write CSS code between the <style type="text/css"></style> tags in the head

External CSS style is to write CSS code in a separate external file, and then import <link href="base.css" rel="stylesheet" type="text/css" /> in the head

The priority of the three is the principle of proximity

Selector types include tag selector, class selector (use English dots to add class name), ID selector (use # to add ID name), child selector (use greater than sign to specify the first-generation child element of the label), descendants selector (use spaces to specify descendant elements of the tag)

Pseudo-class selectors can set styles for a certain state of the label, such as a:hover{color:red;}, grouping selectors use commas to set the same style for multiple labels

An element can have multiple classes but only one ID

Some CSS styles are inherited, but some CSS styles are not.

CSS styles with high weights will be used. Labels have a weight of 1, class selectors have a weight of 10, and ID selectors have a weight of up to 100.

Cascading means that there can be multiple CSS styles for the same element. When there are styles with the same weight, it will be determined according to the order of these CSS styles, and the last CSS style will be applied.

Use !important to have the highest weight for certain styles, e.g. p{color:red!important;}

Typesetting, font-family, font-size, color, bold font-weight:bold, italic font-style:italic, underline text-decoration:underline, strikethrough text-decoration:line-through

Paragraph typesetting, indentation text-indent: 2em, line spacing line-height: 1.5em, letter spacing letter-spacing, word spacing word-spacing, alignment text-align

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324949072&siteId=291194637