Common css attribute Methods: Part 1: css attribute Methods

Common css attribute Methods: Part 1: css attribute Methods
I switched from the java background to the front-end by myself, so I will not write some simple css + html at ordinary times. I will list some of the attributes that are commonly used by beginners and will be updated continuously, this is a reference for beginners! Especially self-taught front-end like me. Background Association background-attachment attribute body {background-image: url (/I/eg_bg_02.gif); background-repeat: no-repeat;} CSS background attribute

Attribute	Description
Background	This attribute is short for setting the background attribute in a declaration.
Background-attachment	Whether the background image is fixed or scrolled with the rest of the page.
Background-color	Set the background color of the element.
Background-image	Set the image as the background.
Background-position	Set the start position of the background image.
Background-repeat

Indent text-indent attribute prohibit text wrap: p {white-space: nowrap} word interval word-spacing attribute p. spread {word-spacing: 30px;} p. tight {word-spacing:-0.5em;} <p class = "spread"> This is a paragraph. the spaces between words will be increased. </p> <p class = "tight"> This is a paragraph. the spaces between words will be decreased. </p> CSS list attributes (list)

Attribute	Description
List-style	Attribute. Set all attributes used for the list to a declaration.
List-style-image	Set the image as a list item flag.
List-style-position	Set the position of the list item flag in the list.
List-style-type	Set the type of the list item flag.

, You can use the attribute list-style-type

Value	Description
None	Not marked.
Disc	Default value. Mark as a solid circle.
Circle	Mark as hollow circle.
Square	Mark as a solid square.
Decimal	Mark as a number.
Decimal-leading-zero	A numeric marker starting with 0. (01, 02, 03, etc .)
Lower-roman	Lowercase roman numerals (I, ii, iii, iv, v, etc .)
Upper-roman	Uppercase roman numerals (I, II, III, IV, V, etc .)
Lower-alpha	Lowercase English letter The marker is lower-alpha (a, B, c, d, e, etc .)
Upper-alpha	Uppercase English letter The marker is upper-alpha (A, B, C, D, E, etc .)
Lower-greek	Lowercase Greek letters (alpha, beta, gamma, etc .)
Lower-latin	Lowercase Latin letters (a, B, c, d, e, etc .)
Upper-latin	Uppercase Latin letters (A, B, C, D, E, etc .)
Hebrew	Traditional Hebrew numbering method
Armenian	Traditional Armenia numbering method
Georgian	Traditional Georgia numbering methods (an, ban, gan, etc .)
Cjk-ideographic	Simple ideographic numbers
Hiragana	MARK: a, I, u, e, o, ka, ki, etc. (Japanese Katakana)
Katakana	MARK: A, I, U, E, O, KA, KI, etc. (Japanese Katakana)
Hiragana-iroha	MARK: I, ro, ha, ni, ho, he, to, etc. (Japanese Katakana)
Katakana-iroha	MARK: I, RO, HA, NI, HO, HE, TO, etc. (Japanese Katakana)

1. If border needs to display the two duplicate borders as single borders, use table {border-collapse: collapse;} table, th, td {border: 1px solid black ;} CSS Table attributes

Attribute	Description
Border-collapse	Set whether to merge the table border into a single border.
Border-spacing	Sets the distance between the borders of the cells to be separated.
Caption-side	Set the table title position.
Empty-cells	Set whether to display empty cells in the table.
Table-layout	Sets algorithms for display units, rows, and columns.

CSS border attributes

Attribute	Description	CSS
Outline	Set all profile attributes in a declaration.	2
Outline-color	Set the outline color.	2
Outline-style	Set the style of the outline.	2
Outline-width	Set the width of the contour.	2

Attribute	Description
Position	Place elements in a static, relative, absolute, or fixed position.
Top	Defines the offset between the upper and outer margin boundary of a positioning element and the upper 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.
Bottom	Defines the offset between the bottom margin boundary of the positioning element and the bottom 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.
Overflow	Set the event that occurs when the content of an element overflows its region.
Clip	Set the element shape. The element is cut into this shape and displayed.
Vertical-align	Sets the vertical alignment of elements.
Z-index

Staticrelativeabsolutefixed prompt: overflow: scroll; a scroll mechanism is displayed regardless of whether the content in the box is placed or not; set the element shape: clip: rect (0px 50px 200px 0px); overlap: z-index CSS selector Reference Manual

Selector	Description
[Attribute]	Used to select elements with specified attributes.
[Attribute = value]	Used to select elements with specified attributes and values.
[Attribute ~ = Value]	Used to select elements whose attribute values contain the specified vocabulary.
[Attribute | = value]	Used to select an element with an attribute value starting with a specified value. The value must be the entire word.
[Attribute ^ = value]	Matches each element whose attribute value starts with a specified value.
[Attribute $ = value]	Matches each element whose attribute values end with a specified value.
[Attribute * = value]	The matching property value contains each element of the specified value.

To set the text of HTML hyperlinks with both href and title attributes to red, you can write a [href] [title] {color: red;} to select Example 1 based on the specific attribute values.

Attribute	Description	CSS
: Active	Add a style to the activated element.	1
: Focus	Add a style to an element with the keyboard focus.	2
: Hover	When you move the cursor over an element, add a style to the element.	1
: Link	Add a style to an inaccessible link.	1
: Visited	Add a style to the accessed link.	1
: First-child	Add a style to the first child element of an element.	2
: Lang	Adds a style to an element with the specified lang attribute.	2

Note: