Home >Web Front-end >HTML Tutorial >CSS3-03 样式 2_html/css_WEB-ITnose

CSS3-03 样式 2_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:18:501201browse

前言

在上一篇的博客中,阐述了 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="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>

  • Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn