Web Front-end learning notes (2) -- Selection Operator in CSS

Note: I recently sorted out the hard drive and found several notes I recorded when I learned Web Front-end technology. I think it is quite valuable, so I plan to sort them out one after another.

Well, before talking about it, I would like to share with you a piece of the past to remind myself and everyone to grasp the knowledge points accurately. That was one year I went to my internship. When I took a company's written test, I had a question about which selectors CSS had. No one knows how to learn CSS # id_1 {},. class_1 {} these things, but I am sad and sad, I don't know that these things have a name called selector (selector )! Therefore, the final result is unnecessary. Everyone despise me. However, I would like to remind you that it is important to remember some terms. never make such a stupid mistake. Well, the book goes to the beginning. below is the content of the notes.

1. Basic CSS syntax

CSS format: Selector {rule ;}
CSS rule composition: attribute: Value

2. Notes for using CSS
(1) The UTF-8 should be used to encode the CSS file.
(2) The CSS code should be in lower case. [Note: in fact, the separator is case-sensitive, and the attribute and value are case-insensitive. However, the Selection Characters of CSS in HTML are case-insensitive, but only those in XHTML .]
(3) The element name, class, and Id can only consist of letters, numbers, and underscores, hyphens, and other Unicode characters. The first character cannot be a number or a hyphen. The class name and ID cannot contain punctuation marks other than underscores and hyphens.
(4) Multiple class names can be separated by spaces to assign multiple classes to elements, such as class = "class1 class2 class3 ".
(5) constant values do not use quotation marks.
(6) backslash (\) can be used to Embed characters in some areas where they cannot be directly displayed.
(7) A string can contain parentheses, commas, spaces, single quotes, and double quotation marks, but must be escaped with a backslash.
(8) A semicolon is used to terminate CSS rules and @ import statements.
(9) A rule set contains multiple rules in braces.
(10) CSS Comments start with "/*" and end with "*/" and cannot be nested.

3. The priority of the CSS selector (the lowest to the highest priority)

Wildcard character
Element Selector
Class, attribute, and pseudo-class selector
Id Selector
! Important configuration selection character
! Important element Selector
! Important class, attribute, and pseudo-class selector

! Importantid Selector

4. Border attributes of CSS

(1) Border style attributes (border-style)

This attribute is used to set the style of the top, bottom, and left borders. Its value is as follows:

None (no border, no matter how large the Border width is)

Dotted (Dot-line Border)

Dashed (broken line Border)

Solid (straight-line Border)

Double (double-line Border)

Groove (groove Border)

Ridge (spine Border)

Inset (border with embedded effects)

Outset (border of the protruding effect)

(2) Border Width attribute (border-width)

This attribute is used to set the width of the top, bottom, and left borders. Its value is as follows:

Medium (default)

Thin (finer than medium)

Thick (thicker than medium)

Length unit value. You can use absolute length units (CM, mm, in, PT, PC) or relative length units (EM, ex, PX ).

(3) border color attribute (border-color)

This attribute is used to set the color of the top, bottom, and left borders.

(4) Border attributes (Border)

This attribute is a quick and comprehensive method of border attributes, including border-width, border-style, and border-color. Example:

. D1 {border: 5px solid gray ;}

(5) attributes of a single border

The top, bottom, and left borders can be set in a uniform way or separately.

Set the upper border attributes. You can use border-top, border-top-width, border-top-style, and border-top-color.

Set the bottom border attributes. You can use border-bottom, border-bottom-width, border-bottom-style, and border-bottom-color.

Set the Left Border attribute. You can use border-left, border-left-width, border-left-style, and border-left-color.

Set the upper border attributes. You can use border-right, border-right-width, border-right-style, and border-right-color.