Posts in current category

Common methods and parsing of HTML introduction to CSS


May 04, 2021 02:00 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.


Common methods and parsing of HTML introduction to CSS

(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>

It's convenient for a single page to set the settings for the various elements in the page, which is written between the two parts of the page, and between the and the head. /b10> However, this method is used much less, the longest is to see a large number of portal sites. O r the home page of a largely visited corporate website. C ompared with the first method, the advantages are outstanding and the disadvantages are obvious. P ros: Fast, all CSS controls are for this page label, no extra CSS commands; R ead styles directly in html documents. T he disadvantage is that the revision trouble, a single page appears bloated, CSS can not be other HTML references caused by a relatively large amount of code, maintenance is also more troublesome. B ut most of the companies that use this approach have money, and for them the number of users is key, and they don't lack people for complex maintenance work.


(3) Imported

<!-- 导入外部样式:在内部样式表的<style></style>标记之间导入一个外部样式表,导入时用@import。 -->

<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.


Common methods and parsing of HTML introduction to 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

The definition of Quote link
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?

Above said because the above boss is not the same, so in the use of some details of the difference, can not say the overall who is good and who is bad, can only say the specific situation of specific analysis.
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.

2, if you want to apply the printing style;
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.

Finally, in fact, this @import way to import files has been rarely used, it is recommended to use link. T he reason is that link is loaded synchronously with HTML loading, and @import is referenced after the page content is loaded. I f the network speed is slow, it may cause the style of the page to be confusing. A lso use @import to add places, as mentioned in the CSS manual: the rule must be declared first at the head of the style sheet. A nd the following sign is required, and if it is omitted, the external style sheet will not be imported correctly and an error message will be generated. IE @import can't introduce more than 35 style sheets.