今天學(xué)習(xí)的知識(shí)點(diǎn)：
? 1、/*設(shè)置字體顏色，使用color來(lái)設(shè)置文字的顏色*/
color: red;
/*設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身的大小，在頁(yè)面中，每個(gè)文字都是處在一個(gè)看不見(jiàn)的框中的，我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置格的高度，并不是字體的大小，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會(huì)比格大，根據(jù)字體的不同，顯示效果也不同*/
font-size: 30px;
/*
通過(guò)font-family可以指定文字的字體
當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體
該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開(kāi)
當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊沒(méi)有，再嘗試下一個(gè)
*/
/*font-family: arial, 微軟雅黑;*/
/*
瀏覽器使用的字體默認(rèn)就是計(jì)算機(jī)中的字體，如果計(jì)算機(jī)中有，則使用，如果沒(méi)有就不用
在開(kāi)發(fā)中，如果字體太奇怪，用的人太少了，盡量不要使用，有可能用戶的電腦沒(méi)有，就不能達(dá)到想要的效果
*/
/*font-family: 華文彩云, arial, 微軟雅黑;*/
font-family: "Segoe Script";
2、在網(wǎng)頁(yè)中將字體分成5大類：
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書(shū)字體）
fantasy （虛幻字體）
可以將字體設(shè)置為這些大的分類，瀏覽器會(huì)自動(dòng)選擇指定的字體，并應(yīng)用樣式
一般會(huì)將字體的大分類，指定為font-family中的最后一個(gè)字體
3、font-style可以用來(lái)設(shè)置文字的斜體
font-style可以用來(lái)設(shè)置文字的斜體- 可選值：
normal 默認(rèn)值，文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分，也就是說(shuō)我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic
*/
font-style: italic;
/*
font-weight可以用來(lái)設(shè)置文本的加粗效果
- 可選值：
normal 默認(rèn)值，文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
但是由于用戶的計(jì)算機(jī)往往沒(méi)有這么多級(jí)別的字體，所以200有可能比100粗，但也有可能是一樣的
*/
font-weight: bold;
/*
font-variant可以用來(lái)設(shè)置小型大寫(xiě)字母
- 可選值：
normal 默認(rèn)值，文字正常顯示
small-caps 文本以小型大寫(xiě)字母顯示
小型大寫(xiě)字母：
將所有的字母都以大寫(xiě)形式顯示，但是小寫(xiě)字母的小型大寫(xiě)，要比大寫(xiě)字母小一些
*/
font-variant: small-caps;
}
.p2{
/*設(shè)置一個(gè)文字大小*/
font-size: 50px;
/*設(shè)置一個(gè)字體*/
font-family: 華文彩云;
/*設(shè)置文字斜體*/
font-style: italic;
/*設(shè)置文字加粗*/
font-weight: bold;
/*設(shè)置一個(gè)小型大寫(xiě)字母*/
font-variant: small-caps;
}
.p3{
/*
在CSS中還為我們提供了一個(gè)樣式叫font，使用該樣式可以同時(shí)設(shè)置字體相關(guān)的所有樣式
可以將字體的樣式值統(tǒng)一寫(xiě)在font樣式中，不同的值之間使用空格隔開(kāi)
使用font設(shè)置字體樣式時(shí)，斜體 加粗 小大字母，沒(méi)有順序要求，甚至可寫(xiě)可不寫(xiě)，如果不寫(xiě)則使用默認(rèn)值
但是要求文字的大小和字體必須寫(xiě)，而且字體必須是最后一個(gè)樣式，大小必須是倒數(shù)第二個(gè)樣式
實(shí)際上使用簡(jiǎn)寫(xiě)屬性也會(huì)有一個(gè)比較好的性能
*/
4、在CSS中并沒(méi)有直接提供設(shè)置行間距的方式，我們只能通過(guò)設(shè)置行高來(lái)間接的設(shè)置，行高越大行間距越大
使用line-height來(lái)設(shè)置行高
行高類似于我們上學(xué)用的單線本，單線本是一行一行的，線與線之間的距離就是行高
網(wǎng)頁(yè)中的文字實(shí)際上也是寫(xiě)在一個(gè)看不見(jiàn)的線中的，而文字會(huì)默認(rèn)在行高中垂直居中顯示
行間距 = 行高 - 字體大小
*/
.p1{
/*
通過(guò)設(shè)置line-height可以間接的設(shè)置行高
可以接收的值：
1.直接接收一個(gè)大小
2.可以指定一個(gè)百分?jǐn)?shù)，則會(huì)相對(duì)于字體去計(jì)算行高
3.可以直接傳一個(gè)數(shù)值，則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)
5、text-transform可以用來(lái)設(shè)置文本的大小寫(xiě)
可選值：
none 默認(rèn)值，該怎么顯示就怎么顯示，不做任何處理
capitalize 單詞的首字母大寫(xiě)，通過(guò)空格來(lái)識(shí)別單詞
uppercase 所有的字母都大寫(xiě)
lowercase 所有的字母都小寫(xiě)
*/
text-transform: lowercase;
}
.p2{
/*
text-decoration可以用來(lái)設(shè)置文本的修飾
可選值：
none：默認(rèn)值，不添加任何修飾，正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線
*/
text-decoration: line-through;
}
a{
/*
超鏈接會(huì)默認(rèn)添加下劃線，也就是超鏈接的text-decoration的默認(rèn)值是underline
如果需要去除超鏈接的下劃線則需要將該樣式設(shè)置為none*/
text-decoration: none;
}
.p3{
/*letter-spacing可以指定字符間距*/
/*letter-spacing: 10px;*/
/*word-spacing可以設(shè)置單詞之間的距離，實(shí)際上就是設(shè)置詞與詞之間空格的大小*/
word-spacing: 100px;
}
.p4{
/*
text-align用于設(shè)置文本的對(duì)齊方式
可選值：
left 默認(rèn)值，文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
- 通過(guò)調(diào)整文本之間的空格的大小，來(lái)達(dá)到一個(gè)兩端對(duì)齊的目的
*/
text-align: justify;
}
.p5{
font-size: 20px;
/*
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)
*/
text-indent: -99999px;
}
6、使用width來(lái)設(shè)置盒子內(nèi)容區(qū)的寬度
使用height來(lái)設(shè)置盒子內(nèi)容區(qū)的高度
width和height只是設(shè)置的盒子內(nèi)容區(qū)的大小，而不是盒子的整個(gè)大小，盒子可見(jiàn)框的大小由內(nèi)容區(qū)，內(nèi)邊距和邊框共同決定
*/
width: 300px;
height: 300px;
/*設(shè)置背景顏色*/
background-color: #bfa;
/*為元素設(shè)置邊框
要為一個(gè)元素設(shè)置邊框必須指定三個(gè)樣式
border-width:邊框的寬度
border-color:邊框顏色
border-style:邊框的樣式
*/
/*border-width: 10px;*/
/*
使用border-width可以分別指定四個(gè)邊框的寬度
如果在border-width指定了四個(gè)值
則四個(gè)值會(huì)分別設(shè)置給上、右、下、左，按照順時(shí)針的方向設(shè)置的
如果指定三個(gè)值
則三個(gè)值會(huì)分別設(shè)置給上、左右、下
如果指定兩個(gè)值
則兩個(gè)值會(huì)分別設(shè)置給上下、左右
如果指定一個(gè)值，則四邊全都是該值
除了border-width，CSS中還提供了四個(gè)border-xxx-width
xxx的值可能是top right bottom left
專門(mén)用來(lái)設(shè)置指定邊的寬度
*/
/*border-width:10px 20px 30px 40px;*/
/*border-width:10px 20px 30px;*/
/* border-width:10px 20px; */
border-width:10px;
/*border-top-width: 100px;*/
/*
* 設(shè)置邊框的顏色
* 和寬度一樣，color也提供四個(gè)方向的樣式，可以分別指定顏色
* border-xxx-color
*/
border-color: red;
/*border-color: red yellow orange blue;*/
/*border-color: red yellow orange;*/
/*border-color: red yellow;*/
/*
* 設(shè)置邊框的樣式
* 可選值：
* none，默認(rèn)值，沒(méi)有邊框
* solid 實(shí)線
* dotted 點(diǎn)狀邊框
* dashed 虛線
* double 雙線
*
* style也可以分別指定四個(gè)邊的邊框樣式，規(guī)則和width一致，同時(shí)它也提供border-xxx-style四個(gè)樣式，來(lái)分別設(shè)置四個(gè)邊
7、設(shè)置邊框
大部分的瀏覽器中，邊框的寬度和顏色都是有默認(rèn)值，而邊框的樣式默認(rèn)值都是none
*/
/* border-width: 10px;
border-color: red;
border-style: solid; */
/*
border
- 邊框的簡(jiǎn)寫(xiě)樣式，通過(guò)它可以同時(shí)設(shè)置四個(gè)邊框的樣式，寬度，顏色
- 而且沒(méi)有任何的順序要求
- border一指定就是同時(shí)指定四個(gè)邊不能分別指定
border-top border-right border-bottom border-left
可以單獨(dú)設(shè)置四個(gè)邊的樣式，規(guī)則和border一樣，只不過(guò)它只對(duì)一個(gè)邊生效8
8、內(nèi)邊距（padding），指的是盒子的內(nèi)容區(qū)與盒子邊框之間的距離，一共有四個(gè)方向：
padding-top
padding-right
padding-bottom
padding-left
內(nèi)邊距會(huì)影響盒子的可見(jiàn)框的大小，元素的背景會(huì)延伸到內(nèi)邊距
盒子的大小由內(nèi)容區(qū)、內(nèi)邊距和邊框共同決定
盒子可見(jiàn)框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子可見(jiàn)框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
*/
/*設(shè)置上內(nèi)邊距*/
/*padding-top: 100px;*/
/*設(shè)置右內(nèi)邊距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/
/*
使用padding可以同時(shí)設(shè)置四個(gè)邊框的樣式，規(guī)則和border-width一致
*/
/*padding: 100px;*/
/*padding: 100px 200px;*/
/*padding: 100px 200px 300px;*/
padding: 100px 200px 300px 400px;
9、外邊距指的是當(dāng)前盒子與其他盒子之間的距離，他不會(huì)影響可見(jiàn)框的大小，而是會(huì)影響到盒子的位置
盒子有四個(gè)方向的外邊距：
margin-top
margin-right
margin-bottom
margin-left
由于頁(yè)面中的元素都是靠左靠上擺放的，所以注意當(dāng)我們?cè)O(shè)置上和左外邊距時(shí)，會(huì)導(dǎo)致盒子自身的位置發(fā)生改變，而如果是設(shè)置右和下外邊距會(huì)改變其他盒子的位置
*/
/*設(shè)置上外邊距，即盒子的上邊框與其他盒子的距離*/
/*margin-top: 100px;*/
/*左外邊距*/
/*margin-left: 100px;*/
/*設(shè)置右和下外邊距*/
/*margin-right: 100px;
margin-bottom: 100px;*/
/*
外邊距也可以指定為一個(gè)負(fù)值，如果外邊距設(shè)置的是負(fù)值，則元素會(huì)向反方向移動(dòng)
*/
/*margin-left: -100px;
margin-top: -100px;
margin-bottom: -100px;*/
/*margin-bottom: -100px;*/
/*
margin還可以設(shè)置為auto，auto一般只設(shè)置給水平方向的margin
如果只指定，左外邊距或右外邊距的margin為auto則會(huì)將外邊距設(shè)置為最大值
垂直方向外邊距如果設(shè)置為auto，則外邊距默認(rèn)就是0
如果將left和right同時(shí)設(shè)置為auto，則會(huì)將兩側(cè)的外邊距設(shè)置為相同的值，就可以使元素自動(dòng)在父元素中居中
所以我們經(jīng)常將左右外邊距設(shè)置為auto，以使子元素在父元素中水平居中
*/
/*margin-left: auto;
margin-right: auto;*/
/*margin-top: auto;*/
/*
外邊距同樣可以使用簡(jiǎn)寫(xiě)屬性 margin，可以同時(shí)設(shè)置四個(gè)方向的外邊距,規(guī)則和padding一樣
10、垂直外邊距的重疊
在網(wǎng)頁(yè)中相鄰的垂直方向的外邊距會(huì)發(fā)生外邊距的重疊
所謂的外邊距重疊指兄弟元素之間的相鄰?fù)膺吘鄷?huì)取最大值而不是取和
如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會(huì)設(shè)置給父元素
