HTML三种样式

最新推荐文章于 2022-09-30 15:04:01 发布

chirsen_bbb

最新推荐文章于 2022-09-30 15:04:01 发布

阅读量1.4k

点赞数 1

分类专栏：笔记文章标签： span

本文链接：https://blog.csdn.net/u011507024/article/details/43564367

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html中`的`三种样式：

1、外部式样式：
存在多页面的时候，统一风格使用

    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>

样例：
在.html文档中：

<html>
<head> <link rel="stylesheet" type="text/css" href="D:/Mystyle.css">
<body>

<p class="tip">XXX<span>提示</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>

</body>
</html>

在Mystyle.css文档中：

p.tip span { font-weight:bold;
color:#ff9955;}

效果为：
这里写图片描述
2、内部式样式：
单个文件需要特别样式时

<head>
    <style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
    </style>
    </head>

样例：

<html>
<head>
<style type="text/css">
  p.tip span { font-weight:bold;
           color:#ff9955;}
</style>
</head>
<body>

<p class="tip">XXX<span>提示</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>
<p class="tip">XXX<span>继续</span>XXX</p>

</body>
</html>

效果：
这里写图片描述
3、内联样式：

个别元素需要特别样式时

<p style="color: red; margin-left: 20px">
    This is a paragraph
    </p>

<html>
<head></head>
<body>

<p style="font-weight:bold; color:#ff9955;">XXX<span>提示</span>XXX</p>
<p style="font-weight:bold; color:#ff9955;">XXX<span>继续</span>XXX</p>
<p style="font-weight:bold; color:#ff9955;">XXX<span>继续</span>XXX</p>
<p style="font-weight:bold; color:#ff9955;">XXX<span>继续</span>XXX</p>

</body>
</html>

这里写图片描述
可见三种情况效果一样，但是使用场合不同

chirsen_bbb

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML三种样式

html中的三种样式：1、外部式样式：存在多页面的时候，统一风格使用 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>样例：在.html文档中：<html><head> <link rel="stylesheet" type="text/css" href
复制链接

扫一扫