Common methods and parsing of HTML introduction to CSS
May 04, 2021 CSS
Table of contents
We all know that HTML and CSS are two different languages, but they can work for a Web page at the same time, webPage , content (html), performance (css) , and behavior (javascript). T herefore, CSS needs to be introduced into HTML to work with. T o display the desired CSS style sheet effect in your browser, you need to have the browser recognize and call CSS correctly. W hen a browser reads a style sheet, it reads in a text format, and when the CSS style sheet is placed in a different place, the scope of action is different. In HTML, CSS is introduced in four main ways: in-line, inline, imported, and linked.
(1) In-line
<p style=”color:red”>网页中css的导入方式</p>
That is, set the CSS style in the marked style properties, which does not essentially reflect the advantages of CSS and is therefore not recommended.
(2) Embedded
<style type=”text/css”>
p{ color:red }
</style>
(3) Imported
<! - Import External Style: Import an external style sheet between the <style> </ style> tag of the internal style sheet, use @Import when importing.->
<style type="text/css">
@import "jisuan.css";
</style>
(4) Linked
<link href="jisuan.css" rel=”stylesheet” type=”text/css” />
Imported and linked, both introduce CSS files from the outside. But linking works better when client users browse the site.
Linking can be said to be the dominant method of introduction now. L
ike IE and browser. T
his is also the most reflected CSS characteristics of the method, the most reflects the DIV- CSS content and display separation of the idea, but also the most easily modified maintenance, the code also looks the most beautiful one.
If you want javascript to dynamically decide which css file to bring in, you must use connectivity to implement it. M
ost websites still prefer to use links to reference external CSS.
The difference between imported and linked:
1, import type: will be loaded after the entire page load CSS file, for some browsers, in some cases, if the volume of the web file is relatively large, it will appear first show no style of the page, flashing and then the effect of setting the style, from the viewer's feeling, this is an imported defect.
2, linked: will load the main part of the page before loading CSS files, so that the display of the web page from the beginning is with a style effect.
For some of the bigger sites, for ease of maintenance, you might want to put all the CSS style categories into several CSS files, so that if you use connected introduction, you'll need several statements to import the CSS files separately. I
f you want to classify CSS files, you need to adjust the HTML files at the same time, which is a flaw in maintenance work, if you use imported, you can introduce only one total CSS file, in this file and then import other independent CSS files;
Therefore, the suggestion is: if you only need to introduce one CSS file, then use linking, if you need to introduce multiple CSS files, first introduce a "directory" CSS file by linking, this "directory" CSS file and then use import to introduce other CSS files.
The difference between link @import the system
Both HTML and XHTML have a structure that allows web authors to add additional information related to HTML documents. T hese additional resources can be styled information (CSS), navigation assistants, information that belongs to an additional form (RSS), contact information, and so on.
The definition @import Quote
Specify the imported external style sheet and target device type. I
n fact, the fundamental difference between link and @import is that link is a label for HTML, and @import is a label for CSS, and link can have other functions in addition to calling CSS, such as declaring page link properties, declaring directories, rss, and so on, while @import can only call CSS. I
f CSS is referenced from the outside alone, their role is basically the same, except that the boss above is different.
Which is better for link and impport?
1. If you want to use javascript for style selection:
This is the time to use link, because l ink is an html element that can be controlled by javascript to finally achieve a style change effect.
Print styles, as the name implies, are the styles when you print a page.
This style has no effect under normal browsing and only works when printed.
If you want to refer to the print style separately for the page, both the link @import are all available.
3, if you want to refer to more than one style;
Link and technology are all right if you want to refer to multiple style combinations @import a page to produce an effect.