We can use the following four ways to apply CSS into the HTML file:
- Apply inline (Inline) apply inline (Inline)
- Apply embedded (the Embed) embedded applied (the Embed)
- Apply an external connection (External Link) to apply an external connection (External Link)
- Apply import (Import) to import apply (Import)
Apply inline inline Apply
We can directly declare styles within the HTML file. We can directly declare styles within the HTML file. For example, for example,
-
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p> <p style='font-family:verdana; font-size:16;'>This is font size 16.</p>
Above HTML file in a browser would appear as: The above HTML file in a browser would appear as:
This is font size 16. This is font size 16.
Embed Embed Apply Apply
Pattern may be embedded in an HTML file (usually in the <head>). Pattern may be embedded in an HTML file (usually in the <head>). For example, for example,
<head>
<style type="text/css"> <style type="text/css">
div { div {
background-color:#FF0000;
}
</style>
</head><body>
<div>
background color is red background color is red
</ div>
</ body>HTML above will show: The above HTML will show:
The background color is red background color is red
Apply to apply external connection external connections
In this way, all the CSS style declaration is the presence of another file. In this way, all the CSS style declaration is the presence of another file. The file name is usually .css. The file name is usually .css. In the <header> .. </ header> HTML file in, we will enter this connection .css file with the following code: the <header> .. </ header> HTML file in, we will use the following code will connect the .css file enter:
<link rel=stylesheet type="text/css" href="external-stylesheet.css"> <link rel=stylesheet type="text/css" href="external-stylesheet.css">
Above this line will be in the external-stylesheet.css this file proclaimed style added to the HTML file. Above this line will be in the external-stylesheet.css this file proclaimed style added to the HTML file.
Import Import Apply Apply
External CSS styles can also be imported into the HTML file. External CSS styles can also be imported into the HTML file. Import practices for the use of this @import directive. Import practices for the use of this @import directive. @import syntax is: @import syntax is:
<STYLE TYPE="text/css"> <STYLE TYPE="text/css">
<!--
@import url(http://www.mysite.com/style.css); @import url(http://www.mysite.com/style.css);
-->
</STYLE>@import command initial intention, but in order to be able to use different styles for different browsers. @import command initial intention, but in order to be able to use different styles for different browsers. But now no need. But now no need. Now with the purpose of @import, the most common is to add multiple CSS styles. Now with the purpose of @import, the most common is to add multiple CSS styles. When multiple CSS @import way is to join, and there are different conflicting CSS styles, after adding CSS styles have priority pick (For details, see CSS series). When multiple CSS @import way is to join, and there are different conflicting CSS styles, after adding CSS styles have priority pick (For details, see CSS series).
