Some small points in HTML5 (CSS)

Source: Internet
Author: User

1. Click the area around the a tag to access the hyperlink: The Display property in the CSS style of a tag is set to block .

2, the text centered around: text-align attribute value is center

3, text up and down center: line-height is the height value of the parent element

4, (1) The Li of the navigation bar if the display property is set to inline, all entries are on one line, and if the display property is set to block, each entry occupies one row; The Inline-block property renders the object as an inline object. However, the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, setting the Block property to the Li property is Inline-block, so that Li can be displayed as a single block of Inline,li(the contents of Li inside the block display), Li if there is a tag, you can set a label D The Isplay property is block so that clicking on the a tag will allow you to go around a hyperlink.

(2) Make entries appear on one line and you can set the Li tag's CSS as follows

1 li{2     box-sizing:border-box;3     float:left;4     list-style-type:none;5     inline-height:    //height of parent tag 6 }

5, the entire page center: The body is set as follows CSS

1 Body {2    width:80%;  3    margin:0 Auto4 }

It must be set to a width of less than 100%, or the default width of the entire page (100%) display, the center effect is not displayed

6, eliminate the Li label in front of the small dot method:list-style-type:none;

7, the following CSS can be set to the selected text is white, the selected text background is pink

1 :: Selection {2    color:White;  3    background: pink;  4 }

8. CSS Multiple Property selector a[href][class= "good"] a tag with href attribute and class name good

9, the DIV will be more than the actual height of an img part, because IMG is a similar to the text of the element, at the end of the IMG will be added a blank character. To remove the higher part, set the Display property of IMG to block to resolve

10,outline:0; used to set the element border to 0, when a link is selected or a link is selected using the TAB key, a border appears when the outline:0 is set; The border is no longer displayed.

Outline-width used to specify the border width

Outline-style used to specify the border style

Outline-color used to specify the border color

11, set the subscript position:relative; Font-size:0.75em; Top:0.5em;

Set superscript position:relative; Font-size:0.75em; Bottom:0.5em;

12, parity line set style: Nth-clild () pseudo Selector

: Nth-child (odd) odd line

: Nth-child (even) even rows

: Nth-clild (2n+1) Select the row element to render with an expression

Some small points in HTML5 (CSS)

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.