[Original] CSS attribute collection

CSS attributes

1. Font attributes

This is the most basic attribute that you will often use. It mainly includes the following attributes:

Attribute	Attribute meaning	Attribute Value
Font-family	Font used	All fonts
Font-style	Whether italics are used	Normal, italic, oblique
Font-variant	Whether to use uppercase letters or not	Normal, small-caps
Font-weight	Font width	Normal, bold, bolder, lithter, etc.
Font-size	Font Size	Absolute-size, relative-size, length, percentage, etc.

Example:

<P style = "font-style: oblique; font-weight: bold; font-size: 24pt; font-variant: Small-Caps"> ABC </P>

2. Color and background attributes

Attribute	Attribute meaning	Attribute writing format	Attribute Value
Color	Define foreground View	{Color: Red}	Color
Background-color	Define background color	{Background-color: yellow}	Color
Background-Image	Define background pattern	{Background-image: URL (*. jpg )}	Image path
Background-repeat	Duplicate background pattern	{Background-repeat: Repeat-y}	Repeat-X, repeat-y, no-repeat
Background-Attachment	Set scroll	{Background-Attachment: Scroll}	Scroll, fixed
Background-Position	Initial Position of the background pattern	{Background-position: Top center}	Percentage, length, top, left, right, bottom

3. Text attributes

Attribute	Attribute meaning	Attribute Value
Word-spacing	Defines the spacing between words.	Normal <length> (the Unit must be length)
Letter-spacing	Defines the spacing between letters	Same as above
Text-Decoration	Define text decoration styles	None | overline | underline | Line-through | blink
Vertical-align	Define the position of an element in the vertical direction	Baseline | sub | super | top | text-top | Middle | bottom | text-bottom <percentage>
Text-Transform	Convert text to other forms	Capitalize | uppercase | lowercase | none
Text-align	Define text alignment	Left | right | center | justify
Text-indent	Define the indentation of the first line of text	<Length> | <percentage>
Line-height	Define the line height of the text	Normal | <number >|< length >|< percentage>

Example:

<P style = "letter-Spacing: 1em; text-align: justify; text-indent: 4em; line-Height: 17pt"> ...... </P>

<Style>
<! --
// * Define pseudo-class elements (a :). The foreground and text decoration attributes are defined in braces,
The hover adds the 'font-size' attribute to change the font when the mouse activates the link *//
A: link {color: green; text-Decoration: None}
// * Status when the object is not accessed. The color is green and the value of the text-decoration attribute is
None )*//
A: visited {color: red; text-Decoration: None}
// * The accessed status. The color is red and the text decoration property value is none *//
A: hover {color: Blue; text-Decoration: overline; font-size: 20pt}
// * The mouse activation status. The color is blue and the text decoration property value is overline ),
The font size is 20pt *//
-->
</Style>
4. Container Properties

4.1 margin Property

Attribute	Attribute meaning	Attribute Value
Margin-top	Set Top margin	Length | percentage | auto
Margin-bottom	Set bottom margin	Same as above
Margin-left	Set the left margin	Same as above
Margin-Right	Set the right margin	Same as above

4.2 padding attribute

Attribute	Attribute meaning	Attribute Value
Padding-top	Set Top padding	Length | percentage
Padding-bottom	Set bottom padding	Same as above
Padding-left	Set left padding	Same as above
Padding-Right	Set padding on the right side	Same as above

Note: padding refers to the distance between the text border and text

4.3 border attributes

Attribute	Attribute meaning	Attribute Value
Border-top-Width	Set the top Border Width	Thin | medium | thick | length
Border-bottom-Width	Set Bottom Border Width	Same as above
Border-left-Width	Set the width of the left side border	Same as above
Border-right-Width	Set the Border width on the right	Same as above
Border-Width	Border width defined at a time	Same as above
Border-color	Set border color	Color
Border-style	Set border Style	None | dotted | dash | Solid | double | groove | ridge | inset | outset
Border-top	Define various top attributes at a time	Border-top-width | boder-style | color
Border-bottom	Define various properties at the bottom at a time	Same as above
Border-left	Define attributes on the left at a time	Same as above
Border-Right	Define various attributes on the right at a time	Same as above

4.4 text and text Mixing

Attribute	Attribute meaning	Attribute Value
Width	Define width attributes	Length | percentage | auto
Height	Define HEIGHT attributes	Length | auto
Float	Enclose text around an element	Left | right | none
Clear	Define whether a side contains surround text	Left | right | none | both

Example:

<! --
IMG {margin-Right: 2em; float: Left}
// * Define the right margin of the image as 2em, and the image floats on the left of the text *//
-->
</Style>

5. Hierarchical attributes

Attribute	Attribute meaning	Attribute Value
Display	Define whether to display	Block | inline | list-item | none
White-space	Determine how to process the blank part	Normal | pre | nowrap
List-style-type	Add the project number before the list item	Disc | circle | square | decimal | Lower-Roman | Upper-Roman | Lower-Alpha | Upper-Alpha | none
List-style-Image	Add a pattern to the list item	<URL> | none
List-style-Position	Determines the start position of the second item in the list.	Inside | outside
List-style	Define the previous list attributes at a time	<Keyword >|< position >|< URL>

Example:

<Style type = "text/CSS"> // * defines CSS *//
<! --
P {display: block; white-space: normal}
// * Define the display attribute as "Block", which means to display it in the new area; the attribute of white-space
Normal merges multiple white spaces into one *//
Em {display: inline}
// * Define the display attribute of EM as "inline" to keep rows in text display under its control *//
Li {display: List-item; List-style: square}
// * Define the display attribute of Li as "list-item", and add a symbolic mark to the list items.
The attribute value of list-style is defined as square to mark the items in the list as square *//
IMG {display: block} // * define the image attribute as block to enable the image in a new position *//
-->
</Style>

6. Mouse Properties

6. Mouse Properties

CSS is used to change the mouse attributes. When you move the mouse over different element objects, the mouse is displayed in different shapes and patterns. The "cursor" attribute is used for implementation. The attribute values are shown in the following table:

Attribute Value	Description
Auto	Change by default
Crosshair	Precise cross Positioning
Default	Default pointer
Hand	Hand shape
Move	Mobile
E-resize	Arrows toward the right
Ne-resize	Arrow toward top right
NW-resize	Arrow toward top left
N-resize	Arrow above
Se-resize	Arrow toward bottom right
Sw-resize	Arrow toward bottom left
S-resize	Arrow down
W-resize	Arrow toward left
Text	Text "I" Type
Wait	Wait
Help	Help