整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
一個網頁的文本顏色是指在主體內的選擇：
<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：如果你定義了顏色屬性，你還必須定義背景色屬性。
文本排列屬性是用來設置文本的水平對齊方式。
文本可居中或對齊到左或右,兩端對齊。
當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>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>注：不建議強調指出不是鏈接的文本，因為這常常混淆用戶。
text-transform文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。
<!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>text-indent文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent:50px;}增加或減少字符之間的空間。
<style>
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
</style>指定在一個段落中行之間的空間。
<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>增加一個段落中的單詞之間的空白空間。
<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>設置文本的垂直對齊圖像。
<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>設置文本陰影。
<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大家都不陌生，作為一個新興的前端開發語言，HTML5已經被大量應用到各個領域，通過HTML5技術制作完成的網頁，可以是單純針對PC端，也已單獨適配移動端，更能做成時下最流行的響應式網站，也就是可以根據訪問設備的不同，自動適應屏幕的寬度來改變頁面中的元素樣式，鄭州建站網通過頁面中的必要元素標簽，為大家講解HTML5網站建設的解決方案。
第一點：網站頭部設計
網站頭部標簽的作用是在頁面的開端加入一個用以介紹整個頁面內容的信息容器，一般網頁的名稱、簡介內容、關鍵詞、版權信息等元素均會出現了網頁頭部，技術層面上，在網頁頭部還要表示出該頁面采用的制作語言，例如是HTML5還是較為陳舊的HTML4，目的是讓訪問端的瀏覽器使用與之對應的頁面渲染方式。
第二點：網站導航欄的設計
網站的導航元素作用就是承載了對于訪客的瀏覽指導作用，導航中的內容是直接循環于網站的一級欄目，當然也有特例，在導航中出現的鏈接內容只是整個頁面中所有鏈接的一小部分，但在設計角度上，導航中出現的內容應是整個網站中權重最高的。
第三點：網站的文章內容設計
網站的文章標簽承載了整個網頁中最重要的內容傳遞作用，頁面中的主要信息均會在此展示，當然內容不僅限于文章，也有可能是圖集、圖文或視頻等，對于該部分的元素，HTML5也增加可用標簽，意指讓頁面內容更加合理，其中就包括下面內容中會提到的部件和側邊兩個元素標簽。
第四點：網頁中小部件的使用
與我們更加熟悉的div標簽相比，部件標簽(section)對于瀏覽器和搜索引擎來說是具有指導意義的，一般情況下會用于文章內容中的標題、編號等內容，最大的好處就是，讓整個頁面中的內容排列的更加有序，邏輯清晰。
第五點：網頁布局的側邊設計
側邊標簽中的內容并不是整個頁面中的主題，而是對主體內容起到補充或解釋說明的作用，在HTML5語言廣泛應用之前，對于頁面中此類元素，不同的前端工程師在標簽的使用上有著不同的習慣，基于HTML5開發的樣式中，此類情況得到了合理的統一。
第六點：網站底部設計
此元素的內容是包含更多關于他的父元素的內容。footer置于body之后將可以提供有關該頁面的其他的信息內容。例如網站建設著的一些信息，相關文章的鏈接或者版權信息等等。此元素也可以被被應用于body之中不同的段中，可以給頁面中不同段一些特定的其他信息。底部元素作用是將那些不適合在body中出現的內容展示在頁面上，例如文章內容的版權信息、頁面底部的內容導航、網站的ICP備案信息以及友情鏈接信息等，在HTML5版本之上，也增加了在底部內容中專用的標簽，供開發者使用。
TML5的語法變化
HTML5中，語法發生了很大的變化。或許有人會抱著異常驚訝和不安地問“HTML普及到何種程度”“根本的語法發生了變化，會有多大影響”。
只是，HTML5的“語法變化”和其他編程語言所謂的語法變更意義有所不同。為什么這么說呢？原因比較特殊，因為以前的HTML幾乎沒有遵循規范實現的Web瀏覽器。
現有瀏覽器與規范背離
HTML的語法是在SGML（Standard Generalized Markup Language）語言的基礎上來規定的。但是由于SGML的語法非常復雜，文檔結構解析程序的開發也不太容易，多數Web瀏覽器不作為SGML解析器運行。由此，HTML規范中雖然要求“應遵循SGML的語法”，但實際情況卻是遵循規范實現的Web瀏覽器幾乎不存在。
規范向實現靠攏
如上所述，HTML5中提高Web瀏覽器間的兼容性是重大的目標之一。要確保兼容性，必須消除規范與實現的背離。因此HTML5以近似現有的實現，重新定義了新的HTML語法，使規范向實現靠攏。
由于文檔結構解析的算法也有著詳細的記載，使得Web瀏覽器開發者可以專注于遵循規范去進行實現工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已經內置了遵循HTML5規范的解析器。IE（Internet Explorer）和Opera也為了能夠提供更好的兼容性實現而緊鑼密鼓地努力著。
了解更多前端知識，可以點擊下方鏈接和小編一起學習喲~
「鏈接」
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
