Home > Developer > JavaScript

Basic CSS knowledge (concept, block-level element, in-Row Element, selector), css Selector

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Basic CSS knowledge (concept, block-level element, in-Row Element, selector), css Selector

1,CSSConcept

The full name is Cascading Style Sheet. It supports proprietary files with the extension ". css"

Function: separates HTML structures (HTML tags are html) from styles (display styles are css ).

2. CSS syntax structure

Syntax format: Selector {attribute name: Attribute Value;Property name: Property Value;}

2. CSS comments

It is used to explain the code and can be edited at will. The browser ignores it. Format:/* content */

2, How to useCSS

  • Inline Style

Implemented through the style attribute of HTML elements (<body>), that is, <p> note: the structure and style of HTML are not effectively separated, and this CSS style is only valid for the current element

  • External Style

A. On the

Selector {attribute name: attribute value}

</Style>

B. First define a CSS file, and then introduce the external css file through the <link> element in the HTML page.

That is, <linkHref= "Css file path" rel = "file type. Its fixed value is stylesheet" type = "text/css"/>

[Note: inline styles take precedence over external styles]

3Block-level elements

Concept: exclusive one row on the page (the next block-level element is in the new row)

* <H1>, <p>, <ul>, and <table> have good semantics (specific elements have specific meanings)

[Note: <p> tags cannot contain any block-level elements]

* <Div> element: it does not have any meaning. <Div> </div> the height must be set; otherwise, it cannot be displayed.

Purpose: Implement page layout (similar to <table> table elements)

4, In-row(Inline)Element

Concept: a row is not exclusive (only occupies the area of the text content), such as <td>, <a>, and .

Note: If a row cannot contain all the elements, it will be switched to the next row and arranged from left to right.

<A> a tag cannot contain <a> tags, but can contain any other elements.

[Block-level elements generally contain intra-row elements]

<Span> element: it does not have any meaning. Feature: automatically wrap a line when the line element occupies the entire width of the page.

Eg: <span> </span>

<Span> </span>

Eg: <span> </span>

5,CSSSelector

2. Common Selector

  • ID Selector

Locate by using the id attribute value of the HTML page element. Its syntax structure is# ID

  • Class Selector

The class Attribute Value of the HTML page element is located. The syntax structure is. Class

Note: Class names cannot be defined with names starting with numbers. We do not recommend that you use Chinese characters to define class names.

  • Ø element Selector

Locate by using the element name of the HTML page element. The syntax structure isElement name

  • Ø attribute Selector

Locate by using the attribute of the HTML page element. The syntax structure is[Attribute name].

[Selector priority: inline style> ID selector> class selector and attribute selector> element selector]

【! Important-set the priority level of the current selector to the highest (disrupt the priority order)-Not recommended]

2. Link Selector

  • Ø descendant Selector

Matching child element based on the target Element

Format: Target element descendant element eg: # t1 div {color: red ;}

  • Ø child element Selector

Matches child-level elements based on target elements.

Format: Target Element>Child element eg: # t1> div {color: red ;}

  • Ø adjacent sibling Selector

Matches the next adjacent sibling element based on the target element.

Format: Target Element+Next adjacent sibling element eg: # t1 + div {color: red ;}

2. Combination Selector

* First-intersection result (multiple selectors are used in parallel without any separation in the middle)

* Method 2-Union result (multiple selectors are used in parallel and separated by commas)

U wildcard selector (*)

Purpose: match all elements in the current HTML page. For example: * {color: red ;}

Problem: the matching speed is not very fast (the number and complexity of page elements)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More