文章
专题
学习
下载
问答
编程词典
手游
PHP
大前端
登录
简体中文(ZH-CN)
English(EN)
繁体中文(ZH-TW)
日本語(JA)
한국어(KO)
Melayu(MS)
Français(FR)
Deutsch(DE)
HTML 开发手册
收藏(325)
分享
目录
搜索
书签
HTML 教程- (HTML5 标准)
HTML 教程
HTML 简介
HTML 编辑器
HTML 基础- 4个实例
HTML 元素
HTML 属性
HTML 标题
HTML 段落
HTML 文本格式化
HTML 链接
HTML 头部
HTMLCSS
HTML 图像
HTML 表格
HTML 列表
HTML 区块
HTML 布局
HTML 表单
HTML 框架
HTML 颜色
HTML 颜色名
HTML 颜色值
HTML脚本
HTML 字符实体
HTML 网址
HTML 速查列表
HTML 总结
HTML-XHTML
HTML 媒体
HTML 多媒体
HTML 插件
HTML 音频(Audio)
HTML 视频（Videos）
HTML 标签
<一>
<缩写>
<缩写词>
<地址>
<小程序>
<区域>
<文章>
<旁白>
<音频>
<基地>
<基本字体>
<大>
<块引用>
<正文>
<按钮>
<画布>
<标题>
<中心>
<引用>
<代码>
<栏>
<命令>
<数据列表>
<删除>
<详情>
<对话框>
<目录>
<嵌入>
<字段集>
<图标题>
<图>
<字体>
<页脚>
<表格>
<框架>
<框架集>
<头>
<标题>
-
<小时>
<我>
</a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-img.html"><图片></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-input.html"><输入></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ins.html"><ins></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-kbd.html"><KBD></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-keygen.html"><注册机></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-label.html"><标签></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-legend.html"><图例></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-li.html"><li></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-link.html"><链接></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-map.html"><地图></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-mark.html"><标记></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-menu.html"><菜单></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-meta.html"><元></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-meter.html"><米></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-nav.html"><导航></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-noframes.html"><无帧></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-noscript.html"><无脚本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-object.html"><对象></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ol.html"><ol></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-optgroup.html"><选择组></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-option.html"><选项></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-output.html"><输出></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-p.html"><p></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-param.html"><参数></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-pre.html"><前></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-html.html"><html></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-progress.html"><进度></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-q.html"><q></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-rp.html"><rp></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-rt.html"><rt></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ruby.html"><红宝石></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-s.html"><s></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-samp.html"><样本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-script.html"><脚本></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-section.html"><部分></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-select.html"><选择></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-small.html"><小></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-source.html"><来源></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-span.html"><跨度></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-strike.html"><罢工></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-strong.html"><强></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-style.html"><风格></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-sub.html"><子></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-summary.html"><摘要></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-sup.html"><sup></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-table.html"><表></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tbody.html"><正文></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-td.html"><td></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-textarea.html"><文本区域></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tfoot.html"><t脚></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-th.html"><第></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-thead.html"><标题></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-time.html"><时间></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-title.html"><标题></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tr.html"><tr></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-track.html"><曲目></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-tt.html"><TT></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-u.html"><u></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-ul.html"><ul></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-var.html"><曾经></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-video.html"><视频></a> </dd> <dd> <i class="phpcn-icon phpcn-icon-icon_shiyongwendang"></i> <a href="//m.sbmmt.com/zh/tags/tag-wbr.html"><br></a> </dd> </dl></li> </ul> </div> </div> </div> <div class="content"> <article class="phpcn-col-md9"> <div class="c-site"> <div class="c-site-a"> <a href="//m.sbmmt.com/zh/course/27.html">HTML 开发手册</a> <span>/</span>HTML CSS </div> </div> <div class="article-intro"> <h1 class="manual_con_title">HTML CSS</h1> <p class="intro">HTML 样式- CSS CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式. Look! Styles and colors Manipulate Text Colors, Boxes and more... 尝试一下 » 尝试一下 - 实例 HTML使用样式</p> <hr> <div class="article-intro"> <h1>HTML<span class="color_h1">样式- CSS</span></h1> <hr> <p class="intro">CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.</p> <div style="position:relative;"> <div style="margin-top:30px;width:360px;height:130px;padding:20px;border-radius:10px;border:10px solid #EE872A;font-size:120%;"> <h1>Look! Styles and colors</h1> <div style="letter-spacing:12px;font-size:15px;position:relative;left:25px;top:10px;"> Manipulate Text </div> <div style="color:#40B3DF;letter-spacing:12px;font-size:15px;position:relative;left:25px;top:20px;"> Colors, <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> <div style="color:#000000;letter-spacing:-1px;font-size:15px;position:relative;top:15px;"> and more... </div> </div> </div> <p><a href="//m.sbmmt.com/code/30220.html" target="_self"><strong>尝试一下</strong></a></p> <p><span style="font-size: 1.8em; line-height: 1.8em; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft Yahei", sans-serif;">尝试一下 - 实例</span></p> <p>本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>本例演示如何使用样式属性做一个没有下划线的链接。<br>如何使用 style 属性制作一个没有下划线的链接。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <a href="//m.sbmmt.com/" style="text-decoration:none;">访问 php.cn!</a> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>链接到一个外部样式表<br>本例演示如何标签链接到一个外部样式表。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <hr> <h2>如何使用CSS</h2> <p>CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.</p> <p>CSS 可以通过以下方式添加到HTML中:</p> <ul class=" list-paddingleft-2"> <li><p>内联样式- 在HTML元素中使用"style"<strong>属性</strong></p></li> <li><p>内部样式表 -在HTML文档头部 <head> 区域使用<style><strong>元素</strong>来包含CSS</p></li> <li><p>外部引用 - 使用外部 CSS<strong>文件</strong></p></li> </ul> <p>最好的方式是通过外部引用CSS文件.</p> <p>在本站的HTML教程中我们使用了内联CSS样式来介绍实例，这是为了简化的例子，也使得你能更容易在线编辑代码并在线运行实例。</p> <p>你可以通过本站的<a href="//m.sbmmt.com/course/list/12.html" target="_self">CSS教程</a>CSS 教程学习更多的CSS知识.</p> <hr> <h2>内联样式</h2> <p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><p style="color:blue;margin-left:20px;">This is a paragraph.</p></pre> </div> </div> <p>学习更多样式，请访问<a href="//m.sbmmt.com/course/list/12.html" target="_self">CSS 教程.</a></p> <hr> <h2>HTML样式实例 - 背景颜色</h2> <p>背景色属性（background-color）定义一个元素的背景颜色：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>早期背景色属性（background-color）是使用 bgcolor 属性定义。</p> <hr> <h2>HTML 样式实例 - 字体, 字体颜色 ，字体大小</h2> <p>我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1 style="font-family:verdana;">一个标题</h1> <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。</p> <hr> <h2>HTML 样式实例 - 文本对齐方式</h2> <p>使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <h1 style="text-align:center;">居中对齐的标题</h1> <p>这是一个段落。</p> </body> </html></pre> </div> <br> <a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a> <p>点击 "运行实例" 按钮查看在线实例</p> </div> <p>文本对齐属性 text-align取代了旧标签 <center> 。</p> <hr> <h2>内部样式表</h2> <p>当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div></pre> </div> </div> <hr> <h2>外部样式表</h2> <p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p> <div class="code notranslate"> <div> <pre class="brush:html;toolbar:false"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div></pre> </div> </div> <hr> <h2>HTML 样式标签</h2> <table class="reference notranslate"> <tbody> <tr class="firstRow"> <th align="left">标签</th> <th align="left">描述</th> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/style.html" target="_blank"><style></a></td> <td>定义文本样式</td> </tr> <tr> <td style="word-break: break-all;"><a href="//m.sbmmt.com/dic/html/link.html" target="_blank"><link></a></td> <td>定义资源引用地址</td> </tr> </tbody> </table> <br> <hr> <h2>已弃用的标签和属性</h2> <p>在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。</p> <p>不建议使用的标签有: <font>, <center>, <strike></p> <p>不建议使用的属性: color 和 bgcolor.</p> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/zh/html/html-head.html" rel="prev">HTML 头部</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/zh/html/html-images.html" rel="next">HTML 图像</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>教程导航</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" target="_blank" title="大前端">大前端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="超文本标记语言">超文本标记语言</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="JavaScript">JavaScript</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Vue.js">Vue.js</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="反应">反应</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="AngularJS">AngularJS</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="Node.js">Node.js</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="阿贾克斯">阿贾克斯</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="引导程序">引导程序</a> <a href="//m.sbmmt.com/zh/course/list/1/type/3.html" title="基础">基础</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" target="_blank" title="JavaScript">JavaScript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="高图表">高图表</a> <a href="//m.sbmmt.com/zh/course/list/2/type/3.html" title="地图应用程序接口">地图应用程序接口</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" target="_blank" title="后端开发">后端开发</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ThinkPHP">ThinkPHP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="拉维尔">拉维尔</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="去">去</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="爪哇">爪哇</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="C＃">C＃</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="联合应用程序">联合应用程序</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="姜戈">姜戈</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="网络平台">网络平台</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="ASP">ASP</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="红宝石">红宝石</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="珀尔">珀尔</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="服务程序">服务程序</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="卢阿">卢阿</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="斯卡拉">斯卡拉</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="应用机器学习">应用机器学习</a> <a href="//m.sbmmt.com/zh/course/list/3/type/3.html" title="VB脚本">VB脚本</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" target="_blank" title="数据库">数据库</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="雷迪斯">雷迪斯</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="甲骨文">甲骨文</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="内存缓存">内存缓存</a> <a href="//m.sbmmt.com/zh/course/list/4/type/3.html" title="SQL服务器">SQL服务器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" target="_blank" title="移动端">移动端</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="小程序">小程序</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="统一应用程序">统一应用程序</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="扑">扑</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="安卓">安卓</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="iOS系统">iOS系统</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="迅速">迅速</a> <a href="//m.sbmmt.com/zh/course/list/5/type/3.html" title="其它">其它</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" target="_blank" title="运维开发">运维开发</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="码头工人">码头工人</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="Php学习">Php学习</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="git">git</a> <a href="//m.sbmmt.com/zh/course/list/9/type/3.html" title="其它工具">其它工具</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" target="_blank" title="UI设计">UI设计</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="阿胡尔">阿胡尔</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="多维控制">多维控制</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="网页表格">网页表格</a> <a href="//m.sbmmt.com/zh/course/list/7/type/3.html" title="聚苯乙烯">聚苯乙烯</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" target="_blank" title="计算机基础">计算机基础</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="设计模式">设计模式</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="正则表达式">正则表达式</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="HTTP协议">HTTP协议</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站建设指南">网站建设指南</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="浏览器信息">浏览器信息</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="网站主机">网站主机</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="万维网联盟">万维网联盟</a> <a href="//m.sbmmt.com/zh/course/list/10/type/3.html" title="基本代码">基本代码</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML文档对象模型">XML文档对象模型</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X路径">X路径</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X查询">X查询</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="星联">星联</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="X指针">X指针</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XML模式">XML模式</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/zh/course/list/6/type/3.html" title="静止无功发生器">静止无功发生器</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" target="_blank" title="网页服务">网页服务</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="网页服务">网页服务</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="肥皂">肥皂</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/zh/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="提交">提交</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>
