Shulou(Shulou.com)06/01 Report--

This article is about what styles and attributes are commonly used in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS style sheet:

Purpose: sets how HTML tags are displayed

Grammatical structure:

The first kind: selector {

Style property declaration

} description: the CSS stylesheet in this way consists of a selector and one or more declarations; this stylesheet can only be defined in style tags or css files, 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 stylesheet in this way consists of only one or more declarations; this stylesheet can only be defined in style tag attributes; each tag in an HTML document has a style tag attribute

Regardless of which method is used to define an CSS stylesheet, the style attribute declaration in the stylesheet consists of a style attribute (a non-tag attribute, that is, a style attribute cannot be used directly in a tag) and a style attribute value, separated by a colon from the style attribute value, and separated by a semicolon between the declarations

Note: 1. If a style property has more than one style property value, the style property values are separated by commas

two。 In CSS, style attributes and their style property values are case-insensitive, and spaces are not ignored

3. If the attribute value consists of multiple words, it is recommended to enclose it in single quotation marks

Selector:

Tag selector: the tag selector takes the tag name defined in the HTML document as the selector name, and its syntax is as follows:

Label signature {

Style attribute declaration 1 position.}

Target: all tags in the HTML document that have the same signature as the tag selector name will be affected

Class selector: the class selector takes the property value of the class tag attribute in the tag as the selector name, and its syntax is as follows:

The attribute value of the .class tag attribute {

Style attribute declaration 1 position.}

Action object: the attribute value of the class tag attribute and the class selector. The same tags are affected. Note: the class tag attribute cannot start with a number.

Id selector: the id selector takes the property value of the id tag attribute in the tag as the selector name, and its syntax is as follows:

# attribute value {of the id tag attribute

Style attribute declaration 1 position.}

Action object: only tags that have the same attribute value of the id tag attribute as the id selector # are affected. Note: the attribute value of the id tag attribute cannot start with a number; the attribute value of the id tag attribute must be unique in the HTML document, and the attribute value of the class tag attribute may not be unique.

Descendant selector:

Syntax: parent selector 1 child parent selector 2 child parent selector 3. Descendant selector {

Style attribute declaration 1 position.

}

Note: space between selectors

Grouping selector: if the partial styles in multiple CSS stylesheets of an HTML document are the same, you can simplify the CSS style code by defining a grouping selector whose selector name consists of multiple selectors, separated by commas, and its syntax is as follows:

Selector 1, selector 2, selector 3. {

Style attribute declaration;.}

Wildcard selector: a wildcard selector is equivalent to a grouping selector that lists all the tags in an HTML document. The syntax is as follows:

* {

Style attribute declaration 1 position.}

How to use CSS style

There are three ways to insert CSS styles in HTML: external style sheets, internal style sheets, and inline styles

External stylesheets: when some tags in multiple HTML documents have the same style rules, in order to reuse these stylesheets and to facilitate the management of style 1 tables, the CSS style is written in the css style file and the css file is introduced into the HTML document with link tags

Add: the link tag is also used to set the small icon and syntax structure of the HTML document header:

Internal stylesheets: when styles in one HTML document are not common in other HTML documents, but multiple tags in this HTML document have the same style, in order to reuse these style rules and to facilitate the management of style rules, CSS styles need to be written directly in the style tags of the HTML document

Inline style: when a tag style in an HTML document is different from other tag styles or when the tag style in the document is not consistent with the parent tag style, the CSS style is written in the attribute value of the style tag attribute of a tag in the HTML document.

CSS style priority

Selector priority: id selector > class selector > tag selector, and selector priority does not consider the order of selectors.

Style insertion priority: if you insert CSS styles in the usual order (that is, insert external stylesheets using link, then insert internal stylesheets using style tags, and finally insert inline styles in style tag attributes), the priority is inline styles > internal style sheets > external style sheets.

Common CSS style attributes

Border style Properti

Border-width attribute: used to set widths for all borders of an element or individually for individual borders

Note: if you do not set the border-style property or set it to the value of the none or hidden property, the border-width property will not work and the border width will actually be reset to 0

Border-style attribute: used to style all borders of an element, or individually for each edge, which has multiple values (none default value, which defines no borders; hidden is the same as none; dotted defines dotted borders; dashed defines dashed lines; solid defines solid lines).

Note: can only appear if the value is not none or hidden

Border-color attribute: used to set the color of all borders of an element or to set different colors for four borders

Note: before declaring the border-style attribute to the border-color attribute, the element needs to get the border before changing its color

Border shorthand properties:

Note: 1. To set the width, style, and color of the border to a declaration, you need to set it in the order of width, style, and color, allowing you not to set one of these values.

two。 When you use border to set border properties, border-width,border-style,border-color can only have one value

Border:2pxsolidgreenyellow;border-bottom:2pxsolidorange

Outline style attribute: the contour line draws a line at the edge of the label border, which does not occupy space and is not necessarily a rectangle. It mainly plays the role of highlighting the label.

Outline-color style attribute: sets the color of the contour line. When using this style attribute, you must set the property value of the outline-style style attribute to none, otherwise you will not see the effect.

Outlin-style style attribute: sets the style of the contour line, which has multiple values (none default value, defines no outline; dotted defines point outline; dashed defines dashed outline; solid defines solid outline)

Outline-width style attribute: sets the width of the contour line. When using this style attribute, you must set the property value of the outline-style style property not to none, otherwise you will not see the effect (if outline-style is none, the width will actually be reset to 0)

Outlilne style attribute: used to set all contour line style attributes (that is, color, style, width) in a declaration, and when setting property values, it is not necessary to set the property values corresponding to all contour line style attributes, but they need to be arranged in the order of outline-color,outline-style,outline-width, separated by spaces.

Content overflow style properties:

Overflow style attribute: when the content in the tag overflows the tag, it is used to set how to handle the overflowed content. This attribute has multiple values: visible default value, the spillover content will not be trimmed and will appear outside the element box; scroll overflow content will be trimmed, but the browser will display a scroll bar to view the rest of the content; if the spillover content in auto is trimmed, the browser will display a scroll bar to view the rest of the content.

Overflow-x style attribute: when the content in the tag overflows in the x direction, it is used to set how to handle the spilled content

Overflow-y style attribute: when the content in the tag overflows in the y direction, it is used to set how to handle the spilled content

Background style

Background-color style property: sets the background color of the label. The background color set by the style property fills the content of the background, the inner margin and the border area, extending to the outer boundary of the label border, but excluding the outer margin.

Background-image style attribute: sets the label background image, which has multiple attribute values: url ('URL') points to the path to the picture; none default value, does not display the background picture

Background-repeat style attribute: sets the repeat mode of the label background picture, which has multiple attribute values: repeat default, the background picture will be repeated horizontally and vertically; the repeat-x background picture will be repeated horizontally; the repeat-y background picture will be repeated vertically; the no-repeat background picture will be displayed only once

Background-attachment style attribute: sets whether the label background image follows the

Scrolling through the rest of the page, the style property has multiple property values: scrolldefault, the background picture scrolls as the rest of the page scrolls; fixed, when the rest of the page scrolls, the background picture does not move

Background-position style attribute: with the location of the tag background picture

Background-size style attribute: set the size of a single background picture, the first value sets the width, the second value sets the height, if only one value is set, the second value will be set to auto

Background style attribute: used to set all background style properties in one declaration, and the property values set by this style property do not need to set the property values corresponding to all background style attributes, and the set property values are not required in order.

Font style

Font-style style attribute: sets the font style (normal default value, displays standard font style; italic displays italic font style)

Font-variant style attribute: sets whether text is displayed in small uppercase fonts (normal default, displays standard fonts; small-caps displays small uppercase fonts)

Font-weight style properties: set font weight (normal default value, define standard characters; bold defines bold characters; bolder defines thicker characters; lighter defines finer characters; value px is set directly)

Font-size style properties: setting font siz

Font-family style properties: set the font family, separate each font with commas, and try the second font if the browser does not support the first font; if all fonts in the font family are not supported, use the font supported by the browser by default

Font style property: used to set all font style properties in a declaration, and when setting property values, you do not need to set the property values for all font style properties, but they need to be arranged in the order of font-style, font-variant, font-weight, font-size/line-height and font-family, separated by spaces.

Note: 1.font style properties should specify at least font size and font family

two。 There is no font-color style property. If you want to set the color of the font, you need to use the color style property.

Text style

Letter-spacing style attribute: set the character spacing. The value of the style property can be negative, but it is more crowded between characters.

Line-height style attribute: sets line spacing (that is, line height) and cannot be negative

Text-align style attribute: sets the horizontal alignment of the text within the tag, which has several values: left arranges the text to the left; right arranges the text to the right; center puts the text in the middle; justify implements the text alignment effect at both ends.

Text-transform style property: sets the case of the text, which has multiple values: the none default value, which defines standard text with lowercase and uppercase letters; the first letter of each word in capitalize text is capitalized; the uppercase definition has uppercase letters only; the lowercase definition has lowercase letters only.

Text-indent style attribute: sets the indentation of the first line of text in the text block. If the style attribute value is negative, the first line will be indented to the left.

Text-decoration style attribute: sets the text decoration (such as whether there is an underscore and where the underline is displayed). This property has several values: none default value, which defines standard text; underline defines a line under the text; overline defines a line on the text; line-through defines a line through the text.

List style

List-style-type style property: sets the type of list item tag

List-style-position style attribute: sets the position of the list item tag relative to the list item content, which has multiple values: the inside list item tag is placed within the text; the outside default value keeps the tag on the left side of the text, and the list item tag is placed outside the text

List-style-image style attribute: sets the list item tag to the specified picture

List-style style attribute: used to set all list style properties in a declaration. When setting property values, this style property does not need to set the property values corresponding to all list style properties, but needs to be arranged in the order of list-style-type, list-style-position and list-style-image, separated by spaces.

Hyperlink styl

CSS pseudo-classes are used to add special effects to some selectors, and pseudo-classes use syntax:

Selector: pseudo class {

Style attribute declaration 1 position.}

The pseudo-columns commonly used in CSS are as follows:

Link adds styles to links that are not accessed

Visited adds styles to links that have been visited

Hover adds a style to the label when the mouse hovers over it

Active adds a style to the active label

Focus adds styles to tags that have keyboard input focus

Note: if: link,:visited,:hover and: active are used together, in order to produce the desired effect, the CSS definition should be carried out in the order of: link,: visited,:hover,:active.

Cursor style Properti

The cursor style property is used to set the display shape of the cursor, which has multiple property values, where pointer makes the cursor appear as a pointer indicating a link

Thank you for reading! This is the end of this article on "what styles and attributes are commonly used in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.