CSS3-03 样式 2_html/css_WEB-ITnose

前言

在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！大家都知道 HTML 元素是由标签（如：<p>）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。

HTML 样式

概述

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>

效果图

计算机输出

样式标签

：计算机代码

<code>    while (true) { }</code>

：键盘码

<kbd>    control + e</kbd>

：计算机代码样本

<samp>Hello World!</samp>

：变量

<var>variable</var>

：预格式文本     <p class="sycode">      <pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false">    I        like            HTML

示例

代码

            
var <var>variable</var> = true;if (<var>variable</var>) {    print("Hello World!");} else {    // do nothing}
程序运行结果: <samp>Hello World!</samp>