本文将主要介绍引入CSS样式的方式，包括外部样式表、内部样式表和行间样式三种方式
[注意]CSS语法非常简单，但容易忽略的一点是不能省略分号(最后一个样式除外)
外部样式表
在link标记中rel和href属性是必须的，type属性和media属性可省略
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
完整dome
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sheet1.css"> <title>Document</title> </head> <body></body> </html>
多个样式表
一个文档可能关联多个样式表，如果是这样，文档最初显示时只会使用rel为stylesheet的link标记
<link rel="stylesheet" href="sheet1.css" /> <link rel="stylesheet" href="sheet2.css" />
完整dome
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="sheet1.css"> <link rel="stylesheet" href="sheet2.css"> <title>Document</title> </head> <body> </body> </html>
内部样式表
内部样式表需要使用<style>元素包含样式表，它在文档中单独出现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>多个style标签
文档中可出现多个style标签，且样式规则与层叠样式规则一致
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: red;
}
</style>
<style>
body{
background-color: blue;
height: 100px;
border: 10px solid black;
}
</style>
<title>Document</title>
</head>
<body>
</body>
</html>使用@import指令
与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。
<style>
@import url(sheet2.css);
body{
background-color: red;
}
</style>[注意]@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*将@import放置在CSS规则之后将不起使用*/
body{
background-color: red;
}
@import url(sheet2.css);
</style>
<title>Document</title>
</head>
<body>
</body>
</html>多个@import指令
可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @import url(sheet1.css) all; @import url(sheet2.css); </style> <title>Document</title> </head> <body> </body> </html>
行间样式
如果只是想为单个元素指定一些样式，可以使用HTML的style属性来设置一个行间样式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;"> </body> </html>
[注意]行间样式若存在多个style属性，只能识别第一个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- 只能识别第一个style属性的值，所以页面显示为红色--> <body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;"> </body> </html>
相关专题
css
2021-09-24 79css是前端开发中的样式语言,学好CSS可以帮助开发出漂亮的模板,css专题为您整理本站所有css相关信息,包含css模板下载,css使用教程分享和css示例代码....
- css3海浪波浪动态效果代码 [2021-10-25]
- css样式内加载其他CSS文件方法 [2021-09-27]
- HTML5+CSS3前端开发基础入门视频教程 [2021-09-16]
- HTML+CSS物业后台管理系统模板 [2021-08-15]
- HTML5/CSS3响应式Synthetica团队介绍模板 [2021-04-06]