- <em> 標(biāo)簽用于表示一段內(nèi)容的著重點(diǎn)
- <strong> 用于表示一個(gè)內(nèi)容的重要性酝掩、
通常em顯示為斜體上真,而strong顯示為粗體
- <i> 標(biāo)簽會(huì)使文字變成斜體
- <b>標(biāo)簽會(huì)使文字變成粗體
- <small> 標(biāo)簽比父元素小的字號(hào)
small標(biāo)簽表示細(xì)則一類的旁注登下,通常包括 免責(zé)聲明、注意事項(xiàng)、法律限制菱皆、版權(quán)信 息等嘿棘。
- <big> 標(biāo)簽比父元素大的字號(hào)
- <cite>標(biāo)簽表示可以指明對(duì)某內(nèi)容的引用和參考
例如:
<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事劲腿。
</p>
- <q>標(biāo)簽引號(hào)
- <blockquote>長(zhǎng)引用
例如:
孟子曾經(jīng)說(shuō)過(guò):
<blockquote>天將降大任于是人也...</blockquote>
他說(shuō)的真對(duì)啊鸟妙!
<p>孔子曾經(jīng)說(shuō)過(guò):<q>學(xué)而時(shí)習(xí)之不亦說(shuō)乎</q></p>
- <s up> 和<s ub>定義上下標(biāo)
上標(biāo)主要用于表示類似于103中的3焦人。
下標(biāo)則用于表示類似余H2O中的2挥吵。
- <ins>表示插入內(nèi)容下劃線
- <del> 刪除線
- <pre>預(yù)格式化文本
- <code> 表示一段代碼
列表
pre包住code來(lái)表示一段代碼。
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>
列表
列表
1.有序列表
<!--
有序列表和無(wú)序列表類似花椭,只不過(guò)它使用ol來(lái)代替ul
有序列表使用有序的序號(hào)作為項(xiàng)目符號(hào)
type屬性忽匈,可以指定序號(hào)的類型,可選值:
1矿辽,默認(rèn)值丹允,使用阿拉伯?dāng)?shù)字
a/A,采用小寫(xiě)或大寫(xiě)字母作為序號(hào)
i/I袋倔,采用小寫(xiě)或大寫(xiě)的羅馬數(shù)字作為序號(hào)
ol也是塊元素
-->
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>
<!--
無(wú)序列表
使用ul標(biāo)簽來(lái)創(chuàng)建一個(gè)無(wú)序列表
使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)雕蔽,一個(gè)li就是一個(gè)列表項(xiàng)
通過(guò)type屬性可以修改無(wú)序列表的項(xiàng)目符號(hào),可選值:
disc:默認(rèn)值宾娜,實(shí)心的圓點(diǎn)
square:實(shí)心的方塊
circle:空心的圓圈
注意:默認(rèn)的項(xiàng)目符號(hào)我們一般都不使用
如果需要設(shè)置項(xiàng)目符號(hào)批狐,則可以采用為li設(shè)置背景圖片的方式來(lái)設(shè)置
ul和li都是塊元素
-->
2.無(wú)序列表
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng) 3</li>
</ul>
3.定義列表
<!--
定義列表用來(lái)對(duì)一些詞匯或內(nèi)容進(jìn)行定義
使用dl來(lái)創(chuàng)建一個(gè)定義列表,它有兩個(gè)子標(biāo)簽
dt:被定義的內(nèi)容
dd:對(duì)定義內(nèi)容的描述
同樣前塔,dl嚣艇、ul、ol之間都可以互相嵌套
-->
<dl>
<dt>定義項(xiàng)1</dt>
<dd>定義描述1</dd>
<dt>定義項(xiàng)2</dt>
<dd>定義描述2</dd>
<dt>定義項(xiàng)3</dt>
<dd>定義描述3</dd>
</dl>
文本的格式化
單位
- px 像素
- % 百分比
- em 1em=1font-size
- rgb 顏色值 0-255 %0-100% 16進(jìn)制 #0000ff
在CSS可以直接使用顏色的單詞來(lái)表示不同的顏色
* 紅色:red
* 藍(lán)色:blue
* 綠色:green
* 也可以使用RGB值來(lái)表示不同的顏色
* - 所謂的RGB值指的是通過(guò)Red Green Blue三元色嘱根,
* 通過(guò)這三種顏色的不同的濃度髓废,來(lái)表示出不同的顏色
* - 例子:rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度);
* - 顏色的濃度需要一個(gè)0-255之間的值,255表示最大该抒,0表示沒(méi)有
* - 濃度也可以采用一個(gè)百分?jǐn)?shù)來(lái)設(shè)置慌洪,需要一個(gè)0% - 100%之間的數(shù)字
* 使用百分?jǐn)?shù)最終也會(huì)轉(zhuǎn)換為0-255之間的數(shù)
* 0%表示0
* 100%表示255
* 也可以使用十六進(jìn)制的rgb值來(lái)表示顏色,原理和上邊RGB原理一樣凑保,只不過(guò)使用十六進(jìn)制數(shù)來(lái)代替冈爹,使用三組兩位的十六進(jìn)制數(shù)組來(lái)表示一個(gè)顏色,每組表示一個(gè)顏色
* 第一組表示紅色的濃度欧引,范圍00-ff
* 第二組表示綠色的濃度频伤,范圍00-ff
* 第三組表示藍(lán)色的濃度,范圍00-ff
* 語(yǔ)法:#紅色綠色藍(lán)色
* 十六進(jìn)制:
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示沒(méi)有芝此,相當(dāng)于rgb中的0
* ff表示最大憋肖,相當(dāng)于rgb中255
* 紅色:#ff0000
* 像這種兩位兩位重復(fù)的顏色,可以簡(jiǎn)寫(xiě)
* 比如:#ff0000 可以寫(xiě)成 #f00
* #abc #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/
/* background-color: rgb(100%,50%,50%); */
/* background-color: #0000ff; */
/*background-color: #00f;*/
/* background-color: #084098; */
字體分類
- serif(襯線字體)
- sans-serif(非襯線字體)
- monospace (等寬字體)
- cursive (草書(shū)字體)
- fantasy (虛幻字體)
斜體和粗體
- font-style用來(lái)指定文本的斜體婚苹。
- 指定斜體:font-style:italic
- 指定非斜體:font-style:normal
- font-weight用來(lái)指定文本的粗體岸更。
- 指定粗體:font-weight:bold
- 指定非粗體:font- weight:normal
字體屬性簡(jiǎn)寫(xiě)
font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
語(yǔ)法: – font:加粗 斜體 小型大寫(xiě) 大小/行高 字體
這里前邊幾個(gè)加粗膊升、斜體和小型大寫(xiě)的順 序無(wú)所謂怎炊,也可以不寫(xiě),但是大小和字體 必須寫(xiě)且必須寫(xiě)到后兩個(gè)。
行間距
line-height用于設(shè)置行高评肆,行高越大則行 間距越大债查。
行間距 = line-height – font-size
通過(guò)設(shè)置line-height可以間接的設(shè)置行高
可以接收的值:
1.直接接收一個(gè)大小
2.可以指定一個(gè)百分?jǐn)?shù),則會(huì)相對(duì)于字體去計(jì)算行高
3.可以直接傳一個(gè)數(shù)值瓜挽,則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)
大寫(xiě)化
text-transform樣式用于將元素中的字母全都變成大寫(xiě)盹廷。
大寫(xiě):text-transform:uppercase
小寫(xiě):text- tansform:lowercase
首字母大寫(xiě):text-transform:capitalize
正常:text-transform:none
字體的其他樣式
font-style可以用來(lái)設(shè)置文字的斜體
- 可選值:
normal 默認(rèn)值,文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分久橙,也就是說(shuō)我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic
font-weight可以用來(lái)設(shè)置文本的加粗效果
- 可選值:
normal 默認(rèn)值速和,文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
但是由于用戶的計(jì)算機(jī)往往沒(méi)有這么多級(jí)別的字體,所以200有可能比100粗剥汤,但也有可能是一樣的
font-variant可以用來(lái)設(shè)置小型大寫(xiě)字母
- 可選值:
normal 默認(rèn)值颠放,文字正常顯示
small-caps 文本以小型大寫(xiě)字母顯示
小型大寫(xiě)字母:
將所有的字母都以大寫(xiě)形式顯示,但是小寫(xiě)字母的小型大寫(xiě)吭敢,要比大寫(xiě)字母小一些
文本樣式
text-transform可以用來(lái)設(shè)置文本的大小寫(xiě)
可選值:
none 默認(rèn)值碰凶,該怎么顯示就怎么顯示,不做任何處理
capitalize 單詞的首字母大寫(xiě)鹿驼,通過(guò)空格來(lái)識(shí)別單詞
uppercase 所有的字母都大寫(xiě)
lowercase 所有的字母都小寫(xiě)
text-decoration可以用來(lái)設(shè)置文本的修飾
可選值:
none:默認(rèn)值欲低,不添加任何修飾,正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
letter-spacing用來(lái)設(shè)置字符之間的間距畜晰。
word-spacing用來(lái)設(shè)置單詞之間的間距砾莱。
這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百 分?jǐn)?shù)作為值。正數(shù)代表的是增加距離凄鼻,而 負(fù)數(shù)代表減少距離腊瑟。
text-align用于設(shè)置文本的對(duì)齊方式
可選值:
left 默認(rèn)值,文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
- 通過(guò)調(diào)整文本之間的空格的大小块蚌,來(lái)達(dá)到一個(gè)兩端對(duì)齊的目的
首行縮進(jìn)
text-indent用來(lái)設(shè)置首行縮進(jìn)
這個(gè)值一般都會(huì)使用em作為單位
當(dāng)給它指定一個(gè)正值時(shí)闰非,會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
如果為它指定一個(gè)負(fù)值,則會(huì)向左移動(dòng)指定的像素
通過(guò)這種方式可以將一些不想顯示的文字隱藏起來(lái)