Home > Developer > Web Develop
Inline CSS can also be called inline CSS or row-level CSS, which is introduced directly inside the tag, the obvious advantage is very convenient and efficient; but it also creates the disadvantage of not being able to reuse styles, if the number of lines of code reaches a certain length is not recommended. Typically inline CSS is used as a test to find bugs in your code.
2. Page-level CSS1 < Body > 2 < style= "width:65px;height:20px;border:1px solid;" > test elements </div>3</body >
Page-level CSS can also be called internal CSS, the whole is placed in the head tag inside, the style tag inside the definition of styles, the scope and the literal meaning of the same, limited to the elements of this page; If you write more than hundreds of lines, think of the code page every time to pull the top of the annoying, so it is poor maintainability.
1 <Head>2 <MetaCharSet= "Utf-8" />3 <title>Test</title>4 <styletype= "Text/css">5 Div{6 width:65px;7 Height:20px;8 Border:1px solid;9 background:Greenyellow;Ten } One </style> A </Head>
3. External CSS
The outer CSS can also be called external CSS, which is usually used in the actual project, it can only be introduced in the page using link or @import, and the external CSS is a separate file that can be used for multiple pages, which can be modified to modify a certain area in a specific way. Multiple page styles are changed at the same time, compared to the inline CSS and page-level CSS, eliminating the steps to modify each page, improve the development efficiency, and to a certain extent improve performance.
Next, specifically, the difference between link and @import:
(1) Link:<link rel= "stylesheet" type= "Text/css" href= "*.css"/>In the link syntax format, rel refers to the Association (relation), type refers to the kind, and href refers to the path of the linked file.
Link's role is mainly used to introduce CSS and Web page icons, indicating that the search engine, the relationship between the page and so on.
(2) @import:<style> @import url ("*.css");</style>@import syntax format must be written in the Style tab, followed by the file path directly.
@import role in CSS files and pages, you can introduce other CSS files in a CSS file, For example, in the Index.css file to introduce the style of other CSS files, integrated together, and then called once in the index.html, often used in the actual project, easy to manage and maintain.
(3) Effect of loading orderHTML loading process: 1) Loading HTML-DOM structure
2) CSS and JS
3) Pictures and multimedia
4) Load Event Trigger
Link and @import do not have a requirement to place the order, but different placement positions may cause differences in the effect display. For link, no matter where you put it, it is a good visual experience to load data on one side, and for @import, where to start loading the CSS style, load the data first, then load the style, if the network speed is poor, may cause only the data out, and the style loads the effect a little bit. And in the same page, call two ways, link is always higher priority than @import.
When used in a project, it is generally called link in the page, and placed in the head tag; using @import in addition to the CSS file, when the page is called, the typical loading of a third-party style is used, and it needs to be placed at the bottom of the page without affecting its own site.
CSS Three introduction: inline, page-level, and out-of-the-way
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
