Home > Developer > Web Develop

02CSS3 Basic Syntax 05

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

Day05

02CSS

The relationship between Html,css and JavaScript

HTML is the carrier of Web content
CSS style is presentation (appearance control)
JavaScript is the behavior used to achieve the effects of Web page effects


CSS Cascading style sheet (cascading style Sheets)
Used to define HTML content and display styles within the browser


Why learn CSS

CSS simplifies HTML-related tag code, small page size, download fast
Solve the problem of separating content from performance
Better maintain web pages and improve productivity


CSS Basic syntax
How to use CSS
CSS Selector
CSS inheritance and cascading
CSS Precedence
CSS Naming conventions


CSS style rules
CSS rules consist of two parts: selectors, declaring


CSS References

Written in the <style type= "Text/css" >
CSS Styles
</style>

CSS comments/* Comment Contents */


Referencing CSS Styles

inline style (inline style)
<p style= "color:red;" > Content </p>
Internal style sheet (inline style)
<style type= "Text/css" >
Style
</style>
External style sheet, write CSS style code in a separate file extension: CSS file name. css
Introduction of external files: <link href= "Xx.css" rel= "stylesheet" type= "Text/css"/>
Import type
@import "css.css" or URL (css.css)


CSS use method precedence

Highest in-line priority
Inline style > Inner style > External style
Description
1. Linking to an external style the precedence between the internal style sheets depends on the order in which they are located
2. Final definition of highest priority (nearest principle)

Css_use1.html:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>CSS use method precedence</title>    <Linkrel= "stylesheet"type= "Text/css"href= "Css2.css"><!--Color:gray -    <styletype= "Text/css">@import URL (css1.css); P{            /*Color:blue;*/        }    </style>    <Linkrel= "stylesheet"type= "Text/css"href= "Css3.css"><!--Color:orange -</Head><Body>    <Pstyle= "color:red;"><b>How to use CSS</b></P></Body></HTML>

Icon:

02CSS3 Basic Syntax 05

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