css使用

 

外部css

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/demo/css/mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

内部css

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

 

多个样式表

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/css/mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>
<p>本文档的样式是外部样式表和内部样式的组合。</p>

</body>
</html>

 

层叠顺序

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/demo/css/mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">

<h1>多重样式会层叠为一</h1>
<p>在此处，本页面的背景色同时由行内 CSS、内部 CSS 或外部 CSS 设置。</p>
<p>请尝试通过删除样式来查看其工作方式（尝试首先删除行内 CSS，然后是内部，最后是外部）。</p>
</body>
</html>

 

posted @ 2022-02-02 23:54  kuaiquxie  阅读(36)  评论(0)  编辑  收藏  举报