1.行内式
语法格式:
<标签名 style=“属性名1:属性值1;属性值2:属性值2;…;属性名n:属性值n”></标签名>
注意:和;的使用
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0618</title>
</style>
</head>
<body>
<!-- 行内样式表 -->
<h1 style="color:green; font-size:20px;">早上好</h1>
</body>
</html>
样例:
2.内部样式表
语法格式:
<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性 2:属性值2;
...
}
</style>
</head>
代码:
html5中type=“text/css”可省略不写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0618</title>
<style type="text/css">
h1 {
color: green;
}
</style>
</head>
<body>
<h1>早上好</h1>
</body>
</html>
样例:
3.外部样式表(重要且常用)
新建一个以.CSS为扩展名的外部样式表的文件中,通过链接<link>使CSS文件对本网页的样式有效
demo.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0618</title>
<!-- 给html文件和css文件建立联系 -->
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<h1>早上好</h1>
</body>
</html>
demo.css代码:
h1 {
color: aqua;
}
样例: