一、文本標(biāo)簽
<em>和<strong>
em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)。
strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。
這兩個(gè)標(biāo)簽可以單獨(dú)使用，也可以一起使用。
<p>
<strong>警告：任何情況下不要接近僵尸。</strong>
他們只是 <em>看起來</em> 很友好，實(shí)際上他們是為了吃你的胳膊！
</p>
通常em顯示為斜體，而strong顯示為粗體。
<i>和<b>
i標(biāo)簽會使文字變成斜體。
b標(biāo)簽會使文字變成粗體。
這兩個(gè)標(biāo)簽和em和strong類似，但是這兩 個(gè)標(biāo)簽沒有語義。
所以根據(jù)html5標(biāo)準(zhǔn)，當(dāng)我們只想設(shè)置文本 特殊顯示，而不需要強(qiáng)調(diào)內(nèi)容時(shí)就可以使 用i和b標(biāo)簽。
<small>
small標(biāo)簽表示細(xì)則一類的旁注，通常包括 免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信 息等。
瀏覽器在顯示small標(biāo)簽時(shí)會顯示一個(gè)比父 元素小的字號。
<p><small>©2018北財(cái). 保留所有權(quán)利.</small></p>
<cite>
使用cite標(biāo)簽可以指明對某內(nèi)容的引用或參 考。例如，戲劇、文章或圖書的標(biāo)題，歌 曲、電影、照片或雕塑的名稱等。
<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事。
</p>
<blockquote>和<q>
blockquote和q表示標(biāo)記引用的文本。
blockquote用于長引用(塊級引用)，q用于短引用（行內(nèi)引用）。
在兩個(gè)標(biāo)簽中還可以使用cite屬性來表示引 用的地址。
孟子曾經(jīng)說過：
<blockquote>天將降大任于是人也...</blockquote>
他說的真對啊！
<p>孔子曾經(jīng)說過：<q>學(xué)而時(shí)習(xí)之不亦說乎</q></p>
sup和sub
sup和sub用于定義上標(biāo)和下標(biāo)。
上標(biāo)主要用于表示類似于103中的3。
<p>趙薇<sup><a herf=“#”>[2]</a></sup></p>
下標(biāo)則用于表示類似余H2O中的2。
<p>H<sub>2</sub>O</p>
<ins>和<del>
ins表示插入的內(nèi)容，顯示時(shí)通常會加上下 劃線。
del表示刪除的內(nèi)容，顯示時(shí)通常會加上刪 除線。
<code>和<pre>
如果你的內(nèi)容包含代碼示例或文件名，就 可以使用code元素。
pre元素表示的是預(yù)格式化文本，可以使用
pre包住code來表示一段代碼。
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>
有序列表
使用ol和li來創(chuàng)建一個(gè)有序列表。
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>
無序列表
使用ul標(biāo)簽來創(chuàng)建一個(gè)無序列表
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)列表項(xiàng)
通過type屬性可以修改無序列表的項(xiàng)目符號，可選值：
disc：默認(rèn)值，實(shí)心的圓點(diǎn)
square：實(shí)心的方塊
circle：空心的圓圈
注意：默認(rèn)的項(xiàng)目符號我們一般都不使用
如果需要設(shè)置項(xiàng)目符號，則可以采用為li設(shè)置背景圖片的方式來設(shè)置
ul和li都是塊元素
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
如果需要去掉項(xiàng)目符號，添加
ul{
list-style: none;
}
有序列表和無序列表類似，只不過它使用ol來代替ul
有序列表使用有序的序號作為項(xiàng)目符號
-
type屬性，可以指定序號的類型，可選值：
1，默認(rèn)值，使用阿拉伯?dāng)?shù)字
a/A，采用小寫或大寫字母作為序號
i/I，采用小寫或大寫的羅馬數(shù)字作為序號
ol也是塊元素<ol type="1"> <li>結(jié)構(gòu)</li> <li>表現(xiàn)</li> <li>行為</li> </ol>
列表之間都是可以互相嵌套，可以在無序列表中放個(gè)有序列表，也可以在有序列表中放一個(gè)無序列表
<p>菜譜</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>
宮保雞丁
<ul>
<li>宮保</li>
<li>雞丁</li>
</ul>
</li>
<li>過橋茄子</li>
</ul>
定義列表用來對一些詞匯或內(nèi)容進(jìn)行定義
使用dl來創(chuàng)建一個(gè)定義列表，它有兩個(gè)子標(biāo)簽
dt：被定義的內(nèi)容
dd：對定義內(nèi)容的描述
同樣，dl、ul、ol之間都可以互相嵌套
<dl>
<dt>武松</dt>
<dd>景陽岡打虎英雄，戰(zhàn)斗力99</dd>
<dd>后打死西門慶，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家，戰(zhàn)斗力0</dd>
</dl>
二、文本格式化
單位
px
如果我們將一個(gè)圖片放大的話，我們會發(fā)現(xiàn)一個(gè)圖片 是有一個(gè)一個(gè)的小色塊構(gòu)成的，這一個(gè)小色塊就是一 個(gè)像素，也就是1px，對于不同的顯示器來說一個(gè)像素 的大小是不同的。百分比
也可以使用一個(gè)百分?jǐn)?shù)來表示一個(gè)大小，百分比是相 對于父元素來說的，如果父元素使用的大小是16px， 則100%就是16px，200%就是32px。-
em
em和百分比類似，是相對于font-size說的
1em = 1font-size<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單位</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: red; } .box1{ font-size: 50px; width: 2em; height: 50%; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1">你好</div> </div> </body> </html>
顏色
在CSS中可以直接使用顏色的關(guān)鍵字來代表 一種顏色。
17中顏色
– aqua、black、blue、fuchsia、gray、green、 lime、maroon、navy、olive、orange、
purple、red、silver、teal、white、yellow。
還有147種svg顏色，這里就不一一列舉了， 但是明顯即使這些顏色變成double，也不 足以描繪我們世界中所有的顏色。
background-color: red;
background-color: green;
background-color: bule;
十六進(jìn)制顏色
十六進(jìn)制的rgb值來表示顏色，原理和上邊RGB原理一樣，只不過使用十六進(jìn)制數(shù)來代替，使用三組兩位的十六進(jìn)制數(shù)組來表示一個(gè)顏色，每組表示一個(gè)顏色
語法：#紅色綠色藍(lán)色
十六進(jìn)制：0 1 2 3 4 5 6 7 8 9 a b c d e f00 - ff
00表示沒有，相當(dāng)于rgb中的0
ff表示最大，相當(dāng)于rgb中255
紅色：#ff0000像這種兩位兩位重復(fù)的顏色，可以簡寫
比如：#ff0000 可以寫成 #f00
#abc #aabbcc用的最多的顏色是十六進(jìn)制符號。一個(gè)顏色值， 比如：#6600FF實(shí)際上包含了三組十六進(jìn)制的 數(shù)字。
-
如果每一組數(shù)中的兩個(gè)數(shù)字都相同，就可以把 十六進(jìn)制的數(shù)字縮短為只有3個(gè)字符，如將#6600FF縮短為#60F。
background-color: #0000ff; background-color: #00f; background-color: #084098;
RGB值
也可以使用計(jì)算機(jī)中常用的RGB值來表示 顏色。可以使用0~255的數(shù)值，也可以使 用0%~100%的百分比數(shù)。
– RGB(100%,0%,0%)
– RGB(0,255,0)-
rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度);
顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒有
濃度也可以采用一個(gè)百分?jǐn)?shù)來設(shè)置，需要一個(gè)0% - 100%之間的數(shù)字
使用百分?jǐn)?shù)最終也會轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
100%表示255background-color: rgb(161,187,215); background-color: rgb(100%,50%,50%);
RGBA
RGBA表示一個(gè)顏色和RGB類似，只不過比
RGB多了一個(gè)A（alpha）來表示透明度， 透明度需要一個(gè)0-1的值。
0表示完全透明，1表示完全不透明。
RGBA(255,100,5,0.5)
文字大小
font-size用來指定文字的大小
設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身的大小，在頁面中，每個(gè)文字都是處在一個(gè)看不見的框中的，我們設(shè)置的font-size實(shí)際上是設(shè)置格的高度，并不是字體的大小，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會比格大，根據(jù)字體的不同，顯示效果也不同
字體(一)
- 通過font-family可以指定標(biāo)簽中文字使用 的字體。
當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開
當(dāng)采用多個(gè)字體時(shí)，瀏覽器會優(yōu)先使用前邊的字體，如果前邊沒有，再嘗試下一個(gè)
-
例如：
p{font-family: arial；}
– 上邊這行代碼指定了p標(biāo)簽中使用名為arial作 為字體
- 一般來說只有用戶計(jì)算機(jī)中安裝了我們指 定的字體時(shí)，它才會顯示，否則這行代碼 是沒有意義的。
字體(二)
通過font-family可以同時(shí)指定多個(gè)字體。
-
例如：
p{font-family:Arial , Helvetica , sans-serif} 如上我實(shí)際上指定了三種字體，那么到底 使用的是哪個(gè)呢？瀏覽器會優(yōu)先使用第一 個(gè)，如果沒有找到則使用第二個(gè)，以此類 推。
這里面sans-serif并不是指的具體某一個(gè)字 體。而是一類字體。
字體分類
- serif（襯線字體）( 宋體)
- sans-serif（非襯線字體）（黑體）
- monospace （等寬字體）
- cursive （草書字體）
- fantasy （虛幻字體）
以上這些分類都是一些大的分類，并沒有 涉及具體的類型，如果將字體指定為這些 格式，瀏覽器會自己選擇指定類型的字體。
斜體和粗體
-
font-style可以用來設(shè)置文字的斜體
- 可選值：
normal 默認(rèn)值，文字正常顯示
italic 文字會以斜體顯示
oblique 文字會以傾斜的效果顯示
- 大部分瀏覽器都不會對傾斜和斜體做區(qū)分，也就是說我們設(shè)置italic和oblique效果是一樣的
- 一般我們只會使用italicp{ /*設(shè)置文字斜體*/ font-style: italic;} -
font-weight用來指定文本的粗體。
指定粗體：font-weight:bold
指定非粗體：font-weight:normalp{ /*設(shè)置文字加粗*/ font-weight: bold; }
小型大寫字母
-
font-variant可以用來設(shè)置小型大寫字母
- 可選值：
normal 默認(rèn)值，文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
將所有的字母都以大寫形式顯示，但是小寫字母的小型大寫，要比大寫字母小一些p { font-variant:small-caps; }
字體屬性的簡寫
font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
語法：
– font:加粗 斜體 小型大寫 大小/行高 字體-
這里前邊幾個(gè)加粗、斜體和小型大寫的順 序無所謂，也可以不寫，但是大小和字體 必須寫且必須寫到后兩個(gè)。
p3{ font: bold italic small-caps 60px "微軟雅黑"; }
行間距
在CSS中并沒有直接提供設(shè)置行間距的方式，我們只能通過設(shè)置行高來間接的設(shè)置，行高越大行間距越大
使用line-height來設(shè)置行高
行高類似于我們上學(xué)用的單線本，單線本是一行一行的，線與線之間的距離就是行高
網(wǎng)頁中的文字實(shí)際上也是寫在一個(gè)看不見的線中的，而文字會默認(rèn)在行高中垂直居中顯示
- line-height用于設(shè)置行高，行高越大則行 間距越大。
行間距 = line-height – font-size 通過設(shè)置line-height可以間接的設(shè)置行高 可以接收的值： 1.直接接收一個(gè)大小 2.可以指定一個(gè)百分?jǐn)?shù)，則會相對于字體去計(jì)算行高 3.可以直接傳一個(gè)數(shù)值，則行高會設(shè)置字體大小相應(yīng)的倍數(shù) .p4{ /*直接接收一個(gè)大小*/ font-size:20px; line-height:50px; } .p3{ /*可以指定一個(gè)百分?jǐn)?shù)，則會相對于字體去計(jì)算行高*/ font-size:30px; line-height:200%; } .p1{ /*可以直接傳一個(gè)數(shù)值，則行高會設(shè)置字體大小相應(yīng)的倍數(shù)*/ line-height:2; font-size: 20px; } .box{ width: 200px; height: 200px; background-color: #bfa; /*對于單行文本來說，可以將行高設(shè)置為和父元素的高度一致，這樣可以是單行文本在父元素中垂直居中*/ line-height: 200px; } p2{ line-height: 50px; /* 在font中也可以指定行高 在字體大小后可以添加/行高，來指定行高，該值是可選的，如果不指定則會使用默認(rèn)值 */ font: 30px "微軟雅黑"; }
文本的修飾
text-decoration屬性，用來給文本添加各 種修飾。通過它可以為文本的上方、下方 或者中間添加線條。
-
可選值：
underline上方
overline下方
line-through中間
nonea{ /* 超鏈接會默認(rèn)添加下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline 如果需要去除超鏈接的下劃線則需要將該樣式設(shè)置為none*/ text-decoration: none; }
大寫化
- text-transform樣式用于將元素中的字母全都變成大寫。
大寫：text-transform:uppercase
小寫：text-tansform:lowercase
首字母大寫：text-transform:capitalize
正常：text-transform:none
字母間距和單詞間距
letter-spacing用來設(shè)置字符之間的間距。
word-spacing用來設(shè)置單詞之間的間距。
-
這兩個(gè)屬性都可以直接指定一個(gè)長度或百 分?jǐn)?shù)作為值。正數(shù)代表的是增加距離，而 負(fù)數(shù)代表減少距離。
.p3{ /*letter-spacing可以指定字符間距*/ /*letter-spacing: 10px;*/ /*word-spacing可以設(shè)置單詞之間的距離，實(shí)際上就是設(shè)置詞與詞之間空格的大小*/ word-spacing: 100px; }
對齊文本
text-align用于設(shè)置文本的對齊方式。
-
可選值：
left：左對齊
right：右對齊
justify：兩邊對齊
center：居中對齊.p4{ /* text-align用于設(shè)置文本的對齊方式 可選值： left 默認(rèn)值，文本靠左對齊 right 文本靠右對齊 center 文本居中對齊 justify 兩端對齊 - 通過調(diào)整文本之間的空格的大小，來達(dá)到一個(gè)兩端對齊的目的 */ text-align: justify; }
首行縮進(jìn)
text-indent用來設(shè)置首行縮進(jìn)。
-
該樣式需要指定一個(gè)長度，并且只對第一 行生效。
.p5{ font-size: 20px; /* text-indent用來設(shè)置首行縮進(jìn) 這個(gè)值一般都會使用em作為單位 當(dāng)給它指定一個(gè)正值時(shí)，會自動(dòng)向右側(cè)縮進(jìn)指定的像素 如果為它指定一個(gè)負(fù)值，則會向左移動(dòng)指定的像素 通過這種方式可以將一些不想顯示的文字隱藏起來 */ text-indent: -99999px; }
