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

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

一、文本顏色Color

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

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

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

一個(gè)網(wǎng)頁的文本顏色是指在主體內(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ì)齊方式

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

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

當(dāng)text-align設(shè)置為"justify"，每一行被展開為寬度相等，左，右外邊距是對(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è)書生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起?！　∵@時(shí)，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個(gè)坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書生大悟，病愈。


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


</html>

2. text-decoration文本修飾

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

從設(shè)計(jì)的角度看 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>項(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)檫@常?；煜脩?。

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

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

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

<!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)屬性是用來指定文本的第一行的縮進(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)該如何去操作，通過講解文本中對(duì)應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。

學(xué)習(xí)一門編程語言之前，了解它的特性，帶著對(duì)特性的好奇和疑問去學(xué)習(xí)是最快最好的學(xué)習(xí)方法。就像你知道某個(gè)地方有很多寶藏，帶著藏寶圖去尋找寶藏，你一定會(huì)大有收獲的。

編程語言就是人與計(jì)算機(jī)進(jìn)行溝通的語言，在現(xiàn)實(shí)生活中，見什么人說什么話我們都很清楚，那在與計(jì)算機(jī)溝通的世界中，做什么事用什么編程語言溝通也是同樣的道理，前提就是我們要了解這些編程語言，在你需要選擇的時(shí)候做出正確的判斷，這也正是我寫此篇文章的意義。

什么是 HTML？

HTML的英文全稱是 Hyper Text Marked Language，中文意思為超文本標(biāo)記語言。

什么是超文本標(biāo)記語言？我們先對(duì)超文本標(biāo)記這五個(gè)字進(jìn)行一一的拆分，然后去更好的理解它的意思。在理解超文本時(shí)，我們先來理解一下文本在我們的日常生活中代指的是什么東西?

文本包含了比如說你新建的一個(gè)Word文檔，一個(gè)txt文件，甚至一個(gè)Html文件。這三個(gè)文件有相同的地方，也有不同的地方。

相同的地方在于不論是Word文檔，還是txt文件或者是Html文件，我們都能編寫文本的內(nèi)容。Word文檔的不同在于我們可以在Word文檔中設(shè)置一些超鏈接，放一些圖片等操作。

txt文件就有一定的局限性，比如你放一張圖片或者設(shè)置超鏈接等這些行為都是不行。在Html文件中，可以存放文本、圖片、音頻、視頻等，甚至在網(wǎng)頁中見到的一些很炫酷的小游戲，都可以在Html文件中去編寫。

那接下來解釋下超文本。我們?cè)贖tml文件中編寫代碼，其實(shí)編寫的是超文本。所謂超文本，大家應(yīng)該能聯(lián)想到超，即超出文本，超文本比文本更高一級(jí)，它包含了我們常見的音頻、視頻以及超鏈接等。

這些被我們稱為超文本，在Html文件里面既能存放這些內(nèi)容，也能存放文本內(nèi)容，甚至是文章里的一級(jí)標(biāo)題、二級(jí)標(biāo)題、列表、選項(xiàng)等，都可以通過HTML代碼去編寫，這些內(nèi)容我們就稱為超文本。

那么這些內(nèi)容到底用哪些來去展現(xiàn)或展示呢？標(biāo)記。

什么是標(biāo)記呢？

用百度官網(wǎng)來分析一下“標(biāo)記”，在網(wǎng)頁頁面上存放很多的內(nèi)容，有超鏈接、圖片、輸入框等。我們先看看右上角的新聞字樣，這是一個(gè)超鏈接，我們看下源碼，打開后的樣子是這樣的：

我們把藍(lán)色的新聞部分，也就是我用紅框標(biāo)記的部分復(fù)制一下，其他代碼刪除：

“新聞”被左邊和右邊的“a”包裹起來了，這就構(gòu)成了超鏈接，這就像我們常見的書名號(hào)。如果我們單是輸出紅樓夢(mèng)字樣，就是一個(gè)文本，但如果用《》書名號(hào)包裹起來，《紅樓夢(mèng)》，大家都能知道這是一本書。

把包裹在“新聞”兩邊的a標(biāo)簽對(duì)應(yīng)包裹在紅樓夢(mèng)兩邊的書名號(hào)來看很類似。用書名號(hào)這個(gè)標(biāo)記把紅樓夢(mèng)給包裹起來，就叫做書名，同理，用帶尖括號(hào)的a這個(gè)標(biāo)記把新聞這個(gè)文本內(nèi)容給包裹起來，在網(wǎng)頁中稱為超鏈接，這對(duì)帶尖括號(hào)的a就叫做標(biāo)記。

標(biāo)記是用HTML自己的語法規(guī)則把文本內(nèi)容給包裹起來，這就叫做標(biāo)記。這種標(biāo)記的書寫也非常簡(jiǎn)單，包裹在文本左邊的叫開始標(biāo)記，包裹在文本右邊的叫結(jié)束標(biāo)記。我們看到的網(wǎng)頁中顯示的一級(jí)標(biāo)題、二級(jí)標(biāo)題、超鏈接、圖片、音頻等內(nèi)容其實(shí)學(xué)習(xí)它們所對(duì)應(yīng)的標(biāo)記就可以了。

HTML的歷史發(fā)展過程

接著我們來看下HTML從最原始到現(xiàn)在至今整個(gè)HTML語言的歷史發(fā)展過程。

HTML 1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布,由此超文本標(biāo)記語言第一版誕生。
HTML 2.0：1995年1 1月作為RFC 1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí)。
HTML 3.2：1997年1月14日，HTML3.2版本誕生，成為W3C的推薦標(biāo)準(zhǔn)。
HTML 4.0：1997年12月18日，HTML4.0版本誕生，由此成為了W3C的推薦標(biāo)準(zhǔn)。
HTML 4.01（微小改進(jìn)）：1999年12月24日，HTML4.01版本誕生，成為W3C的推薦標(biāo)準(zhǔn)。
HTML 5：2014年10月28日，HTML5版本誕生，H5成為W3C推薦的標(biāo)準(zhǔn)。

HTML5的誕生，標(biāo)記著互聯(lián)網(wǎng)時(shí)代的發(fā)展。比如在HTML5里面誕生的音頻、視頻、圖像、動(dòng)畫等都做了新的標(biāo)準(zhǔn)，它對(duì)于瀏覽器的兼容也是得到了一定的處理，由此可見，HTML的整個(gè)歷史發(fā)展目前為止我們所使用的版本主要是99年誕生的HTML 4.01以及2014年誕生的HTML5。

HTML的應(yīng)用

時(shí)代在進(jìn)步，科技在發(fā)展，這個(gè)超文本標(biāo)記語言從HTML1.0版本發(fā)展到如今的HTML5版本，已經(jīng)有了極大的改善。

在以前的HTML版本中，常用的是對(duì)文本的編輯、超鏈接、圖片等，其用途很廣泛，許多公司用來創(chuàng)建和發(fā)布消息，比如布告、技術(shù)手冊(cè)、各種信函等，都能用它來描述。

HTML是一門嚴(yán)謹(jǐn)?shù)木幊陶Z言，有組織性、模塊化、規(guī)范化的。不過對(duì)于開發(fā)者而言，不同瀏覽器HTML的兼容性是考慮的問題。隨著HTML5的誕生，我們迎來了一個(gè)新的網(wǎng)絡(luò)世紀(jì)，各種動(dòng)畫、音頻、視頻、圖像等炫酷的東西都可以做。還有各種小程序、小游戲以及App的開發(fā)應(yīng)用數(shù)不勝數(shù)，其兼容性也得到了很大的改善，這意味著對(duì)前端的需求以及重視程度都有了極大的改變。

HTML是前端很重要的一環(huán)，我們學(xué)好它才能在前端大軍中齊頭并進(jìn)，在各種應(yīng)用小程序的使用中游刃有余，未來的美好生活就掌握在你的手中。

【END】

TML（超文本標(biāo)記語言）中的元素可以分為兩類：塊級(jí)元素和內(nèi)聯(lián)元素。塊級(jí)元素會(huì)自動(dòng)占據(jù)一行，并且可以設(shè)置寬度和高度。內(nèi)聯(lián)元素不會(huì)自動(dòng)占據(jù)一行，而是根據(jù)文本內(nèi)容的長(zhǎng)度自動(dòng)調(diào)整寬度。塊級(jí)元素可以包含其他元素，包括文本、圖像、鏈接等。內(nèi)聯(lián)元素通常不包含其他元素。

1. 塊級(jí)元素具有以下特點(diǎn)：

塊級(jí)元素會(huì)自動(dòng)占據(jù)一行，并且可以設(shè)置寬度和高度。
塊級(jí)元素可以包含其他元素，包括文本、圖像、鏈接等。
塊級(jí)元素可以設(shè)置背景顏色、邊框、字體等樣式屬性。

以下是一些常見的塊級(jí)元素：

<div>：用于定義一個(gè)塊級(jí)容器，可以包含其他元素。
<p>：用于定義段落，通常包含文本內(nèi)容。
<h1>到<h6>：用于定義標(biāo)題，從h1到h6分別表示從大到小的標(biāo)題級(jí)別。
<table>：用于定義表格，包含多個(gè)行和列。
<form>：用于定義表單，包含輸入框、按鈕等元素。
<ul>和<ol>：用于定義無序列表和有序列表，包含多個(gè)列表項(xiàng)。
<img>：用于定義圖像，用于在網(wǎng)頁中顯示圖片。

這些塊級(jí)元素可以通過設(shè)置 CSS 樣式屬性來實(shí)現(xiàn)不同的布局和樣式效果，例如設(shè)置背景顏色、邊框、字體、大小、顏色等。同時(shí)，塊級(jí)元素還可以通過設(shè)置 CSS 定位屬性來實(shí)現(xiàn)定位和浮動(dòng)效果，例如設(shè)置position: relative;、float: left;

2. 內(nèi)聯(lián)元素具有以下特點(diǎn)：

內(nèi)聯(lián)元素不會(huì)自動(dòng)占據(jù)一行，而是根據(jù)文本內(nèi)容的長(zhǎng)度自動(dòng)調(diào)整寬度。
內(nèi)聯(lián)元素可以設(shè)置字體、顏色、大小等樣式屬性。
內(nèi)聯(lián)元素通常不包含其他元素，而是直接嵌入文本內(nèi)容中。

以下是一些常見的內(nèi)聯(lián)元素：

<a>：用于定義超鏈接，通常用于鏈接到其他網(wǎng)頁或文件。
<em>：用于定義強(qiáng)調(diào)文本，通常呈現(xiàn)為斜體效果。
<strong>：用于定義加粗文本，通常呈現(xiàn)為粗體效果。
<span>：用于定義自定義樣式的文本，通常用于應(yīng)用特定的 CSS 樣式。
<img>：用于定義圖像，通常用于在網(wǎng)頁中顯示圖片。

這些內(nèi)聯(lián)元素可以通過設(shè)置 CSS 樣式屬性來實(shí)現(xiàn)不同的樣式效果，例如設(shè)置字體、顏色、大小等。同時(shí)，內(nèi)聯(lián)元素還可以通過設(shè)置 CSS 定位屬性來實(shí)現(xiàn)定位和浮動(dòng)效果，例如設(shè)置position: relative;、float: left。

<img> 元素在 HTML 中既可以是塊元素，也可以是內(nèi)聯(lián)元素，這取決于它的 display 屬性的值。

默認(rèn)情況下，<img> 元素是內(nèi)聯(lián)元素，它會(huì)根據(jù)文本的流動(dòng)方式進(jìn)行布局。這意味著如果在一行中放置了多個(gè) <img> 元素，它們會(huì)在一行中排列，并且不會(huì)自動(dòng)換行。

但是，如果將 <img> 元素的 display 屬性設(shè)置為 block，那么它就會(huì)成為塊元素。塊元素會(huì)占據(jù)一行，并且可以設(shè)置寬度和高度。在這種情況下，多個(gè) <img> 元素會(huì)自動(dòng)換行，并且可以通過設(shè)置 margin 屬性來調(diào)整它們之間的間距。

html

<img src="image.jpg" alt="圖片描述" style="display: block;">

在上面的示例中，<img> 元素的 display 屬性被設(shè)置為 block，這會(huì)使它成為一個(gè)塊元素。你可以根據(jù)需要調(diào)整圖片的寬度和高度，以及 margin 屬性來控制圖片之間的間距。

在線咨詢

上一篇：在建網(wǎng)站的中常見的五種背景圖片的使用方法
下一篇：精選13個(gè)HTML5學(xué)習(xí)必備網(wǎng)站

您的項(xiàng)目需求

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

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