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教程