目錄
CSS3-03 样式 2_html/css_WEB-ITnose
前言
在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！大家都知道 HTML 元素是由标签（如：<p>）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。
登入後複製
概述
HTML 元素的重要内容是文本（当然也有图像、音频、视频等）。在 HTML 中内置了很多用来格式化文本的标签，这些标签定义的元素内容具有一定的格式，比如说：加粗、倾斜等。
登入後複製
：着重文本
<p><em>强调文本</em>（<em>标签）</p>
登入後複製
：斜体字
<p><i>斜体文本</i>（<i>标签）</p>
登入後複製
：加重语气
<p><strong>加重语气文本</strong>（<strong>标签）</p>
登入後複製
：粗体文本
<p><b>粗体文本</b>（<b>标签）</p>
登入後複製
：小号字
<p><small>小号字文本</small>（<small>标签）</p>
登入後複製
：上标字
<p>上标文本<sup>上标</sup>（<sup>标签）</p>
登入後複製
：下标字
<p>下标文本<sub>下标</sub>（<sub>标签）</p>
登入後複製
：插入字
<p><ins>插入的文本</ins>（<ins>标签）</p>
登入後複製
：删除字
<p><del>删除的文本文本</del>（<del>标签）</p>
登入後複製
效果图
计算机输出
：计算机代码</li> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><code> while (true) { }</code></pre><div class="contentsignin">登入後複製</div></div> </p> <li><p><kbd>：键盘码</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><kbd> control + e</kbd></pre><div class="contentsignin">登入後複製</div></div> </p></li> <li><p><samp>：计算机代码样本</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><samp>Hello World!</samp></pre><div class="contentsignin">登入後複製</div></div> </p></li> <li><p><var>：变量</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><var>variable</var></pre><div class="contentsignin">登入後複製</div></div> </p></li> <li><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">：预格式文本</p> <p class="sycode"> <pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false"> I like HTML</pre><div class="contentsignin">登入後複製</div></div></pre> </p></li> <li>示例 </li> <li><p>代码</p> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS 样式 2</title> <link rel="stylesheet" href="mystyle.css"></head><body><div><code><pre class="brush:php;toolbar:false">var <var>variable</var> = true;if (<var>variable</var>) { print("Hello World!");} else { // do nothing}</pre><div class="contentsignin">登入後複製</div></div>程序运行结果: <samp>Hello World!</samp>