Common CSS attributes

Source: Internet
Author: User

1. Use Web Fonts

@ Font-face {
Font-family: delicious;
SRC: URL (/Delicious-Roman.otf ')
}

Then, call the font:
H3 {font-family: Delicious, sans-serif ;}

In IE

 

2. modify the rules added to the text

Text-Decoration: None

None is the default value. Define standard text

Underline defines a line in the text

Overline defines a line in the text

Line-through defines a line passing through the text

Blink defines flickering text

 

3. Increase or decrease the space between characters (Character spacing)

H1 {letter-Spacing:-0.5em}

H2 {letter-Spacing: 20px}

In IE

Normal: default value. No additional space between specified characters

Length: defines the fixed space between characters (negative values are allowed)

Inherit

 

4. Set the font size

Font-size: 200%

Medium: Default Value

Smaller: smaller size than the parent Element

Larger: set to a larger size than the parent Element

Length: set to a fixed value.

%: Set to a percentage value based on the parent element.

Inherit

 

5. specifies the horizontal http://www.w3school.com.cn/css/pr_text_text-align.asp of text in the element

Text-align: Left; arrange the text to the left. Default Value: determined by the browser.

Right: arrange the text to the right.

Center: arrange text in the middle

Justify achieves text alignment at both ends

Inherit

 

6. Set all margin attributes (top right bottom left in sequence)

Margin: 10px 5px 15px 20px

Margin: 10px indicates that the four margins are 10px.

7. Set all padding attributes (top right bottom left)

Padding: 10px 5px 15px 20px;

Padding-left: 20px;

 

8. Set the background color of the element.

Backgound-color: Yellow

 

9. Set all border attributes

Border: 1px dashed # aaaaaa;

 

10. This is a border style.

Border-style: dotted dolid double dashed; indicates that the upper border is a point, the right border is a solid line, the bottom border is a double line, the left border is a dotted line

The order of attributes is the same as that of attributes of margin.

Border-style: dotted; all four borders are dotted

 

11. specify the type of the box to be generated by the element

Display: inline; default. This element is displayed as an inline element, with no line break before and after the element

None: This element is not displayed.

Block: This element is displayed as a block-level element with a line break

Inherit: specifies that the value of the display attribute should be inherited from the parent element.

 

12. Set whether the border of the table is merged into a single border.

Table {

Border-collapse: collapse;

}

Default Value of siparate. Borders are separated. The border-spacing and empty-cells attributes are not ignored.

If possible, the border is merged into a single border. The border-spacing and empty-cells attributes are ignored.

Inherit

 

13. Set the background image http://www.w3school.com.cn/css/pr_background-image.asp

Background-image: url(bgimage.gif );

Background-repeat: none (default) based on this value, you can set the image to be tiled wirelessly or not.

 

14. Specify the positioning type of the element

H2.pos _ left
{
Position: relative;
Left:-20px
}
H2.pos _ Right
{
Position: relative;
Left: 20px
}

In IE

Static default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or Z-index Statement)

Absolute: generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes.

Fixed: generates absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "Left", "TOP", "right", and "bottom" attributes.

Relative: generates relative positioning elements and locates them relative to their normal locations. Therefore, "Left: 20" adds 20 pixels to the left position of the element.

Inherit

 

15. define the direction in which the element floats

Float: none; default value. The element does not float and is displayed in the position where it appears in the text.

Left: the element floats to the left.

Right: The element floats to the right.

Inherit

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.