css使用

作者：@kuaiquxie
作者的github：https://github.com/bitebita
本文为作者原创，如需转载，请注明出处：https://www.cnblogs.com/dzwj/p/15861027.html

 

外部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 @   kuaiquxie  阅读(39)  评论(0)  编辑  收藏  举报
相关博文：
·  css选择器
·  jQuery-css样式
·  CSS使用
·  2025.1.24CSS 基础
·  CSS简介
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示