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

家好，我是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語言，代碼結構更佳的清晰，能夠幫助你更好的學習。

TML 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創建動態功能。

HTML有很多用例，即：

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

本文將介紹 HTML 的基礎知識，包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。

什么是 HTML？

HTML（代表超文本標記語言）是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。

HTML 是如何工作的

在國內的網站上找了一圈，這應該是介紹歷史最細致的，長按保存手機里翻譯

html文件

平均每個網站包含幾個不同的信息 HTML 頁面。例如，主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容，以便互聯網用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束，而屬性描述元素的特征。

元素的三個主要部分是：

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

這三個部分的組合將創建一個 HTML 元素：

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

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

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

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

另一個屬性，HTML 類，對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。例如，我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式，請在每個開始標記后添加 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>

大多數元素都有一個開始標簽和一個結束標簽，但有些元素不需要結束標簽即可工作，例如空元素。這些元素不使用結束標簽，因為它們沒有內容：

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

這個圖像標簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內容，也沒有結束標簽。

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

< !DOCTYPE html >

最常用的 HTML 標簽和 HTML 元素

目前，有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽，但學習所有可用的不同元素仍然是有益的。

第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。

塊級元素

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

每個 HTML 頁面都使用這三個標簽：

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

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

其他流行的塊級標簽包括：

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

內聯元素

內聯元素格式化塊級元素的內部內容，例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。

例如，一個 <strong> 標簽會以粗體呈現一個元素，而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素：

<a href="https://www.icodingdeu.com/" >點我！</a>

HTML 演變——HTML 和 HTML5 有什么區別？

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

HTML 的優點和缺點

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

優點：

初學者友好: HTML 具有干凈且一致的標記，以及較淺的學習曲線。
支持領域廣：該語言被廣泛使用，擁有大量資源和龐大的社區。
無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：

缺點：

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

HTML、CSS 和 Javascript 是如何相關的

HTML 用于添加文本元素并創建內容結構。然而，僅僅建立一個專業的和完全響應的網站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。

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

結論

HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。

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

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

如果您有任何其他喜歡的資源來學習 HTML，請在評論部分告訴我們。

、網頁

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

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

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

二、瀏覽器(網頁顯示，運行的平臺)

1.常用瀏覽器

IE、Firefox 、Chrome 、Safari 、Opera

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

讀取網頁內容，整理訊息，計算網頁顯示方式并顯示頁面

三、Web標準

1.Web標準：由W3C組織和其他標準化組織制定的一系列標準的集合。(W3C是萬維網聯盟)

2.Web標準的構成

(1) 結構(Structure)：對網頁元素進行整理分類(HTML)

(2) 表現(Presentation)：設置網頁元素的版式、顏色、大小等外觀樣式(CSS)

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

3.為什么需要Web標準？

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

(2) 寫出的頁面更標準，更統一

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

(4) 降低網站流量費用，使網站更易于維護

(5) 提高頁面瀏覽速度

在線咨詢

上一篇：在PyCharm中如何更好地實現Python代碼的智能補全
下一篇：HTML基礎操作：圖片顯示

您的項目需求

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

整合營銷服務商