CSS3-03 样式 2_html/css_WEB-ITnose-html教程-PHP中文网

CSS3-03 样式 2_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:18:50

原创

1287人浏览过

前言

在上一篇的博客中，阐述了 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><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</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>

登录后复制

效果图

计算机输出

样式标签

：计算机代码

    while (true) { }

登录后复制

：键盘码

<kbd>    control + e</kbd>

登录后复制

：计算机代码样本

<samp>Hello World!</samp>

登录后复制

：变量

<var>variable</var>

登录后复制

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

登录后复制

示例

代码

        CSS 样式 2    var <var>variable</var> = true;if (<var>variable</var>) {    print("Hello World!");} else {    // do nothing}
登录后复制
程序运行结果: <samp>Hello World!</samp>