-
样式介绍8.css样式的使用方式.png
- 样式说明
(1)内链样式表: 他的使用方式是在标记的后面添加style="属性名:属性值;属性名:属性值..."
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三种使用方式</title>
</head>
<body style="background-color: green; color: white">
<h1 style="color: white">内链样式使用方式</h1>
<p>内链样式使用方式</p>
</body>
</html>
(2)嵌入式样式表: 他的使用方式是用<style type="text/css">标签名: { 属性名: 属性值; 属性名: 属性值;...}</style>,并且必须写在<head></head>标签里面
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三种使用方式</title>
<style type="text/css">
body{
background-color: green;
}
h1{
color: white;
background-color: gray;
}
p{
color: red;
}
</style>
</head>
<body>
<h1 style="color: white">内链样式使用方式</h1>
<p>内链样式使用方式</p>
</body>
</html>
(3)引入式样式表:他的使用方式是用<link rel="stylesheet" type="text/css" href="css文件地址">进行外部css样式文件引入
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三种使用方式</title>
<link rel="stylesheet" type="text/css" href="s.css">
</head>
<body>
<h1 style="color: white">内链样式使用方式</h1>
<p>内链样式使用方式</p>
</body>
</html>
s.css
body{
background-color: green;
}
h1{
color: white;
background-color: gray;
}
p{
color: red;
background-color: yellow;
}
