整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
馬上我們就要進(jìn)入下一個(gè)階段，也就是HTML和CSS實(shí)現(xiàn)前端界面的階段了，想必很多小伙伴都想給自己的頁面加點(diǎn)酷炫的特效，今天，我就給大家整理了一些非常酷炫的文字特效來裝點(diǎn)你的頁面！有些是從網(wǎng)絡(luò)上找的，有些是自己寫出來的
這里介紹一點(diǎn)寫這些特效時(shí)需要用到的屬性，（帶-webkit-開頭的是只有Safari和Chrome等使用webkit或chromium內(nèi)核的瀏覽器才可以使用）
這個(gè)屬性用于設(shè)置文本的填充色，與直接設(shè)置顏色（color屬性）不同，它可以設(shè)置transparent（透明）
這個(gè)屬性用于設(shè)置文字的描邊，第一個(gè)值寫描邊線的寬度，第二個(gè)寫描邊線的顏色
文字陰影，這個(gè)屬性由四個(gè)部分組成：第一個(gè)值寫陰影在x軸上的偏移；第二個(gè)值是在y軸上的偏移；第三個(gè)值是模糊程度（可以寫0~？）值越大，越模糊，為0時(shí)不模糊；第四個(gè)值是陰影顏色。與box-shadow基本一致
注意：這四個(gè)值直接不需要逗號分隔，它們四個(gè)作為一個(gè)整體參數(shù)。同時(shí)也可以寫多個(gè)參數(shù)用逗號隔開來實(shí)現(xiàn)更強(qiáng)的效果（下方有多個(gè)效果都運(yùn)用到了這個(gè)技巧）
將背景按照設(shè)定的參數(shù)裁切，一般書寫text（即按照文本的樣式裁切，僅保留文本的部分）然后將文本設(shè)為透明（webkit-text-fill-color屬性）就能實(shí)現(xiàn)漸變色文字等
下面就是一些字體實(shí)例了
.loukong{
/* 設(shè)置文字為透明，設(shè)置文本描邊*/
background-color: #00c4ff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke:1px #000;
} .liti{
/* 文字左上設(shè)置多層淺色陰影，右下設(shè)置多層暗色陰影，文字色同背景色 */
background-color: #d2d500;
color: #d2d500;
text-shadow: -1px -1px 0px #e6e600,-2px -2px 0px #e6e600,
-3px -3px 0px #e6e600,1px 1px 0px #bfbf00,2px 2px 0px #bfbf00,3px 3px 0px #bfbf00;
} .nihong{
/* 深色底色，淺色文字，多層淺色文字陰影，彌散大 */
background-color: darkgray;
color: white;
text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
} 英文或者筆畫稀疏的文本比較適合，筆畫多看起來會不太好
.chongdie{
/* 兩層背景，一層與被背景色相同，一層與文字色相同 */
background-color: gray;
color: #eee;
text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;
} .huanse{
/* 兩層背景，沒啥技巧 */
background-color: darkgray;
color: white;
text-shadow: 1px 1px 0px #0000FF,2px 2px 0px #0000FF,-1px -1px 0px #E31B4E,-2px -2px 0px #E31B4E;
} .fangsheng{
/* 要把陰影與大小配合好，一般來說大小都是偏大時(shí)采用 */
font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
text-transform: uppercase;/* 全開大寫 */
font-size: 92px;
color: #f1ebe5;
text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;
font-weight: bold;
letter-spacing: -4px;
background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);
} 因?yàn)樾枰玫奖尘安们校?webkit-background-clip），所以需要再嵌套一個(gè)背景div
.jianbian{
background-color: #009195;
}
.jianbian-inner{
background: linear-gradient(90deg,#f88,#88f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* -webkit-text-stroke: 1px #000000; */
} 以上就是全部內(nèi)容了，靈活運(yùn)用css的屬性，就能創(chuàng)造出很多你想得到的和想都想不到的特效，甚至一些連寫腳本都很難實(shí)現(xiàn)的特效，所以，努力探索css吧，沖沖沖！
轉(zhuǎn)自簡書：喬一丁_2020強(qiáng)化班
原文鏈接：https://www.jianshu.com/p/b7fd3cf53924
格式化
>格式化標(biāo)記通常只能是產(chǎn)生幾種不同文本的樣式，但在語義上它們各自有著自己的特點(diǎn)
>如果你只是想有著一些自己的文本樣式，可以嘗試使用“常用html標(biāo)記”里格式化的內(nèi)容或css樣式表
>但是這樣會對搜索引擎不友好
>所以我們強(qiáng)調(diào)使用語義化標(biāo)簽，提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。
## `<abbr></abbr>`
作用：用于指示該標(biāo)簽內(nèi)的內(nèi)容是一個(gè)縮寫
注意點(diǎn)：
1. 常與全局屬性title配合使用，這樣可以在鼠標(biāo)移動(dòng)到該處時(shí)顯示全稱
`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`
2. 在瀏覽器內(nèi)渲染會使其在內(nèi)容底部加上短虛線
## `<address></address>`
作用：用于定義文檔或文章作者/擁有者的聯(lián)系信息
>如果 `<address>` 元素位于 `<body>` 元素內(nèi)，則它表示文檔聯(lián)系信息。
>如果 `<address>` 元素位于 `<article>` 元素內(nèi)，則是它表示文章的聯(lián)系信息。
注意點(diǎn)：
1. address元素中的文本通常呈現(xiàn)為斜體，大多數(shù)瀏覽器會在address元素前后換行
2. address元素不應(yīng)該用于描述通訊地址，除非它是練習(xí)信息的一部分
3. address元素元素通常連同其他信息被包含在footer元素中
```
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
```
## `<b></b>`
作用：定義粗體文本
## `<bdi></bdi>`
作用：定義文本的文本方向，使其脫離周圍文本的方向設(shè)置
注意點(diǎn)：
1. bdi指的是bidi隔離
2. 在發(fā)布用戶評論或其它難以控制的內(nèi)容時(shí)，可以使用
3. 需要與全局屬性dir配合使用
## `<bdo></bdo>`
作用：定義文字方向
注意點(diǎn)：
1. 請與全局屬性dir配合使用
```
<p>
如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
```
## `<blockquote></blockquote>`
作用：`<blockquote>`標(biāo)簽用于定義塊引用
注意點(diǎn)：
1. 標(biāo)簽內(nèi)的所有文本都會從常規(guī)文本中分離出來，一般會上下?lián)Q行，左右增加外邊距，有時(shí)也會使用斜體
2. 換而言之，塊引用擁有它們自己的空間
3. 可選屬性：
`cite=url`規(guī)定引用來源
```
<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>
```
主流瀏覽器均不支持cite屬性，但是搜索引擎可以因此獲得更多的信息
## `<q></q>`
作用：用于定義短引用
注意點(diǎn)：
1. 瀏覽器經(jīng)常在引用內(nèi)容的人左右添加引號
2. `<q>` 與 `<blockquote>` 的區(qū)別:
- `<q>` 標(biāo)簽在本質(zhì)上與 `<blockquote>` 是一樣的。不同之處在于它們的顯示和應(yīng)用。`<q>` 標(biāo)簽用于簡短的行內(nèi)引用。如果需要從周圍內(nèi)容分離出來比較長的部分（通常顯示為縮進(jìn)地塊），請使用 `<blockquote>` 標(biāo)簽。
3. 在html4中，firefox和opera中q元素包含的文本必須以引號來開始和結(jié)束，但是IE卻不支持這個(gè)規(guī)定，如果我們?yōu)榱藵M足其它瀏覽器而添加了引號，那么在IE中就會顯示兩組引號。
4. 盡管如此，我們還是推薦使用q元素，因?yàn)樗谖臋n處理和信息提取方面將會有很強(qiáng)的效果
5. 可選屬性：
`cite=citation`定義引用的出處或來源（citation）
## `<cite></cite>`
作用：表示所含文本是對某個(gè)參考文獻(xiàn)的引用
注意點(diǎn)：
1. 在顯示上與blockquote元素類似，均是斜體
2. 但是它不會有上下左右的外邊距
3. 通常情況下還要把引用包裹在一對`<a></a>`標(biāo)簽中，然后把超鏈接指向引用
`<cite><a href=URL>引用名</a></cite>`
>`<cite>` 標(biāo)簽還有一個(gè)隱藏的功能：它可以使你或者其他人從文檔中自動(dòng)摘錄參考書目。我們可以很容易地想象一個(gè)瀏覽器，它能夠自動(dòng)整理引用表格，并把它們作為腳注或者獨(dú)立的文檔來顯示。`<cite>` 標(biāo)簽的語義已經(jīng)遠(yuǎn)遠(yuǎn)超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實(shí)用的方式來向用戶表達(dá)文檔的內(nèi)容。
## `<code></code>`
作用：定義計(jì)算機(jī)代碼文本
注意點(diǎn)：
1. code元素并不能將元素內(nèi)的內(nèi)容以原樣顯示，瀏覽器仍然會解析內(nèi)容而不跳過
2. code只是給內(nèi)容的字體改為等寬字體，即它只是將內(nèi)容轉(zhuǎn)變?yōu)榘凳具@是計(jì)算機(jī)代碼的內(nèi)容
## `<var></var>`
作用：`<var>` 標(biāo)簽表示變量的名稱，或者由用戶提供的值。
注意點(diǎn)：
1. 用 `<var>` 標(biāo)簽標(biāo)記的文本通常顯示為斜體。
2. `<var>` 標(biāo)簽是計(jì)算機(jī)文檔中應(yīng)用的另一個(gè)小竅門，這個(gè)標(biāo)簽經(jīng)常與 `<code>` 和 `<pre>` 標(biāo)簽一起使用，用來顯示計(jì)算機(jī)編程代碼范例及類似方面的特定元素。
## `<smap></smap>`
作用：用于從一段上下文中抽取一些字符
例子：
`字符序列 <samp>ae</samp> 可能會被轉(zhuǎn)換為 æ 連字字符。`
效果：
`字符序列 ae 可能會被轉(zhuǎn)換為 ? 連字字符。`
## `<ins></ins>`
作用：定義一個(gè)插入文本
注意點(diǎn)：
1. 顯示效果是加入下劃線
## `<dfn></dfn>`
作用：用于標(biāo)記特殊術(shù)語或短語
注意點(diǎn)：
1. 瀏覽器通常會將dfn元素內(nèi)的內(nèi)容顯示為斜體
2. 應(yīng)當(dāng)盡量少的使用，比如在技術(shù)性的文檔中，在第一次提到一個(gè)術(shù)語時(shí)，可以加上dfn元素，而在相同文檔的后續(xù)中，對于同一個(gè)術(shù)語，應(yīng)避免使用dfn
## `<em></em>`
作用：定義一個(gè)強(qiáng)調(diào)文本
注意點(diǎn)：
1. 在顯示結(jié)果上，它依然是斜體
2. 如果你只是為了定義一個(gè)斜體的內(nèi)容，可以考慮使用`<i></i>`或css樣式表
3. 對于強(qiáng)調(diào)的內(nèi)容應(yīng)當(dāng)不宜過多，否則無法突出想要表達(dá)的內(nèi)容
## `<strong></strong>`
作用：定義一個(gè)語氣更加強(qiáng)烈地強(qiáng)調(diào)文本
注意點(diǎn)：
1. 常識告訴我們應(yīng)較少使用em元素的話，那么strong元素出現(xiàn)的次數(shù)應(yīng)該更少，限制其使用可以讓這個(gè)標(biāo)記更加的引人注意和有效
## `<i></i>`
作用：定義一個(gè)斜體文本或傾斜的文本
## `<kbd></kbd>`
作用：定義鍵盤文本
注意點(diǎn)：
1. 顯示效果為等寬字體
## `<mark></mark>`(HTML5)
作用：定義帶有記號的文本
注意點(diǎn)：
1. 與加粗不同，它會將文字加上背景色
## `<meter></meter>`(HTML5)
作用：定義已知范圍或分?jǐn)?shù)值內(nèi)的標(biāo)量測量，也被稱為gauge（尺度）
注意點(diǎn)：
1. 這是一個(gè)html5的新標(biāo)簽，假如你把文檔類型聲明為html4或以下和xhtml，標(biāo)簽本身的效果將會受到影響
2. `<meter>`標(biāo)簽不應(yīng)用于指示進(jìn)度條的進(jìn)度，如果標(biāo)記進(jìn)度，請使用`<progress></progress>`標(biāo)簽
可用屬性：
1. form=form_id-->規(guī)定meter元素所屬的一個(gè)或多個(gè)表單
2. high=number-->規(guī)定被視作高的值的范圍
3. low=number-->規(guī)定被視作高的值的范圍
4. max=number-->規(guī)定范圍的最大值
5. min=number-->規(guī)定范圍的最小值
6. optimum=number-->規(guī)定度量的優(yōu)化值
7. value=number-->必須。規(guī)定度量的當(dāng)前值
```
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
```
## `<progress></progress>`(HTML5)
作用：標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）
`<progress value="22" max="100"></progress> `
注意點(diǎn)：
1. 需要與js結(jié)合使用，來顯示任務(wù)的進(jìn)度
2. progress標(biāo)簽不適合使用來表示度量衡，這種情況請使用meter元素來替代
可用屬性：
max=number-->規(guī)定任務(wù)一共需要多少工作
value=number-->規(guī)定任務(wù)已經(jīng)完成多少工作
## `<pre></pre>`
作用：用于定義預(yù)格式化的文本，即通常會保留空格和換行，文本會呈現(xiàn)為等寬字體
注意點(diǎn)：
1. pre元素常用于表示計(jì)算機(jī)的源代碼，但是計(jì)算機(jī)的源代碼（html）直接放入瀏覽器仍會解析（需要使用`<`和`>`等符號實(shí)體）
2. 會導(dǎo)致內(nèi)容截?cái)嗟臉?biāo)簽絕不能包含在pre元素中，如標(biāo)題、p元素、address元素
3. 可選的屬性：
`width=number`定義每行的最大字符數(shù)
## `<ruby></ruby>`
作用：可用于定義一個(gè)ruby注釋（中文注音或字符）
注意點(diǎn)：
1. ruby元素與rt元素一同使用
2. ruby元素由需要一組字符和一個(gè)提供信息的rt元素組成
3. 還包括一個(gè)可選的rp元素，定義瀏覽器不支持ruby元素時(shí)顯示的內(nèi)容
## `<rt></rt>`
作用：定義字符的解釋或發(fā)音
## `<rp></rp>`
作用：定義瀏覽器不支持ruby元素時(shí)顯示的內(nèi)容
## `<s></s>`
作用：定義加刪除線的文本
注意點(diǎn)：
1. `<s>`標(biāo)簽是`<strike>`標(biāo)簽的縮寫版本，但html4和xhtml中已經(jīng)不再贊成使用它了，就是說，它早晚有一天會消失
2. 請使用`<del></del>`替代它
## `<del></del>`
作用：給元素中的內(nèi)容上加上刪除線
注意點(diǎn)：
1. 請與`<ins></ins>`標(biāo)簽配合使用，來描述文檔中的更新與修正
2. 可選的屬性：
- cite=URL
- datetime=YYYMMDD （定義文本被刪除的日期和時(shí)間）
## `<small></small>`
作用：標(biāo)簽內(nèi)的元素呈現(xiàn)小號字體的效果
注意點(diǎn)：
1. 如果被包裹字體已經(jīng)是最小號的字體了，那這個(gè)標(biāo)簽將不起任何作用
2. `<small></small>`是可以嵌套的，從而把文字連續(xù)的縮小，直到到達(dá)最小的一號字
## `<sup></sup>`
作用：標(biāo)簽中的內(nèi)容會以當(dāng)前文本流中字符高度的一般來顯示（上標(biāo)）
注意點(diǎn)：
1. 雖然顯示效果與文本流中其他元素不一樣，但是它們的字體字號都是一樣的
2. 這個(gè)標(biāo)簽在向文檔添加注腳以及表示方程式中的指數(shù)時(shí)非常有效，如果與`<a></a>`標(biāo)簽結(jié)合使用可以創(chuàng)建出很好的超鏈接注腳
## `<sub></sub>`
作用：標(biāo)簽中的內(nèi)容會以當(dāng)前文本流中字符高度的一般來顯示（下標(biāo)）
## `<template></template>`
作用：可以作為一個(gè)容器，但是它并不會存在于DOM樹中
注意點(diǎn)：
1. 多用于包裹一段代碼，對其綁定事件，使其可以控制是否隱藏
2. 一個(gè)檢查方法：
```
if (document.createElement("template").content) {
document.write("Your browser supports template!");
} else {
document.write("您的瀏覽器不支持 template！");
}
```
## `<u></u>`
作用：定義下劃線文本
注意點(diǎn)：
1. 應(yīng)盡量避免使用，用戶可能會把它混淆為一個(gè)超鏈接
## `<time></time>`(HTML5)
作用：定義一個(gè)公歷的時(shí)間或日期，時(shí)間和時(shí)區(qū)偏移是可選的
可選的屬性：
1. datetime=datetime-->規(guī)定日期/時(shí)間。否則由元素內(nèi)容給定日期時(shí)間
2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 時(shí)間是文檔（或 `<article>` 元素）的發(fā)布日期。
## `<wbr>`(HTML5)
一段帶有 Word Break Opportunity 的文本：
```
<p>
如果想學(xué)習(xí) AJAX，那么您必須熟悉 XML<wbr>Http<wbr>Request 對象。
</p>
```
作用：Word Break Opportunity (`<wbr>`) 規(guī)定在文本中的何處適合添加換行符。
注意點(diǎn)：如果單詞太長，或者您擔(dān)心瀏覽器會在錯(cuò)誤的位置換行，那么您可以使用 `<wbr>` 元素來添加 Word Break Opportunity（單詞換行時(shí)機(jī)）。
.注釋標(biāo)記(<!--…-->)
語法： <!--注釋內(nèi)容-->
2.文件標(biāo)記(<html>…</html>)
語法： <html>…</html>
說明：<html>這對標(biāo)記是HTML文件的標(biāo)記。<html>處于文件的最前面，表示HTML文件的開始。即瀏覽器從<html>標(biāo)記開始解釋，直到遇到</html>標(biāo)記為止。
3.文件頭標(biāo)記(<head>…</head>)
語法： <head>…</head>
說明：
①由head這組標(biāo)記定義的元素中，并不放置網(wǎng)頁的任何內(nèi)容，是放置關(guān)于這份HTML文件的信息。就是說，它并不屬于HTML文件的主體，它包含文件的標(biāo)題、編碼方式和URL等。這些信息大部分用于提供索引、辨認(rèn)或其他應(yīng)用。
②這對標(biāo)記在HTML文件中并不是必需的。如果某個(gè)HTML文件并不需要提供相關(guān)信息，則可省略<head>標(biāo)記。
4.文件標(biāo)題標(biāo)記(<title>…</title>)
語法： <title>文件標(biāo)題文字</title>
說明：此標(biāo)記用于設(shè)定HTML文件的標(biāo)題名稱，它將顯示在瀏覽器的標(biāo)題欄中。
注意：<title>標(biāo)記用于<head>標(biāo)記中。但如果HTML文件中沒有使用<head>標(biāo)記，則<title>標(biāo)記仍然起作用。
5.文件主體標(biāo)記(<body>…</body>)
語法： <body>…</body>
說明：
①由<body>標(biāo)記所建立的元素是HTML文件的內(nèi)容主體，也是HTML文件的重點(diǎn)所在。HTML文件中要顯示在網(wǎng)頁上的所有內(nèi)容，也都放置在這個(gè)元素中。
②<body>具有一些特殊的屬性，可以設(shè)定背景及字符顏色等。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
