一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱(chēng)皮皮。這篇文章我們來(lái)講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來(lái)設(shè)置文字的顏色。

顏色是通過(guò)CSS最經(jīng)常的指定：

十六進(jìn)制值 - 如"＃FF0000"。
一個(gè)RGB值 - "RGB（255,0,0）"。
顏色的名稱(chēng) - 如"紅"。

一個(gè)網(wǎng)頁(yè)的文本顏色是指在主體內(nèi)的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</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>

注：對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對(duì)齊方式

文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。

文本可居中或?qū)R到左或右,兩端對(duì)齊。

當(dāng)text-align設(shè)置為"justify"，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。

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


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


</html>

2. text-decoration文本修飾

text-decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text-decoration屬性主要是用來(lái)刪除鏈接的下劃線：

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


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


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


    <body>
        <p>原來(lái)的樣子</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>項(xiàng)目</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>

注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶(hù)。

3. text-transform文本轉(zhuǎn)換

text-transform文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫(xiě)和小寫(xiě)字母。

uppercase:轉(zhuǎn)換為全部大寫(xiě)。
lowercase：轉(zhuǎn)換為全部小寫(xiě)。
capitalize ：每個(gè)單詞的首字母大寫(xiě)。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</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文本縮進(jìn)

text-indent文本縮進(jìn)屬性是用來(lái)指定文本的第一行的縮進(jìn)。

p {text-indent:50px;}

5. letter-spacing 設(shè)置字符間距

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

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

6. line-height設(shè)置行高

指定在一個(gè)段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</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 設(shè)置字間距

增加一個(gè)段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</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 設(shè)置元垂直居中

設(shè)置文本的垂直對(duì)齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</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 設(shè)置文本陰影

設(shè)置文本陰影。

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


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


</html>

三、總結(jié)

本文主要介紹了CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何去操作，通過(guò)講解文本中對(duì)應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語(yǔ)言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。

企業(yè)網(wǎng)站提起HTML5大家都不陌生，作為一個(gè)新興的前端開(kāi)發(fā)語(yǔ)言，HTML5已經(jīng)被大量應(yīng)用到各個(gè)領(lǐng)域，通過(guò)HTML5技術(shù)制作完成的網(wǎng)頁(yè)，可以是單純針對(duì)PC端，也已單獨(dú)適配移動(dòng)端，更能做成時(shí)下最流行的響應(yīng)式網(wǎng)站，也就是可以根據(jù)訪問(wèn)設(shè)備的不同，自動(dòng)適應(yīng)屏幕的寬度來(lái)改變頁(yè)面中的元素樣式，鄭州建站網(wǎng)通過(guò)頁(yè)面中的必要元素標(biāo)簽，為大家講解HTML5網(wǎng)站建設(shè)的解決方案。

第一點(diǎn)：網(wǎng)站頭部設(shè)計(jì)
網(wǎng)站頭部標(biāo)簽的作用是在頁(yè)面的開(kāi)端加入一個(gè)用以介紹整個(gè)頁(yè)面內(nèi)容的信息容器，一般網(wǎng)頁(yè)的名稱(chēng)、簡(jiǎn)介內(nèi)容、關(guān)鍵詞、版權(quán)信息等元素均會(huì)出現(xiàn)了網(wǎng)頁(yè)頭部，技術(shù)層面上，在網(wǎng)頁(yè)頭部還要表示出該頁(yè)面采用的制作語(yǔ)言，例如是HTML5還是較為陳舊的HTML4，目的是讓訪問(wèn)端的瀏覽器使用與之對(duì)應(yīng)的頁(yè)面渲染方式。

第二點(diǎn)：網(wǎng)站導(dǎo)航欄的設(shè)計(jì)
網(wǎng)站的導(dǎo)航元素作用就是承載了對(duì)于訪客的瀏覽指導(dǎo)作用，導(dǎo)航中的內(nèi)容是直接循環(huán)于網(wǎng)站的一級(jí)欄目，當(dāng)然也有特例，在導(dǎo)航中出現(xiàn)的鏈接內(nèi)容只是整個(gè)頁(yè)面中所有鏈接的一小部分，但在設(shè)計(jì)角度上，導(dǎo)航中出現(xiàn)的內(nèi)容應(yīng)是整個(gè)網(wǎng)站中權(quán)重最高的。

第三點(diǎn)：網(wǎng)站的文章內(nèi)容設(shè)計(jì)
網(wǎng)站的文章標(biāo)簽承載了整個(gè)網(wǎng)頁(yè)中最重要的內(nèi)容傳遞作用，頁(yè)面中的主要信息均會(huì)在此展示，當(dāng)然內(nèi)容不僅限于文章，也有可能是圖集、圖文或視頻等，對(duì)于該部分的元素，HTML5也增加可用標(biāo)簽，意指讓頁(yè)面內(nèi)容更加合理，其中就包括下面內(nèi)容中會(huì)提到的部件和側(cè)邊兩個(gè)元素標(biāo)簽。

第四點(diǎn)：網(wǎng)頁(yè)中小部件的使用
與我們更加熟悉的div標(biāo)簽相比，部件標(biāo)簽(section)對(duì)于瀏覽器和搜索引擎來(lái)說(shuō)是具有指導(dǎo)意義的，一般情況下會(huì)用于文章內(nèi)容中的標(biāo)題、編號(hào)等內(nèi)容，最大的好處就是，讓整個(gè)頁(yè)面中的內(nèi)容排列的更加有序，邏輯清晰。

第五點(diǎn)：網(wǎng)頁(yè)布局的側(cè)邊設(shè)計(jì)
側(cè)邊標(biāo)簽中的內(nèi)容并不是整個(gè)頁(yè)面中的主題，而是對(duì)主體內(nèi)容起到補(bǔ)充或解釋說(shuō)明的作用，在HTML5語(yǔ)言廣泛應(yīng)用之前，對(duì)于頁(yè)面中此類(lèi)元素，不同的前端工程師在標(biāo)簽的使用上有著不同的習(xí)慣，基于HTML5開(kāi)發(fā)的樣式中，此類(lèi)情況得到了合理的統(tǒng)一。

第六點(diǎn)：網(wǎng)站底部設(shè)計(jì)
此元素的內(nèi)容是包含更多關(guān)于他的父元素的內(nèi)容。footer置于body之后將可以提供有關(guān)該頁(yè)面的其他的信息內(nèi)容。例如網(wǎng)站建設(shè)著的一些信息，相關(guān)文章的鏈接或者版權(quán)信息等等。此元素也可以被被應(yīng)用于body之中不同的段中，可以給頁(yè)面中不同段一些特定的其他信息。底部元素作用是將那些不適合在body中出現(xiàn)的內(nèi)容展示在頁(yè)面上，例如文章內(nèi)容的版權(quán)信息、頁(yè)面底部的內(nèi)容導(dǎo)航、網(wǎng)站的ICP備案信息以及友情鏈接信息等，在HTML5版本之上，也增加了在底部?jī)?nèi)容中專(zhuān)用的標(biāo)簽，供開(kāi)發(fā)者使用。

TML5的語(yǔ)法變化

HTML5中，語(yǔ)法發(fā)生了很大的變化。或許有人會(huì)抱著異常驚訝和不安地問(wèn)“HTML普及到何種程度”“根本的語(yǔ)法發(fā)生了變化，會(huì)有多大影響”。

只是，HTML5的“語(yǔ)法變化”和其他編程語(yǔ)言所謂的語(yǔ)法變更意義有所不同。為什么這么說(shuō)呢？原因比較特殊，因?yàn)橐郧暗腍TML幾乎沒(méi)有遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器。

現(xiàn)有瀏覽器與規(guī)范背離

HTML的語(yǔ)法是在SGML（Standard Generalized Markup Language）語(yǔ)言的基礎(chǔ)上來(lái)規(guī)定的。但是由于SGML的語(yǔ)法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開(kāi)發(fā)也不太容易，多數(shù)Web瀏覽器不作為SGML解析器運(yùn)行。由此，HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語(yǔ)法”，但實(shí)際情況卻是遵循規(guī)范實(shí)現(xiàn)的Web瀏覽器幾乎不存在。

　規(guī)范向?qū)崿F(xiàn)靠攏

如上所述，HTML5中提高Web瀏覽器間的兼容性是重大的目標(biāo)之一。要確保兼容性，必須消除規(guī)范與實(shí)現(xiàn)的背離。因此HTML5以近似現(xiàn)有的實(shí)現(xiàn)，重新定義了新的HTML語(yǔ)法，使規(guī)范向?qū)崿F(xiàn)靠攏。

由于文檔結(jié)構(gòu)解析的算法也有著詳細(xì)的記載，使得Web瀏覽器開(kāi)發(fā)者可以專(zhuān)注于遵循規(guī)范去進(jìn)行實(shí)現(xiàn)工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已經(jīng)內(nèi)置了遵循HTML5規(guī)范的解析器。IE（Internet Explorer）和Opera也為了能夠提供更好的兼容性實(shí)現(xiàn)而緊鑼密鼓地努力著。

了解更多前端知識(shí)，可以點(diǎn)擊下方鏈接和小編一起學(xué)習(xí)喲~

「鏈接」

在線咨詢(xún)

上一篇：JAVA瀏覽器控件JxBrowser v7.3勁爆來(lái)襲！支持最新MacOS Catalina
下一篇：如何在Spring Boot + Vue項(xiàng)目中集成和使用地圖API

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商