CSS knowledge point carding (I.)

One: CSS (cascading style sheets abbreviation), translated as "cascading style sheet" or "Cascading style sheet", referred to as the style sheet.

Role: It is primarily used to set the appearance or style of HTML pages.

Appearance or style: the size, color, font, background color, background image of the text in the HTML Web page!

Writing CSS Syntax specification:

1. CSS code is made up of selectors and a pair of parentheses
2. Inside the curly braces is a statement of one clause
3. Each statement is to use the semicolon below the English state
4. Each statement is made up of "property: Value"
5. Property values in CSS are generally not quoted
6. In CSS, if the attribute value is numeric data, it is generally necessary to add unit units typically px (pixels)
7. HTML tags cannot appear in CSS

Two: How to write CSS

Where the CSS code should be written!

The way of writing is divided into three kinds : embedded, outer chain, in-line.

① embedded: embed CSS code into HTML file, embed CSS code into HTML page via <style> tag in HTML!

Syntax rules:

<style type= "Text/css" >

/* Write CSS code */

Selector {property: Value; property: Value;}

</style>

If we are using the HTML5 document the type attribute can be omitted without writing!

Note:<style></style> It can appear anywhere in the HTML, but in general we'll just place it in the head tag.

② outer chain: outside the chain is to write a file with a. css extension, and then use the <link/> tag in the

Note: The CSS file cannot be run alone, it must depend on the HTML file!

Syntax rules:

<link rel= "stylesheet" href= "CSS file Address" >

③ Inline: writes CSS code in the Style property of the HTML tag. Style is a common property, and every tag has this property!

Syntax format:

< tag name style= "attribute: value; property: value;" ></Tag name >

Summarize:

Write CSS code in an embedded way, which can only be used for the current HTML file

Use an outer chain to write CSS code that can be used for multiple HTML files

Three: Notes

Format:

/* Contents of comments */

Four: Selector

Selectors refer to the corresponding HTML tag by certain grammatical rules, and then set the style to the corresponding HTML tag.

Selectors are divided into four categories: basic selector , composite selector , pseudo class selector , and attribute selector .

Basic selector:

--------------------------------------------------------------------------------------------------------------- ------------------------------------------

Composite selector:

--------------------------------------------------------------------------------------------------------------- ------------------------------------------

Pseudo-Class selectors:

Pseudo-class selectors are used to set styles for different states of hyperlinks.

Different states of hyperlinks

Normal status hyperlinks are not visited: link

Post-access status hyperlink has been accessed: visited

Mouse over the status mouse on the hyperlink above, but did not press the left mouse button down: hover

Activation state the left mouse button has been pressed down, but did not leave the mouse button popup: active

Pseudo-class selectors are all with a colon ":"

Attention:

The different states of hyperlinks it is actually in order. This means that pseudo-class selector settings are actually in order.

If you do not follow the order of the pseudo-class selector, the style is invalidated.

--------------------------------------------------------------------------------------------------------------- ------------------------------------------

Property selector:

The property selector is related to the property name and property value of the label.

The property selector matches an element by its property name and property value.

V: Dimension style properties

Six: Text and font properties

Text properties:

Property name	Value	Meaning
Color	#ff0000或red或rgb (3,5,8)	Set color for text
Text-align	Left, right, center (center)	Set the horizontal alignment direction of text
Text-decoration	None (remove text decoration lines), underline (underline), overline (underline), Line-through (strikethrough)	Set text decoration lines
Text-transform	Capitalize, uppercase, lowercase	Case conversion or initial capitalization
Line-height	Fixed value or Percentage	Set row height
Text-indent	px or EM	Set the first line indent to allow negative values
Letter-spacing	Px	Set character spacing
Word-spacing	Px	Set word spacing

--------------------------------------------------------------------------------------------------------------- ------------------------------

Font properties:

Property name	Value	Function
Font-style	Normal (healthy), (italic) italic	Set Text to italic
Font-weight	Normal (OK), bold	Set Text thickness
Font-size	such as 12px, 14px remember to add units	To set the size of text
Font-family	Microsoft ya Black, italic, Arial .....	Set font for text
Font	Example: Font:italic bold 14px "Microsoft Ya Hei"	Shorthand property to set italic, bold, size, and font for text at the same time Spaces are required between each value and must be in order

Seven: List style properties

The list here refers to unordered lists and ordered lists

Because the unordered list is the most used in the entire page layout.

CSS knowledge point carding (I.)