Summary of common styles in CSS and summary of properties commonly used in CSS

This article brings you to the content of CSS commonly used in the summary of the style and CSS commonly used in the summary of properties, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

CSS style sheet:

Function: Set How HTML tags are displayed
Syntax structure:

The first type: selector {
style attribute declaration;
Description: A CSS style sheet in this way consists of a selector and one or more two parts of the declaration, which can only be defined in a style label or CSS file, and each style tag or CSS file can define multiple stylesheets
The second type: style= "style attribute declaration 1; style attribute declaration 2; ..." description: A CSS style sheet in this way consists of only one or more declarations; The style sheet can only be defined in the style label property; Each label in an HTML document has a style label property

Regardless of the way the CSS style sheet is defined, the Style property declaration in the style sheet consists of a style attribute (non-label property, which is not used when the label property is directly in the label) and a style property value, and the style attribute and style attribute values are separated by colons;

Note: 1. If a style attribute has more than one style property value, the Style property value is separated by commas
2. style attributes and their style property values in CSS are not case sensitive and spaces are not ignored
3. If the attribute value consists of multiple words, it is recommended to use single quotation marks

Selector:

Tag Selector : the tag Selector is named as the selector name as defined in the HTML document, with the following syntax:

Label name {
Style property declaration 1;...}

Action object: All tags with the same signature as the tag Selector name in the HTML document will be affected
class Selector: The class selector takes the property value of the class tag attribute in the label as the selector name, with the following syntax:

Property value of. Class tag property{
Style property declaration 1;...}

Action object: The property value of the class Tag property and the class selector. After the same label is affected, Note: Class Tag properties cannot start with a number
ID Selector : The ID selector is a selector name in the Tag property of the ID tag attribute, and its syntax is as follows:

#Attribute value of ID tag attribute{
Style property declaration 1;...}

Action object: Only the ID tag attribute has the same label as the ID selector # after the property value is affected. Note: The attribute value of the ID Tag property cannot begin with a number; the attribute value of the ID Tag property must be unique in the HTML document, and the property value of the class Tag property can be not unique
Descendant selector:

Syntax: parent selector 1 child parent selector 2 child parent selector 3... Child selector{
Style property declaration 1
} 

Note: spacing between selectors
Group selector: If the HTML document has some of the same styles in multiple CSS style sheets, you can simplify the CSS style code by defining a grouping selector, which consists of multiple selectors, separated by commas, with the following syntax:

Selector 1, selector 2, selector 3 ... {    style attribute declaration;    ...}

Wildcard selector: the wildcard selector is equivalent to a group selector that lists all the tags in an HTML document, with the following syntax:

*{    style attribute declaration 1;    ...}

How to use CSS styles

There are three ways to insert CSS styles in HTML: external style sheets, internal style sheets, inline styles
external style sheet: when the style rules for some tags in multiple HTML documents are the same, in order to reuse these stylesheets, and also to manage style 1 tables, CSS styles are written in CSS style files, which are loaded with the link tag to bring the CSS file into the HTML document
Add: The link tag is also used to set the HTML document Head Small icon, syntax structure:< link rel= "shortcut icon" type= "Image/x-icon" href= "Picture path"/>

internal style sheet: when a style in an HTML document does not have commonalities in other HTML documents, but the styles of multiple labels in this HTML document are the same, in order to reuse these style rules and to facilitate the management of style rules, You need to write the CSS style directly within the style tag of the HTML document

inline style: when one of the label styles in an HTM L document differs from other label styles or the label style in the document is not uniform with the parent label style, the CSS style is written in the property value of the style label property of a tag in the HTML document

CSS style Precedence

Selector priority: ID Selector > class selector > tag Selector, and selector precedence regardless of selector order

Style Insert priority: priority inline style > Inner style sheet if you insert a CSS style in the usual order (that is, you use link for inserting an external style sheet, then use the style tag to insert the inner style sheet, and then insert the inline style in the Style label property) > External style Sheets

Common CSS style properties

Border Style properties
Border-width Property: used to set the width for all borders of an element or to set the width individually for each edge border
Note: If you do not set the Border-style property or set it to the None or hidden property value, the Border-width property does not work, and the border width is actually reset to 0
Border-style Property: A style used to set all borders of an element, or to individually set border styles for each edge, which has multiple values (none default, no border defined; Hidden is the same as none; dotted defines a point border ; dashed defines a dashed line; solid defines solid lines)
Note: Only occurs when the value is not none or hidden
Border-color Property: used to set the color of all borders of an element or to set a different color for four borders
Note: Before declaring the Border-style property to the Border-color property, the element must first obtain a border and then change its color
Border Shorthand properties:
Note: 1. Set the width, style, and color of the border to a declaration, which must be set in the order of width, style, and color, allowing one of the values not to be set
2. When you use border to set border properties, the value of Border-width,border-style,border-color can only take one

BORDER:2PX solid greenyellow;border-bottom:2px solid orange;

Contour Style properties: contour lines draw a line at the edge of the label border, which does not occupy space or is not necessarily a rectangle, and is primarily a function of highlighting the label
Outline-color Style Properties: Sets the color of the contour line, which must be set when the property value of the Outline-style style property cannot be none, or the effect is not visible
Outlin-style Style Properties: Sets the style of the contour line, which has multiple values (none default, defines no contour, dotted defines a point contour; dashed defines a dashed outline; solid defines a solid outline)
outline-width Style Properties: Sets the width of the contour line, which must be set when the property value of the Outline-style style property cannot be none, or the effect is not visible (if Outline-style is None, The width is actually reset to 0)
Outlilne style properties: used to set all contour style properties (that is, color, style, width) in a declaration, and the style property does not need to set property values for all contour style properties when setting property values, but according to Outline-color, Outline-style,outline-width are arranged in the order of the middle, separated by a space

content Overflow style properties:
Overflow style properties: when the contents of a label overflow the label, it is used to set how to handle the overflow content, which has multiple values: the visible default value, the overflow content is not trimmed, it is rendered outside the element box, and the overflow content of the scroll is trimmed. However, the browser displays scroll bars to view the rest of the content; If the overflow content is trimmed, the browser displays a scrollbar to view the rest of the content
overflow-x style properties: used to set what to do with overflow when the contents of the label are in the X Direction overflow label
overflow-y style properties: used to set what to do with overflow when the contents of the label are in the y direction of the overflow label

background style
background-color style properties: sets the background color of the label, the background color of the style property is populated with the contents of the background, the padding and border areas, Extends to the outer bounds of the label border, but does not include the margin
background-image Style Property: sets the label background picture, which has multiple property values: url (' URL ') to the path to the picture; Do not display a background picture
background-repeat style properties: set label background picture repeating mode, which has multiple property values: Repeat default, background picture will repeat horizontally and vertically Repeat-x background image will repeat horizontally; repeat-y background image will repeat vertically; no-repeat background image will only be displayed once
background-attachment style properties: Sets whether the label background picture Scrolls as the rest of the
page scrolls, and the style property has multiple property values: Scroll default, the background picture scrolls as the rest of the page scrolls, and the background picture does not move when the rest of the page scrolls
Background-position style properties: with the position of the label background picture
background-size style properties: Sets the size of the single background picture, the first value sets the width, The second value sets the height, and if you set only one value, the second value is set to the auto
background style property: is used to set all the background style properties in a declaration, and the Style property sets the property value without having to set the property values for all background style properties and the property values set are not ordered by the

font style
font-style style properties: set font style (normal default, display standard font style, italic display italic font style)
font-variant Style Properties: Sets whether text is displayed in a small capital letter font (normal default, the standard font is displayed; small-caps displays the font for small caps)
Font-weight Style Properties: Sets the weight of the font (normal default, defines the standard character; Bold defines a bolded character; bolder defines a more coarse character; lighter defines finer characters; value px is set directly)
font-size Style properties: set Font size
font-family style properties: set font family, separate each font with commas, If the browser does not support the first font, the second font is tried, and if all fonts in the font family are not supported, use the font
font style property, which is the default supported by the browser: to set all the font style properties in a declaration, You do not need to set property values for all font style properties when setting property values for this style property, but you need to follow Font-style, font-variant, Font-weight, font-size/ Line-height and font-family are arranged sequentially, separated by spaces.
Note: The 1.font style attribute must specify at least the font size and font family;
2. There is no Font-color style property, and if you want to set the color of the font you need to use color style properties;

Text Style
letter-spacing style properties: set character spacing, style property values can be negative, but then the characters are more crowded
Line-height style properties: Set line spacing (row height), cannot be negative
text-align style properties: Sets the horizontal alignment of text within the label, There are multiple values for this property: Left to line the text to the right; Center to arrange text in the middle; justify to achieve the justification of both ends
text-transform style properties: Sets the case of the text, which has multiple values: None default, defines the standard text with lowercase letters and uppercase letters, the first letter of each word in the capitalize text, and uppercase defines only uppercase letters; lowercase defines only lowercase characters
text-indent Style Properties: Sets the indentation for the first line of text in a block, and if the Style property value is negative, the first row is indented to the left
text-decoration style properties: Sets the text decoration (such as whether there is an underscore and the position of the underline), which has multiple values: None default, defines the standard text, underline defines a line under the text, Overline defines a line on the text, Line-through defines a line that crosses the text

List Style
List-style-type Style Properties: Sets the type of the list item marker
list-style-position Style Properties: Sets the position of the list item tag relative to the contents of the list item, which has multiple values: The inside list item tag is placed within the text, the outside default value, and the hold tag is on the left side of the text. List item markers are placed outside of text
List-style-image Style properties: Set the list item marker to the specified picture
List-style style properties: used to set all of the list style properties in a declaration, and the style property does not need to set property values for all list style properties when setting property values, but needs to follow List-style-type, List-style-position and List-style-image are arranged in sequence, separated by spaces

Hyperlink Style
CSS pseudo-classes are used to add special effects to certain selectors, using syntax for pseudo-classes:

Selector: Pseudo-class {    style attribute declaration 1;    ...}

The following pseudo-columns are commonly used in CSS:
: Link adds a style to a link that has not been visited
: Visited adds a style to a link that has been visited
: Hover Adds a style to a label when the mouse hovers over the label
: Active adds style to the active tag
: Focus adds style to labels that have keyboard input focus
Note: if: Link,:visited,:hover and: Active are used together, in order to produce the desired effect, in the CSS definition in the following: link,: visited,:hover,:active order

cursor Style properties
The cursor style property is used to set the cursor's display shape, which has multiple property values, where pointer renders the cursor as a pointer to a link.