CSS實現文字豎向排版的簡單方法

SS實現文字豎向排版的簡單方法，bootstrap4文字豎向排版代碼：

主要用到的CSS屬性：writing-mode: vertical-lr;及writing-mode: tb-lr;/*IE瀏覽器*/，英文字符加上這句：word-wrap: break-word;/*英文的時候需要加上這句，自動換行*/

效果圖：

代碼如下：

德經第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導致自身的混亂。結合我親身經歷，更容易理解這句話的意思。

有一段時間，我們天都學習10個小時，這種情況一直持續了大半個月。可是效果卻幾乎等于沒有，這段時間內每天都會有大量的信息涌入你的腦袋，在學的那一刻，你感覺你已經完全會了。但是過個一兩天，你卻完全不記得你到底學過些什么，像失憶了似的。

艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個緩慢的過程，想要對某一知識記憶深刻，就需要不斷地重復練習。直到隨時隨地拿來就用的地步，你就再也不會忘記了。

為什么說少則得，多則惑呢？每天只學一點，練習好幾遍，把這個知識點刻到腦子里面去，這樣日積月累你會發現你已經學會了很多。每天學習很多知識點，很少時間去練習，過段時間你會發現你什么都沒有記住，到用的時候根本想不起來，還得返回頭再去學習一遍。徒增學習成本，也就是多則惑的道理。

好了言歸正傳，今天我們來學習html中的表格和表單，這兩個可不是一個東西哦。

表格：excel表格知道吧，橫行豎起列的那種表格。看圖：

上面是一個9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標簽來實現一個5行3列的表格。

上圖中table標簽表示這是一個表格，tr表示一行，圖中我寫了五行，都用紅圈標注了出來，每個tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。

在瀏覽器中的效果：

和我們想象中的樣子好像有點不一樣，沒有格子，這是因為我們沒有設置的緣故，table標簽允許你通過border屬性來設置邊框（也就是格子），那我們來給它設置一個邊框吧。

通過給table標簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：

還是有點別扭，我腦海里面的表格應該是和艾賓浩斯記憶曲線的那張表格一樣才對啊，現在的這個表格有點鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關羽”、“男”之前有距離，如何把這個距離去掉呢？我們可以通過table標簽的cellspacing屬性把距離去掉，試一下：

加了cellspacing="0" 屬性后，瀏覽器中的效果如下：

當然了， table標簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們設置成20試一下：

瀏覽器中的效果：

cellspacing屬性的值應該取多少，按照你的需求來設置就好了。

現在還有一個問題，我覺得每個單元格的太小了，也就是“關羽”這個格子的邊框和“關羽”這兩個字貼得太緊了，一點都不好看，我們可以讓他稍微有點距離，那樣看起來應該比較美觀一點。這個需求可以通過table標簽的cellpadding屬性來設置，其實也就是設置內邊距，關于內邊距的概念我們在《踏上編程之路的必經之路之html篇三》中講解過，如果忘記的同學可以返回去看一下。

我們將cellpadding設置為10，在瀏覽器中的效果如下：

現在整個表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標簽允許你調整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標簽的width屬性來調整表格的寬度：

調整表格的寬度為600，瀏覽器中的效果如下：

表格中的文字現在是左對齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對齊（右對齊），文字的對齊方式可以通過tr標簽的align屬性來控制：

注意文字對齊方式，是給tr標簽（也就是table的行標簽）設置了align屬性，不是給table，不要寫錯地方了。align="center"就是讓文字居中，align="right"就是讓文字右對齊，如果不寫，默認是左對齊。

設置了文字對齊方式后，瀏覽器中的效果如下：

最我們整體調整一下，我需要有邊框（border="1"，設置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設置成其它值就是有距離），內邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統一都是居中對齊（table標簽的tr標簽上面設置align="center"）,整體設置后的代碼如下：

瀏覽器中的效果如下：

其實table標簽也有一個align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對齊，有興趣的同學可以自己嘗試一下。

最后提醒一句，代碼中的各種標簽和標簽的屬性還有單雙引號，都必須是英文的，如果你寫成中文的，是不正確的。

舉個例子：

良好的行動力，是成功的一半，動手練起來。

家好，我是IT共享者，人稱皮皮。這篇文章我們來講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如"＃FF0000"。
一個RGB值 - "RGB（255,0,0）"。
顏色的名稱 - 如"紅"。

一個網頁的文本顏色是指在主體內的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：對于W3C標準的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對齊方式

文本排列屬性是用來設置文本的水平對齊方式。

文本可居中或對齊到左或右,兩端對齊。

當text-align設置為"justify"，每一行被展開為寬度相等，左，右外邊距是對齊（如雜志和報紙）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 號</p>
        <p class="main">　從前有個書生，和未婚妻約好在某年某月某日結婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起。　　這時，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個情。但是她最終要報答一生一世的人，是最后那個把她掩埋的人，那人就是他現在的丈夫。書生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修飾

text-decoration 屬性用來設置或刪除文本的裝飾。

從設計的角度看 text-decoration屬性主要是用來刪除鏈接的下劃線：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原來的樣子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下劃線</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以這樣裝飾文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建議強調指出不是鏈接的文本，因為這常常混淆用戶。

3. text-transform文本轉換

text-transform文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。

uppercase:轉換為全部大寫。
lowercase：轉換為全部小寫。
capitalize ：每個單詞的首字母大寫。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本縮進

text-indent文本縮進屬性是用來指定文本的第一行的縮進。

p {text-indent:50px;}

5. letter-spacing 設置字符間距

增加或減少字符之間的空間。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height設置行高

指定在一個段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 設置字間距

增加一個段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 設置元垂直居中

設置文本的垂直對齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 設置文本陰影

設置文本陰影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、總結

本文主要介紹了CSS文本樣式實際應用中應該如何去操作，通過講解文本中對應的屬性去改變文本的表現形式。使用豐富的效果圖的展示，能夠更直觀的看到運行的效果，能夠更好的理解。使用Html語言，代碼結構更佳的清晰，能夠幫助你更好的學習。

在線咨詢

上一篇：成都Html5培訓主要學習什么？
下一篇：HTML+CSS：常用表單按鈕之提交和重置，完整留言表單效果演示

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商