Three methods of introducing css files
(1) In-line style:
Use style attribute to introduce css style and write it in the body tag. It is used more in testing.
<h1 style="color:red;">application of style attribute</h1> <p style= "font-size: 14px; color: green;">Styles set directly in HTML tags</
For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test00.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<!-- Introducing with in-line style css -->
<h1 style="color:red">I am the title.</h1>
<p style="color:blue;font:20px">I am p Label, paragraph</p>
</body>
</html>
The results are as follows:
(2): Internal style
Write the css code in the style tag, and the style tag in the head
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
<body>
<h3>Internal stylesheet</h3>
</body>
The results are as follows:
(3) External style sheets
The CSS code is stored in a style sheet with an extension of. css. HTML files refer to a style sheet with an extension of. CSS in two ways: linking and importing.
Syntax:
1,Link type
<link type="text/css" rel="styleSheet" href="CSS File path" />
2,Import type
<style type="text/css"> @import url("css File path"); </style>
For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>External stylesheet</title>
<!--Link type:Recommended use-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--Import type-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
The Difference between Linking and Importing
link:
1. belong to XHTML
2. Prefer loading CSS files to pages
@import:
1. belong to CSS2.1
2. Load the HTML structure first and load the CSS file.