CSS style attribute classification

A text

1 font-family: Font name

Note: When you specify multiple fonts, use "," to separate the names of each font
When the font name contains more than two separate words, use "" to enclose the font name.
When the style rule already has "", replace "".

2 font-size: Font size parameter.

3 Font-style: The name of the italic word.

Normal state, italic italic, oblique italic, and normal state.

4 font-weight: Font weight.

The values are: Number (100~900) or parameter lighter (fine) and bold (bold) bolder (extra bold) parameters appear thinner or thicker.

5 Text-transform: Parameters

Range of parameters: uppercase all text uppercase display
Lowercase: All text lowercase display
Capitalize the first letter of each word in uppercase
None does not inherit the parent's text warp parameter.

6 Text-decoration: Parameters

Range of parameters: Underline underline text
Overline to underline text
Line-through for text and strikethrough
Blink make text blink
None does not show any effect.

7 Color: #rrggbb或者 #rgb原则 (There are several ways to reference it, but just master one way).

8 can be fully positioned with the Font property

Example: P{font:italic bold 12pt;}

B background

1 Background-color background color

2 Background-image background image
Example: {background-image:url (' http://baidu.com/zhouliang.gif ')}

3 background-repeat: Parameters
Range of parameters:
Repeat indicates that the image is tiled from horizontal and vertical angles
No-repeat tile background image without repeating
Repeat-x make the picture tile horizontally only
Repeat-y make the picture tile only vertically.

4 background-attachment Parameters
When a fixed web page scrolls, the background image is fixed relative to the browser.
Scroll the background image scrolls with the browser when the page scrolls.

5 background-postion parameters (background positioning)
Parameters: Top align relative to foreground object
Bottom align relative foreground object bottom
Left aligns relative foreground objects
Right aligns relative to foreground object
Center alignment relative to foreground object centers
Description: Generally coordinates the way to determine the position of the picture.
6 You can use the background composite property directly to determine the design
Example: table{background: #001122 url (zhouliang.jpg) No-repeat bottom Right}

C text

1 English word spacing word-spacing:
The value can be: normal or unit pixels;

2 english letter spacing letter-spacing: The interval distance
can be either normal or unit pixels;

3 line spacing line-height: Value

can be either an exact value or a percentage.

4 text is arranged horizontally text-aglin: Parameters

Left: Justify right: Align Center Centre: center justify: relative to left.
Note: Text-aglin is a block-level attribute and can only be used for <p><blockquqte><ul>
5 text vertical arrangement Vertical-align: Parameter

top top align bottom bottom align text-top relative text top align
Text-bottom relative text bottom baseline: baseline alignment middle centerline alignment
Sub The following subscript forms align the sup above the superscript form, relative to the element row height attribute percentage.

6 Text indent text-indent indent

Description: Indent distance must be value or% ratio



7 white-space

Setting Value: Normal: Merge consecutive spaces
Pre: Preserve original style
NoWrap: Do not wrap until you encounter <br> tags

8 text-decoraition

Value: None: Indicates that the text is not decorated and is the default value,
Underline: To add an underscore to text
Overline: To add an underscore
Line-through: To add a strikethrough to Text
Blink: Indicates that text has a flashing effect


9:text-transform text Conversion

Value range: none: Represents the original value
Capitalize: Capitalize the first letter of each word
Uppercase: Uppercase
Lowercase: lowercase

D positioning
Refers to the location of the specified element, which is the content of css-p (cascading style sheets positioning), and css-p is an extension of the CSS,
It can be used to control the position of any page element in the Browser document window.

1:postion

Set Value: Meaning
Absolute positioning of the absolute (four frames respectively)
Relative using relative positioning (also use four borders to set the position)
Static default value

2:left/top/width/height

Description: The setting value can be

3:z-index (that is, the stacking of elements, the big on the top, the small in the next.) Default is in order)

Note: The auto default value indicates that it follows the positioning property of its parent object, and if it is set to a number, it must be a positive integer with no units, and a negative value can be taken.
But generally positive, the general number is 1 time is the lowest level.

E layout

1 Visibility Visibility

Set Value: Inherit: Indicates that the object inherits the inheritance of the parent.
Visible: Indicates object visibility
Hidden: Indicates object hiding

2 Display Sets or retrieves whether and how objects are displayed

Set values: block, inline, List-item, none

3 Clip Viewable Area
Set value: Auto means object is not cropped
Rect (numeric representation) (typically four set values: The direction is positioned in the upper right-bottom left-hand order, typically 4 offset values are calculated in the upper-left corner (0,0) coordinates. Any of these values can be replaced with auto)

4 Overflow out of range:
Set Value: isible Enlarge browser
Hidden cut out the extra text
Scroll scroll bar
Auto Displays scroll bars when there is extra time
5 Float Float Property


Set value: Left to indicate text floating on element
Right means the text floats to the left of the element
The None default value, which means no float. < This attribute is particularly important, be sure to master >

6 clear indicates that an element that is specified around is allowed to have other elements floating around it.

Set value: Left, right,none,both; means to clear the floating object around this element.

7 Page-break-before Set Value: Always force page paging

8 Page-break-after Set Value: Always print after setting whether to force paging

9 width and height represent the widths and heights of the layers. Set the value to auto| number

F Margin and fill properties

1 Composite properties margin: distance from margin

(Margin-top margin-left margin-bottom margin-left)
The value can be: Auto default
% ratio or specific value:
Note: The value can be one or two or three or four (each has a different meaning).

2 composite attribute padding (refers to white value padding): padding

Description: The same as the use of margin.

3 Border-width

Border Width:
Border-top-width: Top Border width
Border-right-width: Right Border width
Border-bottom-width: Bottom Border width
Border-left-width: Left Border width
Values are: Medium default width, thin thin border thick thick border

4 Border-style

Border-top-style: Top Border Style
Border-right-style: Right Border style
Border-bottom-style: Bottom Border Style
Border-left-style: Left Border style
Value: Meaning

None unrealistic border, default value
Dotted point line (wire)
Dashed dashed line, also known as short-term
Solid Solid Line
Double two solid lines
Groove border with three-dimensional groove
Ridge border into ridged shape
Inset the entire table frame, that is, embedding a bounding rectangle inside the border
Outset the entire border, that is, to embed a solid border outside the bounding rectangle


5 Border-color

Set the color of the border: Use same as margin

6:border

Composite properties: Border: Border Width | style | color
Then there are: Border-top|border-right|border-bottom|border-left

G List
1:list-style-type refers to the identification symbol displayed before the list item

Value: Meaning
None indicates that the list symbol is not displayed
...............

2: List indent list-style-postion list location description list where to display

Parameters: Inside list contents and list identifier symbols are in different vertical positions and are measured in symbols.
Outside list contents and list identifier symbols in the same vertical position
3:list-style-image
Description: Use picture symbols as link headings
Value meaning
None indicates no image is specified
URL (Web page address) specify picture location

4: Composite Properties: List-style


Achieve the above three properties

H Cursor Properties

1 cursor When you click on a content, the mouse displays other graphics
Style= "Cursor:hand" hand shape
Style= "Cursor:crosshair" cross-shaped
..............

G Filter Properties
1 Filter

CSS style attribute classification