HTML三种样式

来源：互联网发布：腾讯软件下载官方网站编辑：程序博客网时间：2024/05/05 01:31

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>

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

0 0

HTML三种样式

html中的三种样式：

html中`的`三种样式：