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

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

一、文本顏色Color

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

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

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

一個網(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>

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

二、屬性

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

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

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

當(dāng)text-align設(shè)置為"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">　從前有個書生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書生受此打擊， 一病不起。　　這時，路過一游方僧人，從懷里摸出一面鏡子叫書生看。書生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過一人， 看一眼，搖搖頭，走了。又路過一人，將衣服脫下，給女尸蓋上，走了。再路過一人，過去，挖個坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個路過的人，曾給過他一件衣服。她今生和你相戀，只為還你一個情。但是她最終要報答一生一世的人，是最后那個把她掩埋的人，那人就是他現(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)換屬性是用來指定在一個文本中的大寫和小寫字母。

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

<!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è)置行高

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

<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è)置字間距

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

<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è)置文本的垂直對齊圖像。

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

TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因?yàn)樗荒軇?chuàng)建動態(tài)功能。

HTML有很多用例，即：

網(wǎng)頁開發(fā)。開發(fā)人員使用 HTML 代碼來設(shè)計(jì)瀏覽器如何顯示網(wǎng)頁元素，例如文本、超鏈接和媒體文件。
互聯(lián)網(wǎng)導(dǎo)航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關(guān)頁面和網(wǎng)站之間導(dǎo)航和插入鏈接。
網(wǎng)絡(luò)文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
還值得注意的是，HTML 現(xiàn)在被視為官方 Web 標(biāo)準(zhǔn)。萬維網(wǎng)聯(lián)盟 (W3C)維護(hù)和開發(fā) HTML 規(guī)范，同時提供定期更新。

本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點(diǎn)以及它與 CSS 和 JavaScript 的關(guān)系。

什么是 HTML？

HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計(jì)算機(jī)語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。

HTML 是如何工作的

在國內(nèi)的網(wǎng)站上找了一圈，這應(yīng)該是介紹歷史最細(xì)致的，長按保存手機(jī)里翻譯

html文件

平均每個網(wǎng)站包含幾個不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨(dú)的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴(kuò)展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。

元素的三個主要部分是：

開始標(biāo)簽 - 用于說明元素開始生效的位置。標(biāo)簽用左尖括號和右尖括號包裹。例如，使用開始標(biāo)簽 <p> 創(chuàng)建一個段落。
內(nèi)容——這是其他用戶看到的輸出。
結(jié)束標(biāo)簽 - 與開始標(biāo)簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結(jié)束一個段落。

這三個部分的組合將創(chuàng)建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關(guān)鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進(jìn)一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實(shí)現(xiàn)相同的樣式，請?jiān)诿總€開始標(biāo)記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數(shù)元素都有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因?yàn)樗鼈儧]有內(nèi)容：

< img src= "/" alt= "圖像" >

這個圖像標(biāo)簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標(biāo)簽和 HTML 元素

目前，有 142 個 HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。

第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個主要元素——塊級元素和內(nèi)聯(lián)元素。

塊級元素

塊級元素占據(jù)頁面的整個寬度。它總是在文檔中開始一個新行。例如，標(biāo)題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標(biāo)簽：

<html>標(biāo)簽是定義整個 HTML 文檔的根元素。
<head> 標(biāo)簽保存頁面標(biāo)題和字符集等元信息。
<body>標(biāo)簽包含了頁面上出現(xiàn)的所有內(nèi)容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標(biāo)簽包括：

標(biāo)題標(biāo)簽 - 這些范圍從 <h1> 到 <h6>，其中標(biāo)題 h1 的大小最大，當(dāng)它們向上移動到 h6 時變得越來越小。
段落標(biāo)簽——全部使用 <p> 標(biāo)簽括起來。
列表標(biāo)簽——有不同的變體。<ol> 標(biāo)簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標(biāo)記將各個列表項(xiàng)括起來。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強(qiáng)調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。

例如，一個 <strong> 標(biāo)簽會以粗體呈現(xiàn)一個元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：

<a href="https://www.icodingdeu.com/" >點(diǎn)我！</a>

HTML 演變——HTML 和 HTML5 有什么區(qū)別？

HTML 的第一個版本由 18 個標(biāo)簽組成。從那時起，每個新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點(diǎn)和缺點(diǎn)

就像任何其他計(jì)算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

初學(xué)者友好: HTML 具有干凈且一致的標(biāo)記，以及較淺的學(xué)習(xí)曲線。
支持領(lǐng)域廣：該語言被廣泛使用，擁有大量資源和龐大的社區(qū)。
無障礙：它是開源的并且完全免費(fèi)。HTML 在所有 Web 瀏覽器中本機(jī)運(yùn)行。
靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計(jì)算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：

缺點(diǎn)：

靜止的 該語言主要用于靜態(tài)網(wǎng)頁。對于動態(tài)功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
單獨(dú)的 HTML 頁面用戶必須為 HTML 創(chuàng)建單獨(dú)的網(wǎng)頁，即使元素相同。
瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現(xiàn)較新的標(biāo)簽。

HTML、CSS 和 Javascript 是如何相關(guān)的

HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。

CSS 負(fù)責(zé)樣式，例如背景、顏色、布局、間距和動畫。
JavaScript 添加了動態(tài)功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發(fā)的基礎(chǔ)。

結(jié)論

HTML 是 Internet 上的主要標(biāo)記語言。每個 HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。

HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請?jiān)谠u論部分告訴我們。

、網(wǎng)頁

1.網(wǎng)站是網(wǎng)頁的集合，網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，是由圖片、鏈接、文字、聲音、視頻等元素組成的HTML格式文件。

2.HTML是超文本標(biāo)記語言(Hyper Text Markup Language),是用來描述網(wǎng)頁的一種標(biāo)記語言，而不是編程語言。超文本是指可以加入圖片、聲音、動畫、多媒體等，超越了文本限制；也可以從一個文件跳轉(zhuǎn)到另一個文件，是超級鏈接文本。

3.網(wǎng)頁的生成：前端人員編寫HTML文件，通過瀏覽器打開就能看到網(wǎng)頁。

二、瀏覽器(網(wǎng)頁顯示，運(yùn)行的平臺)

1.常用瀏覽器

IE、Firefox 、Chrome 、Safari 、Opera

2.瀏覽器內(nèi)核(渲染引擎)

讀取網(wǎng)頁內(nèi)容，整理訊息，計(jì)算網(wǎng)頁顯示方式并顯示頁面

三、Web標(biāo)準(zhǔn)

1.Web標(biāo)準(zhǔn)：由W3C組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。(W3C是萬維網(wǎng)聯(lián)盟)

2.Web標(biāo)準(zhǔn)的構(gòu)成

(1) 結(jié)構(gòu)(Structure)：對網(wǎng)頁元素進(jìn)行整理分類(HTML)

(2) 表現(xiàn)(Presentation)：設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式(CSS)

(3) 行為(Behavior)：網(wǎng)頁模型的定義及交互的編寫(JavaScript)

3.為什么需要Web標(biāo)準(zhǔn)？

(1) 瀏覽器不同，顯示頁面或排版有所差異

(2) 寫出的頁面更標(biāo)準(zhǔn)，更統(tǒng)一

(3) 內(nèi)容能被廣泛設(shè)備訪問，更容易被搜索引擎搜索

(4) 降低網(wǎng)站流量費(fèi)用，使網(wǎng)站更易于維護(hù)

(5) 提高頁面瀏覽速度

在線咨詢

上一篇：在PyCharm中如何更好地實(shí)現(xiàn)Python代碼的智能補(bǔ)全
下一篇：HTML基礎(chǔ)操作：圖片顯示

您的項(xiàng)目需求

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

整合營銷服務(wù)商