Basic css knowledge (I), basic css knowledge (

Basic css knowledge (I), basic css knowledge (

I. Css rules are mainly composed of two parts. 1. selector 2. One or more declarations
A. selector is mainly used to determine the HTML elements whose styles need to be changed.
B. Each declaration is composed of an attribute and a value. The declaration is surrounded by curly brackets. The attributes and values are separated by colons (:). Multiple declarations are separated by semicolons.

Example: form {width: 200px; margin: 20px auto;}

2. selector IDs, classes, elements (TAGS), attributes, and pseudo classes, GeneralSelector

As you may know, write the pseudo-class selector:

The css pseudo class is used to add special effects to certain selectors.

Next we will introduce the pseudo-anchor class.

In browsers that support css, different links can be displayed in different states, including activity, accessed, inaccessible, and hovering.

 

A: link {color: # FF0000}/* unaccessed link */

A: visited {color: #00FF00}/* accessed link */

A: hover {color: # FF00FF}/* move the cursor over the link */

A: active {color: # 0000FF}/* selected link */

Note:

1. In CSS definition, a: hover must be placed after a: link and a: visited.

2. In CSS definition, a: active must be placed after a: hover, which is valid.

 

3. the pseudo-class name is case insensitive.

Priority id> pseudo class> element> common

3. Unit of Value

% Percentage

In inch

Cm

Mm

Em can automatically adapt to the fonts used by users

Pt lb (1 pt equals 1/72 inch)

Pcs' active words (1 pc equals 12 points)

Pixel (a point on the computer screen)

(Color name) color name (such as red)

Rgb (x, x, x) RGB values (for example, rgb (255, 0, 0 ))

Rgb (x %, x %, x %) RGB percentage value (for example, rgb (100%, 0%, 0% ))

# Rrggbb hexadecimal number (for example, # ff0000)

 

4. Import CSS

The most commonly used external and internal Style Sheets

1. Internal Style Sheets

Add the style label to the head label, and then modify the style of Multiple labels in the label body of the style.

For example:

<Style type = "text/css">

Div {

Border: 1px dashed # ff00ff;

}

</Style>

2. External Style Sheets

Import the mystyle.css file through the link label in the headtag

For example:

<Link rel = "stylesheet" href = "myStyle.css" type = "text/css">

You can also add the style attribute to the label to write the style.

 

V. CSS attributes

1. Font

Css font attributes define the font family, size, bold, style (such as italic), and deformation (such as small uppercase letters) of the text)

Common attributes:

Font: Short attribute, which is used to set all font attributes in a declaration.

Format: {font: font family of styles with different width and size/line spacing font}

Example: {font: italic bold 12px/20px arial, sans-serif}

Font-family: defines the font family

• Name of a specific font, for example, font-family:.

• General font family names: for example, font-family: "serif", "sans-serif", "cursive", "fantasy", "monospace"

"," Means that if the font family does not exist locally, use the next

Font-size: defines the font size, for example, font-size: 40px

Font-style: defines the font style, such as font-style: italic

2. Text

CSS text attributes can define the appearance of text. By using text attributes, you can change the text color, Character spacing, align the text, decorate the text, indent the text, and so on.

Common attributes

Color: defines the text color, for example, color: # ffff00

Text-align: defines text align, for example, text-align: center

Text-decoration adds modifier to text. For example, text-decoration: underline (underline)

Letter-spacing: defines the character Interval

Word-spacing: defines the word Interval

3. Background

CSS allows the application of solid colors as the background, and allows the use of background images to create quite complex effects. CSS is far above HTML.

Common attributes:

Background: abbreviated attribute. It is used to set the background attribute in a declaration.

Format: {background: Color url (image path) repeated scroll position}

Example: {background: #00FF00 url(bgimage.gif) no-repeat fixed top}

 

Background-color: defines the background color.

Background-image: defines the background image background-image: url(xx.jpg)

Background-position: defines the start position of the background image. background-position: 10% 5%;

Background-repeat: defines whether or not the background image is repeated and how to repeat background-repeat: no-repeat

4. Dimensions

The CSS Dimension attribute allows you to control the height and width of an element.

Common attributes:

Width: Set the width of the element.

Height: sets the height of an element.

5. List

The CSS list attribute allows you to place or change the list item flag, or use an image as the list item flag.

Common attributes:

List-style: Short for attribute. Set all attributes used for the list to a declaration.

Format: {list-style: Image type position}

Example: {list-style: url(liebiao.jpg) square inside}

List-style-type: defines the type of the list item flag.

List-style-position: defines the position of the list item flag. Common Values: inside and outside.

List-style-image: defines the list item flag as an image

6. Table

CSS table attributes help you greatly improve the appearance of a table.

Common attributes:

Border-collapse: defines whether to merge the table border into a single border. Common Values: collapse and separate

Border-spacing: defines the distance between cell borders.

Caption-side: Define the location of the table title. Common Values: top and bottom.

7. Contour

An outline is a line drawn around an element. It is located at the periphery of the border edge and can highlight an element.

The CSS outline attribute specifies the style, color, and width of the element outline.

Common attributes:

Outline: Set all profile attributes in a declaration.

Format: {outline: Color Style width}

Example: {outline: #00FF00 dotted thick ;}

Outline-style: common values used to define the style of a contour: solid (solid line), dashed (dotted line), double (double line )...

Outline-color: defines the color of the contour.

Outline-width: defines the width of a contour. Common Values: thin, thick, 14px...

8. Positioning

The Positioning attribute allows you to locate elements.

The basic idea of positioning is very simple. It allows you to define the position where the element box should appear relative to its normal location, or the position relative to the parent element, another element, or even the browser window itself.

Common attributes:

Position: place elements in a static, relative, absolute, or fixed position.

Absolute: absolute relative to parent Element

Relative: relative to the location where you should appear

Fixed: relative to the browser

Top: defines the offset between the top margin boundary of the positioning element and the top boundary of the contained block.

Right: defines the offset between the right margin boundary of the positioning element and the right boundary of the contained block.

Left: defines the offset between the left margin boundary of the positioning element and the left boundary of the contained block.

Bottom: defines the offset between the bottom margin boundary of the positioning element and the bottom boundary of the contained block.

9. Category

The CSS classification attribute allows you to control how to display elements, set where the image is displayed in another element, locate the element relative to its normal position, and use the absolute value to locate the element and the element visibility.

Common attributes

Float: defines the direction in which the element floats.

Clear: sets whether the side of an element allows other floating elements.

Cursor: the pointer type displayed when it points to an element.

Display: defines whether to display and how to display common element values none and inline disappear

Visibility: defines whether an element is visible or invisible. Common values hidden and visible placeholder hide

 

Mountains don't reject the micro-Earth into the sky, the water does not choose the fine flow will eventually surge!

The css pseudo class is used to add special effects to certain selectors.

Next we will introduce the pseudo-anchor class.

In browsers that support css, different links can be displayed in different states, including activity, accessed, inaccessible, and hovering.

 

a:link{Color: # FF0000}/* unaccessed link */

a:visited{Color: #00FF00}/* accessed link */

a:hover{Color: # FF00FF}/* move the cursor over the link */

a:active{Color: # 0000FF}/* selected link */

Note:

In CSS definition, a: hover must be placed after a: link and a: visited.

In the CSS definition of u, a: active must be placed after a: hover, which is valid.

U pseudo-class names are not case sensitive.