What is external link css?-Front-end Q&A-php.cn

What is external link css?

青灯夜游

Release： 2022-09-01 18:43:32

Original

3364 people have browsed it

External link css refers to defining the CSS style in a ".css" format file, and then using the HTML link tag to link the css file to the HTML document. External link css will load the CSS file before the main body of the web page file is loaded, so the displayed web page will be styled from the beginning. It will not display the unstyled web page first and then display the styled one like the imported css. Web page.

What is external link css?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

External link css refers to using the HTML link tag to link the css file to the HTML document.

CSS files are generally called CSS external style sheets, which are text files used to place CSS codes, and CSS codes are composed of text codes with certain rules. We use Notepad to change the extension to become a CSS file.

css files have .css as the suffix. We see that files with .css as the suffix are css files. The

link tag needs to be placed in the

section of the page.

The link type will load the CSS file before loading the main body of the web page file, so the displayed web page will have a style effect from the beginning. It will not display an unstyled web page first like the import type, and then Displaying styled web pages is the advantage of link style.

The following will be demonstrated through specific examples.

First, you need to define a style file in .css format (such as style.css), as shown below:

body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}

Copy after login

Then we introduce this style.css file into the HTML document, as follows Display:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css">
    </head>  
    <body>
	<h1>PHP中文网</h1>
	<p>https://www.php.cn/</p>
    </body>
</html>

Copy after login

What is external link css?

Explanation of each attribute of the link tag:

href attribute sets the address of the external style sheet file, which can be A relative address can also be an absolute address.
The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.
The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.

Generally when defining the tag, three basic attributes should be defined, among which href is a must-set attribute.

You can also add the title attribute in the link element to set the title of the optional style sheet. That is, when a web document imports multiple style sheets, you can select the style sheet file to be applied through the title attribute value.

Tip: In the Firefox browser, you can select the "View --> Page Style" option in the menu, and then the title attribute value will be displayed in the submenu. Just select a different title attribute value. Selectively apply required style sheet files. IE browser does not support this feature.

In addition, the title attribute is related to the rel attribute. According to the W3C organization's plan, future web documents will use multiple elements to import different external files, such as style sheet files, script files, and themes. files, and can even include other customized supplementary files. After importing so many files of different types and names, you can use the title attribute to select. At this time, the role of the rel attribute becomes apparent. It can specify the imported file type applied when the web page file is initially displayed. Currently, it can only be associated with CSS. Style sheet type.

Note:

In addition to using the link tag to introduce CSS external style sheets, you can also @import.

The difference between external link (link) and import (@import):

link is an XHTML tag. In addition to loading CSS, you can also define RSS and other Transaction; @import belongs to the CSS category and can only load CSS; when
link refers to CSS, it is loaded at the same time when the page is loaded; while @import requires the page to be loaded completely. .
link is an XHTML tag and has no compatibility issues; while @import was proposed in CSS2.1 and is not supported by lower version browsers.
ink supports using Javascript to control the DOM to change the style; @import does not support it.
@import can introduce other style sheets into the CSS file; link does not support it.

(Learning video sharing: web front-end)

The above is the detailed content of What is external link css?. For more information, please follow other related articles on the PHP Chinese website!