選擇器
<style type="text/css">
1、元素選擇器
作用：通過元素選擇器可以選擇頁面中的所有指定元素
語法：標簽名{}
eg:p{
color:red;
}
<p>山上有座廟</p>
2踪区、id選擇器(對于id選擇器來說，不建議使用復合選擇器)
作用：通過元素的id屬性值選中唯一的一個元素
語法：#id屬性值{}
eg:#p1{
font-size: 20px;
}
<p id="p1">從前有座山</p>
3吊骤、類選擇器
作用：通過元素的class屬性值選中一組元素
語法：.class屬性值{}
eg：.p2{
font-size: 20px;
color: blue;
}
<p class="p2">長得真是俏</p>
4缎岗、通配選擇器(全選)
作用：可以用來選中頁面中的所有的元素
語法：*{}
eg：*{
color: red;
}
5、復合選擇器（交集選擇器）
作用：可以選中同時滿足多個選擇器的元素
語法：選擇器1選擇器2選擇器N{}
eg： span.p3{
background-color: yellow;
}
<span class='p3'>長得真是俏</span>
6白粉、 我們可以為元素設置class屬性
它和id屬性類似传泊，只不過class屬性可以重復
擁有相同class屬性值的元素怀樟，我們說他們是一組元素
可以同時為一個元素設置多個class屬性值趁窃，多個值之間使用空格隔開
eg:<p class="p2 hello">床前明月光</p>
7馅巷、選擇器分組（并集選擇器）
作用：通過選擇器分組可以同時選中多個選擇器對應的元素
語法：選擇器1,選擇器2,選擇器N{}
eg:#p1,.p2,h1{
background-color: yellow;
}
8尘执、子元素和后代元素選擇器
1、后代元素選擇器
作用：選中指定元素的指定后代元素
語法：祖先元素 后代元素{}
2薪鹦、子元素選擇器
作用：選中指定父元素的指定子元素
語法：父元素 > 子元素
IE6及以下的瀏覽器不支持子元素選擇器
3掌敬、元素之間的關系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素池磁，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
eg:為div中的span設置一個顏色為綠色
#d1 span{
color: greenyellow;
}
選中id為d1的div中的p元素中的span元素
#d1 p span{
font-size: 50px;
}
為div的子元素span設置一個背景顏色為黃色
div > span{
background-color: yellow;
}
<div id="d1">
<span>我是div標簽中的span</span>
<p><span>我是p標簽中的span</span></p>
</div>
<div>
<span>我是body標簽中的span</span>
</div>
9奔害、偽類選擇器
偽類專門用來表示元素的一種特殊的狀態(tài)
比如：訪問過的超鏈接、普通的超鏈接地熄、獲取焦點的文本框
當我們需要為處在這些特殊狀態(tài)的元素設置樣式時华临，就可以使用偽類
eg: 為沒訪問過的鏈接設置一個顏色為綠色
:link 表示普通的鏈接（沒訪問過的鏈接）
為訪問過的鏈接設置一個顏色為紅色
:visited 表示訪問過的鏈接
瀏覽器是通過歷史記錄來判斷一個鏈接是否訪問過
由于涉及到用戶的隱私問題，所以使用:visited偽類只能設置字體的顏色
a:link{
color: yellowgreen;
font-size: 50px;
}
a:visited{
color: red;
}
<a class="abc" >訪問過的鏈接</a>
<br /><br />
<a class="bcd" >沒訪問過的鏈接</a>
:hover 表示鼠標移入的狀態(tài)（光標觸摸變藍）
eg:a:hover{
color: skyblue;
}
:active 表示超鏈接被點擊的狀態(tài)
eg:a:active{
color: black;
}
:hover和:active也可以為其它元素設置
IE6中端考，不支持對超鏈接以外的元素設置:hover和:active
eg:p:hover{
background-color: gold;
}
p:active{
background-color: orange;
}
文本框獲取焦點以后雅潭，修改背景顏色為黃色
使用input可以創(chuàng)建一個文本輸入框
<input type="text" />
eg:input:focus{
background-color: yellow;
}
為p標簽中選中的內(nèi)容使用樣式可以使用::selection偽類
注意：這個偽類在火狐中需要采用另一種方式編寫
兼容大部分瀏覽器的
eg:p::selection{
background-color: orange;
}
兼容火狐的
eg:p::-moz-selection{
background-color: orange;
}
10、偽元素
使用偽元素來表示元素中的一些特殊的位置
為p中第一個字符來設置一個特殊的樣式
eg： p:first-letter{
color: red;
font-size: 20px;
}
為p中的第一行設置一個背景顏色為黃色
eg：p:first-line{
background-color: yellow;
}
:before表示元素最前邊的部分
一般它都需要結合content這個樣式一起使用
通過content可以向before或after的位置添加一些內(nèi)容
:after表示元素最后邊的部分
eg：p:before{
content: "我會出現(xiàn)在整個段落的最前邊";
color: green;}
p:after{
content: "我會出現(xiàn)在整個段落的最后邊";
color: orange;}
11却特、屬性選擇器
為所有具有title屬性的p元素扶供，設置一個背景顏色為黃色
作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
語法：
[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結尾的元素
[屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
eg：p[title]{
background-color: yellow;}
為title屬性值以ab開頭的元素設置一個背景顏色為黃色
eg：p[title^="ab"]{
background-color: yellow;}
為title屬性值以c結尾的元素設置一個背景顏色
eg：p[title$="c"]{
background-color: yellow;
}
為title屬性值包含c的元素設置一個背景顏色
title屬性，這個屬性可以給任何標簽指定
當鼠標移入到元素上時裂明，元素中的title屬性的值將會作為提示文字顯示
eg：p[title*="c"]{
background-color: yellow;
<p title="hello">我是一個段落</p>
<p>我是一個段落</p>
<p title="abbc">我是一個段落</p>
<p title="abccd">我是一個段落</p>
<p title="abc">我是一個段落</p>
12椿浓、子元素選擇器
為第一個p標簽設置一個背景顏色為黃色
:first-child 可以選中第一個子元素
:last-child 可以選中最后一個子元素
:nth-child 可以選中任意位置的子元素
該選擇器后邊可以指定一個參數(shù)，指定要選中第幾個子元素
even 表示偶數(shù)位置的子元素
odd 表示奇數(shù)位置的子元素
eg：body>p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
p:nth-child(even){
background-color: yellow;
}
:first-of-type
:last-of-type
:nth-of-type
和child類似闽晦，只不過child是在所有的子元素中找
而type是在當前類型的子元素中找
eg：p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
13扳碍、兄弟元素選擇器
為span后的一個p元素設置一個背景顏色為黃色
后一個兄弟元素選擇器
作用：可以選中一個元素后緊挨著的指定的兄弟元素
語法：前一個 + 后一個
eg：span + p{
background-color: yellow;
}
選中后邊的所有兄弟元素
語法：前一個 ~ 后邊所有
eg：span ~ p{
background-color: yellow;
}
14、否定偽類
為所有的p元素設置一個背景顏色為黃色仙蛉，除了class值為hello的
作用：可以從已選中的元素中剔除出某些元素
語法：
:not(選擇器)
eg：p:not(.hello){
background-color: yellow;
}
15笋敞、樣式的繼承
像兒子可以繼承父親的遺產(chǎn)一樣荠瘪，在CSS中夯巷，祖先元素上的樣式，也會被他的后代元素所繼承
利用繼承磕瓷，可以將一些基本的樣式設置給祖先元素符匾，這樣所有的后代元素將會自動繼承這些樣式
但是露乏，并不是所有的樣式都會被子元素所繼承墓捻，比如：背景考赛、邊框复哆、定位相關的樣式都不會被繼承
eg：<div style="background-color: yellow;">
<p>
我是p標簽中的文字
<span>我是span中的文字</span>（黃色背景）
</p>
</div>
<span>我是p元素外的span</span>（不會變黃色背景）
16阎姥、選擇器的優(yōu)先級
當使用不同的選擇器记舆，選中同一個元素時，并且設置相同的樣式時呼巴，這時樣式之間產(chǎn)生了沖突泽腮，最終到底采用哪個選擇器定義的樣式，由選擇器的優(yōu)先級（權重）決定衣赶，優(yōu)先級高的優(yōu)先顯示
優(yōu)先級的規(guī)則
內(nèi)聯(lián)樣式诊赊，優(yōu)先級1000
id選擇器，優(yōu)先級100
類和偽類府瞄，優(yōu)先級10
元素選擇器碧磅，優(yōu)先級1
通配*，優(yōu)先級0
繼承的樣式，沒有優(yōu)先級
當選擇器中包含多種選擇器時续崖，需要將多種選擇器的優(yōu)先級相加敲街，然后再比較
但是注意，選擇器優(yōu)先級計算不會超過他的最大的數(shù)量級
如果選擇器的優(yōu)先級一樣严望，則使用靠后的樣式并集選擇器的優(yōu)先級是單獨計算的
div, p, #p1, .hello{}
可以在樣式的最后添加一個!important，則此時該樣式將會獲取一個最高的優(yōu)先級逻恐，將會優(yōu)先于所有的樣式顯示像吻，甚至超過內(nèi)聯(lián)樣式，但是在開發(fā)中复隆，盡量避免使用!important
eg：.p1{
background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
*{
font-size: 50px;
}
p{
font-size: 30px;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: skyblue !important;
}
class="p1 p3" id="p2" style="background-color: orange;">
我是一個段落
<span>我是p標簽中的span</span>
17拨匆、a的偽類
涉及到a的偽類一共有四個
:link
:visited
:hover
:active
而這四個選擇器的優(yōu)先級是一樣的
eg：a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: orange;
}
a:active{
color: cornflowerblue;
}
<a >訪問過的鏈接</a>
<br>
<a >未訪問過的鏈接 </a>(光標觸摸會變橙色)
18、文本標簽
em和strong這兩個標簽都表示一個強調(diào)的內(nèi)容
em主要表示語氣上的強調(diào)挽拂，在瀏覽器中默認使用斜體顯示
strong表示強調(diào)的內(nèi)容惭每，比em更強烈，默認使用粗體顯示
eg：今天天氣<em>真不錯</em>亏栈！
<strong>
注意：如果你不認真上課台腥，你就找不到好工作！
</strong>
i標簽中的內(nèi)容會以斜體顯示
b標簽中的內(nèi)容會以粗體顯示
h5規(guī)范中規(guī)定：對于不需要著重的內(nèi)容绒北，而是單純的斜體或者是加粗黎侈，就可以使用i和b標簽
eg：<i>我是i標簽中的內(nèi)容</i>
<b>我是b標簽中的內(nèi)容</b>
small標簽中的內(nèi)容會比他父元素中的文字要小一些
在H5中使用small標簽來表示一些細則一類的內(nèi)容
比如：合同中的小字，網(wǎng)站的版權聲明都可以放到small
eg： 我是p標簽中的內(nèi)容<small>我是small標簽中的內(nèi)容</small>
我是p標簽中的內(nèi)容<big>我是big標簽中的內(nèi)容</big>
網(wǎng)頁中所有的加書名號的內(nèi)容都可以使用cite標簽闷游，表示參考的內(nèi)容峻汉，比如：書名、歌名脐往、話劇名休吠、電影名……
eg：<cite>《三體》</cite>是我最喜歡的一本書
q標簽表示一個短的引用（行內(nèi)引用），q標簽引用的內(nèi)容业簿，瀏覽器會默認加上引號
eg：子曰：<q>學而時習之瘤礁，不亦說乎！</q>
blockquote標簽表示一個長引用（塊級引用）
eg：子曰：<blockquote>有朋自遠方來辖源，樂呵樂呵蔚携！</blockquote>
使用sup標簽來設置一個上標
eg：<p>2<sup>2</sup></p>
<p>趙薇<sup><a href="#">[1]</a></sup></p>
使用sub標簽用來表示一個下標
eg：<p>H<sub>2</sub>O</p>
使用del標簽來表示一個刪除的內(nèi)容，會自動添加刪除線
eg：<del>17.75</del><br>
15.54<br>
ins表示一個插入的內(nèi)容克饶，會自動添加下劃線
eg：郭敬明的個頭兒真<ins>高啊</ins>酝蜒！
需要在頁面中直接編寫一些代碼
pre是一個預格式標簽，會將代碼中的格式保存矾湃，不會忽略多個空格及換行
code專門用來表示代碼
我們一般結合使用pre和code來表示一段代碼
eg：<pre>
<code>
if(True)
print("hello")
</code>
</pre>
19亡脑、列表
列表就相當于去超市購物時的那個購物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁中一共有三種列表：
1霉咨、無序列表
2蛙紫、有序列表
3、定義列表
去掉項目符號
ul{
list-style: none;
}
無序列表
使用ul標簽來創(chuàng)建一個無序列表
使用li在ul中創(chuàng)建一個一個的列表項途戒，一個li就是一個列表項
通過type屬性可以修改無序列表的項目符號坑傅，可選值：
disc：默認值，實心的圓點
square：實心的方塊
circle：空心的圓圈
注意：默認的項目符號我們一般都不使用
如果需要設置項目符號喷斋，則可以采用為li設置背景圖片的方式來設置
ul和li都是塊元素
eg：<ul>
<li>西門大官人</li>
<li>柴大官人</li>
<li>許大官人</li>
<li>唐僧大官人</li>
</ul>
有序列表和無序列表類似唁毒，只不過它使用ol來代替ul
有序列表使用有序的序號作為項目符號
type屬性，可以指定序號的類型星爪，可選值：
1浆西，默認值，使用阿拉伯數(shù)字
a/A顽腾，采用小寫或大寫字母作為序號
i/I近零，采用小寫或大寫的羅馬數(shù)字作為序號
ol也是塊元素
eg：<ol type="1">
<li>結構</li>
<li>表現(xiàn)</li>
<li>行為</li>
</ol>
列表之間都是可以互相嵌套，可以在無序列表中放個有序列表抄肖，也可以在有序列表中放一個無序列表
eg：<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)容進行定義
使用dl來創(chuàng)建一個定義列表久信，它有兩個子標簽
dt：被定義的內(nèi)容
dd：對定義內(nèi)容的描述
同樣，dl憎瘸、ul入篮、ol之間都可以互相嵌套
eg：<dl>
<dt>武松</dt>
<dd>景陽岡打虎英雄，戰(zhàn)斗力99</dd>
<dd>后打死西門慶幌甘，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家潮售，戰(zhàn)斗力0</dd>
</dl>
20、單位
長度單位
像素px
- 像素是我們在網(wǎng)頁中使用得最多的一個單位
一個像素就相當于屏幕中的一個小點
我們的屏幕實際上就是由這些像素點構成的
但是這些像素點是不能直接看見的
- 不同顯示器一個像素的大小也不相同
顯示效果越好锅风、越清晰酥诽，像素就越小，反之像素越大
百分比%
- 也可以將單位設置為一個百分比的形式
這樣瀏覽器將會根據(jù)其父元素的樣式來計算該值
- 使用百分比的好處是皱埠，當父元素的屬性值發(fā)生變化時肮帐，子元素也會按照比例發(fā)生改變
- 在我們創(chuàng)建一個自適應的頁面時，經(jīng)常使用百分比作為單位
em
- em和百分比類似边器，它是相對于當前元素的字體大小來計算的
- 1em = 1font-size
- 使用em時训枢，當字體大小發(fā)生改變時，em也會隨之改變
- 當設置字體相關的樣式時忘巧，經(jīng)常會使用em
eg：
.box{
width: 200px;
height: 200px;
background-color: red;
}
.box1{
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
<div class="box">
<div class="box1"></div>
</div>
21恒界、顏色的單位
在CSS可以直接使用顏色的單詞來表示不同的顏色
紅色：red
藍色：blue
綠色：green
也可以使用RGB值來表示不同的顏色
-
所謂的RGB值指的是通過Red Green Blue三元色，
通過這三種顏色的不同的濃度砚嘴，來表示出不同的顏色- eg：rgb(紅色的濃度,綠色的濃度,藍色的濃度); - 顏色的濃度需要一個0-255之間的值十酣，255表示最大涩拙，0表示沒有 - 濃度也可以采用一個百分數(shù)來設置，需要一個0% - 100%之間的數(shù)字
使用百分數(shù)最終也會轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
100%表示255
也可以使用十六進制的rgb值來表示顏色耸采，原理和上邊RGB原理一樣兴泥，只不過使用十六進制數(shù)來代替，使用三組兩位的十六進制數(shù)組來表示一個顏色虾宇，每組表示一個顏色
第一組表示紅色的濃度搓彻，范圍00-ff
第二組表示綠色的濃度，范圍00-ff
第三組表示藍色的濃度嘱朽，范圍00-ff
語法：#紅色綠色藍色
十六進制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒有好唯，相當于rgb中的0
ff表示最大，相當于rgb中255
紅色：#ff0000
像這種兩位兩位重復的顏色燥翅，可以簡寫
比如：#ff0000 可以寫成 #f00
#abc #aabbcc
eg：
/*background-color: rgb(161,187,215);*/
/* background-color: rgb(100%,50%,50%); */
/* background-color: #0000ff; */
/*background-color: #00f;*/
/* background-color: #084098; */
22、字體的樣式
.p1{
/*設置字體顏色蜕提，使用color來設置文字的顏色*/
color: red;
/*設置文字的大小森书，瀏覽器中一般默認的文字大小都是16px，font-size設置的并不是文字本身谎势，實際上是設置格的高度凛膏，一般情況下文字都要比這個格要小一些，也有時會比格大脏榆，根據(jù)字體的不同猖毫，顯示效果也不同*/
font-size: 30px;
/*通過font-family可以指定文字的字體，當采用某種字體時须喂，如果瀏覽器支持則使用該字體吁断，如果字體不支持，則使用默認字體坞生，該樣式可以同時指定多個字體仔役，多個字體之間使用“,”分開，當采用多個字體時是己，瀏覽器會優(yōu)先使用前邊的字體又兵，如果前邊沒有，再嘗試下一個*/
/*font-family: arial, 微軟雅黑;*/
/*瀏覽器使用的字體默認就是計算機中的字體卒废，如果計算機中有沛厨，則使用，如果沒有就不用摔认，在開發(fā)中逆皮，如果字體太奇怪，用的人太少了级野，盡量不要使用页屠，有可能用戶的電腦沒有粹胯，就不能達到想要的效果*/
/*font-family: 華文彩云, arial, 微軟雅黑;*/
font-family: "Segoe Script";
}
<p class="p1">
我是一個p標簽，ABCDEFGabcdefg
</p>
23辰企、字體的分類
p{
font-family: arial, 微軟雅黑, 華文彩云, serif;
}
在網(wǎng)頁中將字體分成5大類：
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書字體）
fantasy （虛幻字體）
可以將字體設置為這些大的分類风纠，瀏覽器會自動選擇指定的字體，并應用樣式
一般會將字體的大分類牢贸，指定為font-family中的最后一個字體
eg;<p style="font-size: 50px; font-family: serif;">襯線字體：我是一段文字竹观，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非襯線字體：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等寬字體：我是一段文字潜索，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草書字體：我是一段文字臭增，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虛幻字體：我是一段文字，ABCDEFGabcdefg</p>
24竹习、字體的其它樣式
font-style可以用來設置文字的斜體
- 可選值：
normal 默認值誊抛，文字正常顯示
italic 文字會以斜體顯示
oblique 文字會以傾斜的效果顯示
- 大部分瀏覽器都不會對傾斜和斜體做區(qū)分，也就是說我們設置italic和oblique效果是一樣的
- 一般我們只會使用italic
font-weight可以用來設置文本的加粗效果
- 可選值：
normal 默認值整陌，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個值
但是由于用戶的計算機往往沒有這么多級別的字體拗窃，所以200有可能比100粗，但也有可能是一樣的
font-variant可以用來設置小型大寫字母
- 可選值：
normal 默認值泌辫，文字正常顯示
small-caps 文本以小型大寫字母顯示
小型大寫字母：
將所有的字母都以大寫形式顯示随夸，但是小寫字母的小型大寫，要比大寫字母小一些
.eg：p2{
/*設置一個文字大小*/
font-size: 50px;
/*設置一個字體*/
font-family: 華文彩云;
/*設置文字斜體*/
font-style: italic;
/*設置文字加粗*/
font-weight: bold;
/*設置一個小型大寫字母*/
font-variant: small-caps;}
在CSS中還為我們提供了一個樣式叫font震放，使用該樣式可以同時設置字體相關的所有樣式
可以將字體的樣式值統(tǒng)一寫在font樣式中宾毒，不同的值之間使用空格隔開
使用font設置字體樣式時，斜體 加粗 小大字母殿遂，沒有順序要求诈铛，甚至可寫可不寫，如果不寫則使用默認值
但是要求文字的大小和字體必須寫勉躺，而且字體必須是最后一個樣式癌瘾，大小必須是倒數(shù)第二個樣式
實際上使用簡寫屬性也會有一個比較好的性能
eg：.p3{
font: bold italic small-caps 60px "微軟雅黑";
}
<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
<p class="p2">我是一段文字饵溅，ABCDEFGabcdefg</p>
<p class="p3">我是一段文字妨退，ABCDEFGabcdefg</p>
25、行間距
在CSS中并沒有直接提供設置行間距的方式蜕企，我們只能通過設置行高來間接的設置咬荷，行高越大行間距越大
使用line-height來設置行高
行高類似于我們上學用的單線本，單線本是一行一行的轻掩，線與線之間的距離就是行高
網(wǎng)頁中的文字實際上也是寫在一個看不見的線中的幸乒，而文字會默認在行高中垂直居中顯示
行間距 = 行高 - 字體大小
通過設置line-height可以間接的設置行高
可以接收的值：
1.直接接收一個大小
2.可以指定一個百分數(shù)，則會相對于字體去計算行高
3.可以直接傳一個數(shù)值唇牧，則行高會設置字體大小相應的倍數(shù)
eg：.p1{
line-height: 1;
font-size: 20px;}
對于單行文本來說罕扎，可以將行高設置為和父元素的高度一致聚唐，這樣可以是單行文本在父元素中垂直居中
eg：.box{
line-height: 200px;}
在font中也可以指定行高
在字體大小后可以添加/行高，來指定行高腔召，該值是可選的杆查，如果不指定則會使用默認值
eg：.p2{
line-height: 50px;
font: 30px "微軟雅黑";}
<div class="box">
<a href="#">我是一個超鏈接</a>
</div>
<p class="p2">
在我的后園，可以看見墻外有兩株樹臀蛛，一株是棗樹亲桦，還有一株也是棗樹。
<p class="p1">
在我的后園浊仆，可以看見墻外有兩株樹客峭，一株是棗樹，還有一株也是棗樹抡柿。 這上面的夜的天空舔琅，
</p>
26、文本的樣式
text-transform可以用來設置文本的大小寫
可選值：
none 默認值洲劣，該怎么顯示就怎么顯示搏明，不做任何處理
capitalize 單詞的首字母大寫，通過空格來識別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫
eg：.p1{
text-transform: lowercase;}
text-decoration可以用來設置文本的修飾
可選值：
none：默認值闪檬，不添加任何修飾，正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
eg:.p2{
text-decoration: line-through;}
超鏈接會默認添加下劃線购笆，也就是超鏈接的text-decoration的默認值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設置為none
eg:a{
text-decoration: none;}
letter-spacing可以指定字符間距/
/letter-spacing: 10px;/
/word-spacing可以設置單詞之間的距離粗悯，實際上就是設置詞與詞之間空格的大小
eg:.p3{
word-spacing: 100px;}
text-align用于設置文本的對齊方式
可選值：
left 默認值，文本靠左對齊
right 文本靠右對齊
center 文本居中對齊
justify 兩端對齊
-
通過調(diào)整文本之間的空格的大小同欠，來達到一個兩端對齊的目的
eg:.p4{ text-align: justify; }
text-indent用來設置首行縮進
這個值一般都會使用em作為單位
當給它指定一個正值時样傍，會自動向右側縮進指定的像素
如果為它指定一個負值，則會向左移動指定的像素
通過這種方式可以將一些不想顯示的文字隱藏起來
eg:.p5{
font-size: 20px;
text-indent: -99999px;}
<p class="p5">
在我的后園铺遂，可以看見墻外有兩株樹衫哥，一株是棗樹，還有一株也是棗樹襟锐。
</p>
<h1 class="p4">我是一個h1</h1>
<p class="p4">
在 我的后園撤逢，可以看見墻外有兩株樹，一株是棗樹粮坞，還有一株也是棗樹蚊荣。
</p>
<p class="p4">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p3">
在 我的后園，可以看見墻外有兩株樹莫杈，一株是棗樹互例，還有一株也是棗樹。 這上面的夜的天空筝闹，
</p>
<p class="p3">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<a href="#">我是超鏈接</a>
<p class="p2">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.”
</p>
<p class="p1">
“We should start back,” Gared urged as the woods began to grow dark around them. “The wildlings are dead.” “Do the dead frighten you?”
</p>
