CSS3-03 样式 2

时间  2019-12-14
标签 css3 css 样式 栏目 CSS 繁體版
原文   原文链接

前言

在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。可是总以为，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知你们是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！

你们都知道 HTML 元素是由标签（如：<p>）定义的，而标签是具备语意的，其本省包含着必定的格式。标签指定的 HTML 元素的格式，在这里请容许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。

HTML 样式

  • 概述css

    HTML 元素的重要内容是文本（固然也有图像、音频、视频等）。在 HTML 中内置了不少用来格式化文本的标签，这些标签订义的元素内容具备必定的格式，好比说：加粗、倾斜等。
  • 文本格式化
    • 样式标签

      • <em>：着重文本html

        <p><em>强调文本</em>（&lt;em&gt;标签）</p>

      • <i>：斜体字api

        <p><i>斜体文本</i>（&lt;i&gt;标签）</p>

      • <strong>：加剧语气浏览器

        <p><strong>加剧语气文本</strong>（&lt;strong&gt;标签）</p>

      • <b>：粗体文本ide

        <p><b>粗体文本</b>（&lt;b&gt;标签）</p>

      • <small>：小号字字体

        <p><small>小号字文本</small>（&lt;small&gt;标签）</p>

      • <sup>：上标字url

        <p>上标文本<sup>上标</sup>（&lt;sup&gt;标签）</p>

      • <sub>：下标字spa

        <p>下标文本<sub>下标</sub>（&lt;sub&gt;标签）</p>

      • <ins>：插入字3d

        <p><ins>插入的文本</ins>（&lt;ins&gt;标签）</p>

      • <del>：删除字code

        <p><del>删除的文本文本</del>（&lt;del&gt;标签）</p>

    • 效果图

  • 计算机输出

    • 样式标签
      • <code>：计算机代码
      <code>
    while (true) { }
</code>

      • <kbd>：键盘码

        <kbd>
    control + e
</kbd>

      • <samp>：计算机代码样本

        <samp>Hello World!</samp>

      • <var>：变量

        <var>variable</var>

      • <pre>：预格式文本

        <pre>
    I
        like
            HTML
</pre>
    • 示例

      • 代码

        <!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>
var <var>variable</var> = true;
if (<var>variable</var>) {
    print("Hello World!");
} else {
    // do nothing
}
</pre>
程序运行结果: <samp>Hello World!</samp>
</code>
</div>
</body>
</html>

      • 效果图

  • 引文、引用和标签订义

    • 样式标签

      • <abbr>：缩写

        <abbr title="World Wide Web">WWW</abbr>

      • <address>：地址

        <address>
    中国<br>  
    上海<br>
    浦东新区<br>
    杨高南路 799 号
</address>

      • <bdo>：文字方向

        <bdo dir="rtl">
    direction
</bdo>
<br>
<bdo dir="ltr">
    direction
</bdo>

      • <blockquote>：长的引用

        <blockquote>
    The Capon Lake Whipple Truss Bridge is a historic bridge across the Cacapon River in Capon Lake, West Virginia. 
</blockquote>

      • <q>：短的引用语

        <p>One person said: <q>Real dream is the other shore of reality.</q></p>

      • <cite>：引用、引证

        <p><cite>The blog</cite>, writed by Island, is so useful</p>

      • <dfn>：项目

        <dfn>Difine a new project at here.</dfn>

    • 效果图

CSS 样式

  • 背景

    • 概述

      一个 HTML 元素，可能会有一个背景，这样才会更加突出元素的内容。正所谓，“鲜花还需绿叶衬”。

    • 可设置的背景样式属性

      属性 含义
      background 简写的背景，简写时按照如下顺序
      background-color 背景颜色
      background-image 背景图片
      background-repeat 背景图片是否及如何平铺
      background-attachment 背景图片是否固定或随着其余部分滚动
      background-position 背景图片的其实位置
    • 示例

      • 代码

        body 
{
    /*背景色为 浅灰色*/
    background-color: lightgray;
    /*背景图片的 资源地址*/
    background-image: url("background.png");
    /*背景图片在 x 轴上平铺*/
    background-repeat: repeat-x;
    /*背景图片固定*/
    background-attachment: fixed;
    /*背景图片的其实位置为右上角*/
    background-position: right top;
}

      • 效果

  • 文本

    • 概述

      除了 HTML 标签订义的文本但是外，CSS 还定义了大量的文本样式属性。
    • 可设置的文本样式
      • 基本样式
        • 颜色

          • 语法

            h1 {color: blue;}
          • 颜色值得表示形式
            • 颜色名，如：blue
            • 十六进制数，如：#0000ff
            • rgb 值，如：rgb(0, 0, 255)
        • 字体
          • 做用
            • 定义字体，加粗，大小，文字样式

          • 可设置属性

            属性 含义
            font 字体的简写形式
            font-family 字体系列
            font-style 字体样式
            font-size 字体大小
            font-weight 字体粗细
            font-variant 以小型大写字体或者正常字体显示文本

          • 语法

            .varient {font-variant: small-caps;}
        • 修饰

          • 语法

            a {text-decoration: overline;}

          • 取值及含义

            属性值 含义
            none 标准文本，没有修饰（一般用来去除连接文本的下划线）
            underline 下划线
            line-through 中划线
            overline 中划线
            blink 闪烁文本
            inherit 从父元素那里继承属性值
        • 阴影

          • 语法

            #shadow {text-shadow: 2px 2px orange;}
          • 参数及含义
            • 前两个参数，偏移量（能够为负值）
            • 最后一个参数，颜色值
        • 转换

          • 语法

            #upper {text-transform: uppercase;}

          • 取值及含义

            属性值 含义
            none 默认
            capitalize 每一个单词的首字母大写
            uppercase 所有大写
            lowercase 所有小写
            inherit 从父元素那里继承属性值
        • 缩进

          • 语法

            p {text-indent: 35px;}
        • 对齐方式
          • 水平

            • 语法

              h1 {text-align: center;}

            • 取值及含义

              属性值 含义
              left 靠左对齐
              center 居中
              right 靠右对齐
              justify 两端对齐
              inherit 从父元素那里继承属性值
          • 垂直

            • 语法(主要设置嵌入到文本中的元素基于文本的对其方式)

              img {vertical-align: top;}

            • 取值及含义

              属性值 含义
              baseline 默认。元素放置在父元素的基线上
              top 把元素的顶端与行中最高元素的顶端对齐
              middle 把此元素放置在父元素的中部
              bottom 把元素的顶端与行中最低的元素的顶端对齐
              text-top 把元素的顶端与父元素字体的顶端对齐
              text-bottom 把元素的底端与父元素字体的底端对齐
              super 垂直对齐文本的上标
              sub 垂直对齐文本的下标
              length 长度
              % 使用 "line-height" 属性的百分比值来排列此元素。容许使用负值
              inherit 规定应该从父元素继承 vertical-align 属性的值
        • 文字方向

          • 语法

            #direction {direction: rtl;}
          • 注意
            • 只做用于块级元素，只有块级元素会在其先后添加换行（及占据单独的一行）
      • 其余样式
        • 字符间距

          • 语法

            h1 {letter-spacing: 3px;}
        • 字间距

          • 语法

            p {word-spacing: 10px;}
        • 行高

          • 语法

            div {line-height: 50px;}
        • 空白的处理方式

          • 语法

            #direction {white-space: pre;}

          • 取值及含义

            属性值 含义
            normal 默认。空白会被浏览器忽略
            pre 空白会被浏览器保留。其行为方式相似 HTML 中的 
             标签
            nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
            标签为止
            pre-wrap 保留空白符序列，可是正常地进行换行
            pre-line 合并空白符序列，可是保留换行符
            inherit 规定应该从父元素继承 white-space 属性的值
    • 示例

      • HTML 文档

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 样式 2</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <div>
        <h1>Subject</h1>
        <p><span class="varient">The</span> <span id="shadow">first</span>paragraph.<img src="border.png" alt="图片"></p>
        <hr>
        <p id="direction"><span class="varient">The</span> 
            <span id="upper">second</span>
                                paragraph</p>
        <p>If you want to learn more about HTML, CSS, JavaScript, please click <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">世俗孤岛</a></p>
    </div>
</body>
</html>

      • css 文件

        div {line-height: 50px;}
h1 
{
    color: blue;
    letter-spacing: 3px;
    text-align: center;
}
a {text-decoration: overline;}
p {text-indent: 35px;}
p {word-spacing: 10px;}
img {vertical-align: top;}
#upper {text-transform: uppercase;}
#direction 
{
    direction: rtl;
    white-space: pre;
}
#shadow {text-shadow: 2px 2px orange;}
.varient {font-variant: small-caps;}

      • 效果

后记

写到这里，该 Blog 也该到一段落了。回顾一下在该 Blog 中，主要阐述了 HTML 文档中，文本的格式化公式，包括：HTML 样式和 CSS 样式。再接下来的 Blog 中，会详述其余 HTML 元素的 CSS 样式的设置方式。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程