A preliminary exploration of HTML’s CSS (attributes)

CSS (Cascading Style Sheets)

CSS is a computer language used to express file styles such as HTML or XML. CSS can not only statically modify web pages, but can also cooperate with various scripting languages ​​to dynamically format web page elements.

CSS can perform pixel-precise control of the layout of element positions in web pages, supports almost all font size styles, and has the ability to edit web page objects and model styles.

CSS size attribute (Dimension)

height sets the element height
width sets the element width
max-height sets the maximum height of the element
max-width Set the maximum width of the element
min-height Set the minimum height of the element
min-width Set the minimum width of the element

CSS background property (Background)

background Set all background properties in one statement
background-color Set the background color of the element
background-image Set the background image of the element

background-position Set the position of the background image

top Top

right Right

left Left

center Middle

background-repeat Set the background How to repeat pictures

repeat Repeat all

repeat-x Repeat horizontally

repeat-y Repeat vertically

no-repeat No repeat
background -attachment Whether the background image scrolls as the page scrolls

CSS border properties (Border and Outline)

Properties

Description

border Set all border properties

border-bottom Set the bottom border

border-bottom-color Set the bottom border Color

border-botton-style Set the style of the lower border

border-botton-width Set the width of the lower border

border-color Set the color of the four borders

border-left Set the left border

border-left-color Set the color of the left border

border-left-style Set the style of the left border

border-left -width Set the width of the left border

border-right- Set the right border

border-right-color Set the color of the right border

border-right-style Set the right border Style

border-right-width Set the width of the right border

border-style Set the style of the four borders

solid The style is solid

double Double solid line (width is 1px, no effect is visible)

dottde Dotted line (appears as a solid line under IE6/7)

dashed Dotted line (appears as a solid line under IE6/7 )

border-top Set the top border

border-top-color Set the color of the top border

border-top-style Set the style of the top border

border-top-width Set the width of the top border

border-width Set the width of the four borders

outline Set all outline attributes

outline-color Set the color of the outline

outline-style Set the style of the outline

outline-width Set the width of the outline

border-bottom-left-radius Define the shape of the lower left corner of the border

border-bottom-right-radius Define the shape of the lower right corner of the border

border-top-left-radius Define the shape of the upper left corner of the border

border-top-right-radius Define the upper right corner of the border Shape

border-radius Shorthand property, set all four border-*-radius properties

border-image Shorthand property, set all border-image-* properties

border-image-outset Specifies the amount of the border image area beyond the border

border-image-repeat Whether the image should be repeated, rounded or stretched

border-image-slice Specifies the inward offset of the image border

border-image-width Specifies the width of the image border

border-image-source Specifies the image used as the border

box-shadow Add one or more shadows to the box

CSS Font attribute (Font)

Properties

Description

font Set all font properties

font-family Set the font family of the text

font-size Set the font size of the text

font-size-adjust Specify the aspect value for the element

font-stretch Shrink or stretch the current font family

font-style Set the font style of the text

font-variant Set the opening method of text in Chinese and English

font-weight Set the text thickness

text-align Set the alignment of text

center Center left Left alignment right Right alignment

letter-spacing Set text spacing

text-decorationSet text decoration line

none Mainly used to remove the underline of a tag

underline Underline

overline overline

line-through strikethrough

Note: If a child element is placed inside another element (parent element), set text- to the parent element decoration will find that the text-decoration of the child element cannot be cleared

Solution:
1. Use absolute positioning position: ansolute
2. Set float float

text-transform setting Case conversion

uppercase All words are in uppercase

lowercase All words are in lowercase

capitalize Capitalize the first letter

font-style Set text style

normal Normal

italic Italic

oblique Oblique text

font-variant Set the opening method of text in Chinese and English

nomal Normal

small-caos English programming is capitalized and displayed in small font size

CSS text attribute (Text)

Attribute

Description

##color Set the color of the text

direction Specify the direction/writing direction of the text

letter-spacing Set character spacing

line-height Set line height

text-align Specify the horizontal alignment of text

vertical-align Specify the vertical alignment of text

text-decoration Specifies the decorative effect added to the text

text-indent Specifies the indentation of the first line of text

tex-transform Controls the capitalization of text

unicode-bidi Set the text direction

white-space Specify how to handle the white space in the element

word-spacing Set the word spacing

CSS table property ( Table)

Properties

Description

border Set the border

border-color Set the border color

cellspacing Set the width of the table frame

cellpadding Set the distance between the data and the frame

background-color Set the background color of the table

background-url Settings Background image of the table

colspan Horizontal merging of cells

rowspan Vertical merging of cells

Four steps of merging cells

1. Determine the starting point of the cells Which cell starts to be merged

2. Determine whether the cells are merged vertically or horizontally 3. Determine how many cells need to be merged 4. Process the redundant cells

CSS list attribute (List)

Attribute

Description

list-style Set all in one statement The list attribute

list-style-image Sets the image as the list item mark

list-style-position Sets the placement position of the list item mark

inside Places the list style Into the content

outside By default, the list style is not in the content, usually in psdding

list-style-type Sets the type of list item mark

Composite writing method

list-style 1. Type 2. Position 3. Picture

Clear default style

padding: 0px;

margin:0px;

list-style:none;

CSS margin attribute (Margin)

Property

Description

margin Set all margin properties in one statement

margin-top Set the top margin of the element

margin-right Set the right margin of the element

margin-bottom Set the bottom margin of the element

margin-left Set the left margin of the element

CSS inner margin property (Padding)

Attribute

Description

padding Set all padding properties in one statement

padding-top Set the top padding of the element

padding-right Set the right padding of the element

padding-bottom Set the bottom padding of the element

padding-left Set the left inner margin of the element

CSS positioning attribute (Positioning)

Property

Description

##position specifies the positioning type of the element

bottom sets the offset between the lower margin boundary of the positioned element and the lower boundary of its containing block

right Set the offset between the right margin boundary of the positioned element and the right boundary of its containing block

left Set the offset between the left margin boundary of the positioned element and the left boundary of its containing block

top Setting The offset between the upper margin boundary of the positioned element and the upper boundary of its containing block

overflow Specifies what happens when the content overflows the element box

cursor Specifies the type of cursor to be displayed

float Specifies whether the box should float

display Specifies the type of box that the element should generate

vertical-align Sets the vertical alignment of the element

visibility Specifies whether the element is visible

z-index Set the stacking order of elements

CSS Pseudo-classes

Attribute

Description

：active Add style to the activated element

：focus Give the keyboard input focus Add a style to the element

:hover When the mouse is hovering over the element, add a style to the element

: link Add a style to an unvisited link

: visited Add style to the visited link

:lang Add style to the element with the specified lang attribute

##CSS for the element (Pseudo elements)

Properties

Description

：first-letter Add special to the first letter of the text Style

: first-line Add special style to the first line of text

: bofore Add content before the element

: after Add content after the element

Conclusion

Simplicity does not precede complexity, but comes after complexity

For more related articles on CSS (properties) in HTML, please pay attention to the PHP Chinese website!