May 29, 2021 Article blog
The combination of CSS and HTML produces a wonderful chemistry, and the style of CSS allows HTML to be presented more beautifully to the user, and this article shows us how to embed CSS into HTML.
The first method embedded refers to the use of
<style>
elements, adding
<style type="text/css">
within the
<head>
>, and then defining the specified CSS style content within
<style>
On the code:
<head>
<meta charset="utf-8">
<title>button - 编程狮(w3cschool.cn)</title>
<style>
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>Inline styles are straightforward, adding style properties to each HTML element to define the element styles directly. At this point, this style style is only valid for its elements and has no effect on another element of the same name or type
On the code:
<p style="background-color: blue">w3cschool</p>
<h1 style="font-size:20px">编程狮</h1>External references refer to the absence of embedded and inline CSS styles in HTML, but rather dynamic references to external CSS files to decorate HTML.
Add a style sheet instruction statement at the beginning of the HTML document
On the code:
<?xml-stylesheet type="text/css" href="w3cschool.css" ?>
<html>
指令语句
</html>This situation is due to instructions supported by writing html documents using xml syntax, most browsers have to save the city xhtml or xml format to take effect, and JS cannot handle such CSS and is not recommended.
Import external CSS files using the @import command in the
<style>
>
On the code:
<head>
<meta charset="utf-8">
<title>button - 编程狮(w3cschool.cn)</title>
<style>
<!--下面两行代码效果一样
@import "w3cschool";
@import url("w3cschool.css");
-->
</style>
</head>On the code:
<head>
<link rel="stylesheet" href="w3cschool" type="text/css">
</head>
Use the link field at the head of the HTTP message to link it to an external style sheet
On the code:
link:<mystyle.css>;rel=stylesheet;Here's a summary of how HTML introduces CSS.