CSS選擇器以及文本樣式
CSS學(xué)習(xí)
CSS
層疊樣式表（Cascading Style Sheets）
CSS可用來(lái)為網(wǎng)頁(yè)創(chuàng)建樣式表谐丢，通過(guò)樣式表可以對(duì)網(wǎng)頁(yè)進(jìn)行裝飾座舍。
CSS語(yǔ)法
選擇器 {樣式名:樣式值笛臣；樣式名:樣式值 ; }
例如：p{color:red;font-size:20px;}
行內(nèi)樣式
將樣式寫(xiě)到標(biāo)簽內(nèi)部的style屬性中,例如：
<p style="color: red;font-size: 30px"></p>
但是孤澎，這樣做的缺點(diǎn)是：導(dǎo)致結(jié)構(gòu)與表現(xiàn)耦合暇唾，同時(shí)導(dǎo)致樣式不能夠復(fù)用纯露，所以這種方式我們不使用剿骨。
內(nèi)部樣式表
可以將樣式直接寫(xiě)到style標(biāo)簽中，例如：
<style>
p{color:red; font-size: 30px;}
</style>
好處：使CSS獨(dú)立于HTML中埠褪，可以同時(shí)為多個(gè)標(biāo)簽設(shè)置樣式
缺點(diǎn)：只能在一個(gè)頁(yè)面中使用浓利，不能在多個(gè)頁(yè)面中使用
外部樣式表
可以將所有的樣式都保存到一個(gè)CSS文件中，在通過(guò)link標(biāo)簽將其引入到HTML中钞速，例如：
<link rel="stylesheets" type="text/css" href="style.css">
將樣式表放入到了頁(yè)面的外部贷掖，可以在多個(gè)頁(yè)面中引入，同時(shí)瀏覽器加載文件時(shí)可以使用緩存渴语。
selector選擇器
一苹威、元素選擇器
語(yǔ)法：
標(biāo)簽名{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>這是一個(gè)很完美的網(wǎng)頁(yè)</p>
</body>
</html>
效果如下：
二、類(lèi)選擇器
語(yǔ)法：
.className{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>類(lèi)選擇器</title>
<style>
.div1{
font: 微軟雅黑;
color: pink;
text-align: center;
font-size: 50px;
}
</style>
</head>
<body>
<div class="div1">真正的高度在于超越過(guò)去的自己</div>
</body>
</html>
效果如下：
三驾凶、id選擇器
根據(jù)元素的id屬性值選取 元素牙甫。
語(yǔ)法：
id{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id選擇器</title>
<style>
#div1{
font: 微軟雅黑;
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">真正的高度在于超越過(guò)去的自己</div>
</body>
</html>
顯示效果如下：
- id屬性是不能重復(fù)的
四、復(fù)合選擇器（交集選擇器）
復(fù)合選擇器调违，可以同時(shí)使用多個(gè)選擇器窟哺， 這樣可以選擇同時(shí)滿足多個(gè)選擇器的元素。
語(yǔ)法：
選擇器1選擇器2{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復(fù)合選擇器（交集選擇器）</title>
<style>
span.p3{
background-color: yellow;
}
</style>
</head>
<body>
<p class="p3">床前明月光</p>
<span class="p3">疑是地上霜</span>
</body>
</html>
效果如下：
五技肩、群組選擇器（并集選擇器）
群組選擇器且轨，可以同時(shí)使用多個(gè)選擇器， 多個(gè)選擇器將被同時(shí)應(yīng)用指定的樣式虚婿。
語(yǔ)法：
選擇器1,選擇器2,選擇器3 { }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>復(fù)合選擇器</title>
<style>
h1,p{
font-size: 50px;
text-align: center;
}
</style>
</head>
<body>
<h1>真正的高度在于超越過(guò)去的自己</h1>
<p>我曾經(jīng)跨過(guò)山和大海旋奢，也穿過(guò)人山人海，我曾經(jīng)擁有著的一切雳锋，轉(zhuǎn)眼間就飄散如煙黄绩。</p>
</body>
</html>
效果如下：
六、通用選擇器
通用選擇器玷过，可以同時(shí)選中頁(yè)面中的所有 元素爽丹。
語(yǔ)法：
*{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通用選擇器</title>
<style>
*{
font-size:50px;
text-align: center;
}
</style>
</head>
<body>
<p>真正的高度在于超越過(guò)去的自己</p>
<p>我曾經(jīng)跨過(guò)山和大海筑煮，也穿過(guò)人山人海，我曾經(jīng)擁有著的一切粤蝎，轉(zhuǎn)眼間就飄散如煙真仲。</p>
<p>床前明月光，疑是地上霜初澎。舉頭望明月秸应，低頭思故鄉(xiāng)。</p>
</body>
</html>
效果如下：
七碑宴、標(biāo)簽之間的關(guān)系
祖先元素
后代元素
父元素
子元素
兄弟元素
八软啼、后代選擇器
后代選擇器可以根據(jù)標(biāo)簽的關(guān)系，為處在 元素內(nèi)部的代元素設(shè)置樣式延柠。
語(yǔ)法：
祖先元素 后代元素 后代元素 { }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后代選擇器</title>
<style>
#d1 span{
color: greenyellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div標(biāo)簽中的span</span>
<p><span>我是p標(biāo)簽中的span</span></p>
</div>
</body>
</html>
效果如下：
九祸挪、偽類(lèi)和偽元素
偽類(lèi)
正常鏈接：
a:link
訪問(wèn)過(guò)的鏈接（只能定義字體顏色）
a:visited
鼠標(biāo)滑過(guò)的鏈接
a:hover
正在點(diǎn)擊的鏈接
a:active
十、其他元素
獲取焦點(diǎn)
:focus
指定元素前
:before
指定元素后
:after
選中的元素
::selection
十一贞间、其他選擇器
首字母
:first-letter
首行
:first-line
十二贿条、屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style type="text/css">
/*
為所有具有title屬性的p元素，設(shè)置一個(gè)背景顏色為黃色
屬性選擇器
作用：可以根據(jù)元素中的屬性或?qū)傩灾祦?lái)選取指定元素
語(yǔ)法：
[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開(kāi)頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
[屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
p[title]{
background-color: yellow;
}
*/
/*為title屬性值是hello的元素設(shè)置一個(gè)背景顏色為黃色
p[title="hello"]{
background-color: yellow;
}
*/
/*為title屬性值以ab開(kāi)頭的元素設(shè)置一個(gè)背景顏色為黃色
p[title^="ab"]{
background-color: yellow;
}
*/
/*為title屬性值以c結(jié)尾的元素設(shè)置一個(gè)背景顏色
p[title$="c"]{
background-color: yellow;
}
*/
/*為title屬性值包含c的元素設(shè)置一個(gè)背景顏色*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title屬性增热，這個(gè)屬性可以給任何標(biāo)簽指定
當(dāng)鼠標(biāo)移入到元素上時(shí)整以，元素中的title屬性的值將會(huì)作為提示文字顯示
-->
<p title="hello">我是一個(gè)段落</p>
<p>我是一個(gè)段落</p>
<p title="abbc">我是一個(gè)段落</p>
<p title="abccd">我是一個(gè)段落</p>
<p title="abc">我是一個(gè)段落</p>
</body>
</html>
顯示效果如下：
十三、子元素選擇器
子元素選擇器可以給另一個(gè)元素的子元素 設(shè)置樣式峻仇。
語(yǔ)法：
父元素 > 子元素{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素選擇器</title>
<style type="text/css">
/*
為第一個(gè)p標(biāo)簽設(shè)置一個(gè)背景顏色為黃色
:first-child 可以選中第一個(gè)子元素
:last-child 可以選中最后一個(gè)子元素
:nth-child 可以選中任意位置的子元素
該選擇器后邊可以指定一個(gè)參數(shù)公黑，指定要選中第幾個(gè)子元素
even 表示偶數(shù)位置的子元素
odd 表示奇數(shù)位置的子元素
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類(lèi)似，只不過(guò)child是在所有的子元素中找
而type是在當(dāng)前類(lèi)型的子元素中找
p:first-of-type{
background-color: yellow;
}
*/
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<span>我是span</span>
<!-- <div>
<p>我是一個(gè)p標(biāo)簽</p>
</div> -->
</body>
</html>
其他子元素選擇器
選擇第一個(gè)子標(biāo)簽
:first-child
選擇最后一個(gè)子標(biāo)簽
:last-child
選擇指定位置的子元素
:nth-child
選擇指定類(lèi)型的子元素
:first-of-type
:last-of-type
:nth-of-type
十四础浮、兄弟選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟元素選擇器</title>
<style type="text/css">
/*
為span后的一個(gè)p元素設(shè)置一個(gè)背景顏色為黃色
后一個(gè)兄弟元素選擇器
作用：可以選中一個(gè)元素后緊挨著的指定的兄弟元素
語(yǔ)法：前一個(gè) + 后一個(gè)
span + p{
background-color: yellow;
}
*/
/*
選中后邊的所有兄弟元素
語(yǔ)法：前一個(gè) ~ 后邊所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<span>我是一個(gè)span</span>
<div>我是div</div>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
</body>
</html>
效果如下：
十五帆调、否定偽類(lèi)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定偽類(lèi)</title>
<style type="text/css">
/*
為所有的p元素設(shè)置一個(gè)背景顏色為黃色，除了class值為hello的
否定偽類(lèi)：
作用：可以從已選中的元素中剔除出某些元素
語(yǔ)法：
:not(選擇器)
*/
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p class="hello">我是一個(gè)p標(biāo)簽</span>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
<p>我是一個(gè)p標(biāo)簽</p>
</body>
</html>
十六豆同、選擇器的權(quán)重
不同的選擇器有不同的權(quán)重值：
內(nèi)聯(lián)樣式：權(quán)重是 1000
id選擇器：權(quán)重是 100
類(lèi)番刊、屬性、偽類(lèi)選擇器：權(quán)重是 10
元素選擇器：權(quán)重是 1
通配符：權(quán)重是 0
計(jì)算權(quán)重需要將一個(gè)樣式的全部選擇器相加影锈，比如上邊的body h1的權(quán)重是20芹务，h1的權(quán)重是10，所以第一個(gè)選擇器設(shè)置的樣 式會(huì)優(yōu)先顯示鸭廷。
文本樣式
1. em和strong
em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)枣抱。
strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。
這兩個(gè)標(biāo)簽可以單獨(dú)使用辆床，也可以一起使用佳晶。
<p>
<strong>警告：任何情況下不要接近僵尸。</strong>
他們只是 <em>看起來(lái)</em> 很友好讼载，實(shí)際上他們是為了吃你的胳膊轿秧！
</p>
通常em顯示為斜體中跌，而strong顯示為粗體。
2. i和b標(biāo)簽
i標(biāo)簽會(huì)使文字變成斜體
b標(biāo)簽會(huì)使文字變成粗體
3. small標(biāo)簽
small標(biāo)簽表示細(xì)則一類(lèi)的旁注菇篡，通常包括 免責(zé)聲明漩符、注意事項(xiàng)、法律限制驱还、版權(quán)信 息等嗜暴。
瀏覽器在顯示small標(biāo)簽時(shí)會(huì)顯示一個(gè)比父 元素小的字號(hào)
<p><small>©2018北財(cái). 保留所有權(quán)利.</small></p>
4.cite標(biāo)簽
使用cite標(biāo)簽可以指明對(duì)某內(nèi)容的引用或參 考。例如议蟆，戲劇闷沥、文章或圖書(shū)的標(biāo)題，歌 曲咪鲜、電影狐赡、照片或雕塑的名稱等撞鹉。
<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事疟丙。
</p>
5. blockquote標(biāo)簽和q標(biāo)簽
blockquote和q表示標(biāo)記引用的文本。
blockquote用于長(zhǎng)引用鸟雏，q用于短引用享郊。
在兩個(gè)標(biāo)簽中還可以使用cite屬性來(lái)表示引 用的地址。
孟子曾經(jīng)說(shuō)過(guò)：
<blockquote>天將降大任于是人也...</blockquote>
他說(shuō)的真對(duì)靶⑷怠炊琉！
<p>孔子曾經(jīng)說(shuō)過(guò)：<q>學(xué)而時(shí)習(xí)之不亦說(shuō)乎</q></p>
6. sup和sub
sup和sub用于定義上標(biāo)和下標(biāo)。
上標(biāo)主要用于表示類(lèi)似于103中的3又活。
下標(biāo)則用于表示類(lèi)似余H2O中的2苔咪。
7. ins和del
ins表示插入的內(nèi)容，顯示時(shí)通常會(huì)加上下 劃線柳骄。
del表示刪除的內(nèi)容团赏，顯示時(shí)通常會(huì)加上刪 除線。
8. code標(biāo)簽和pre標(biāo)簽
如果你的內(nèi)容包含代碼示例或文件名耐薯，就 可以使用code元素舔清。
pre元素表示的是預(yù)格式化文本，可以使用
pre包住code來(lái)表示一段代碼曲初。
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>
9.有序列表
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>
10. 無(wú)序列表
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
11. 定義列表
使用dl体谒、dd、dt來(lái)創(chuàng)建一個(gè)定義列表
<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>
12. 文字大小
font-size
13.文字字體
font-family
14. 字體分類(lèi)
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書(shū)字體）
fantasy （虛幻字體）
以上這些分類(lèi)都是一些大的分類(lèi)臼婆，并沒(méi)有 涉及具體的類(lèi)型抒痒，如果將字體指定為這些 格式，瀏覽器會(huì)自己選擇指定類(lèi)型的字體颁褂。
15. 斜體和粗體
font-style用來(lái)指定文本的斜體
指定斜體：font-style:italic
指定非斜體：font-style:normal
font-weight用來(lái)指定文本的粗體
指定粗體：font-weight:bold
指定非粗體：font-weight:normal
16. 小型大寫(xiě)字母
font-variant屬性可以將字母類(lèi)型設(shè)置為小 型大寫(xiě)故响。在該樣式中纷捞，字母看起來(lái)像是稍 微縮小了尺寸的大寫(xiě)字母。
font-variant:small-caps
17. 字體屬性的簡(jiǎn)寫(xiě)
font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式被去。
語(yǔ)法：
font:加粗 斜體 小型大寫(xiě) 大小/行高 字體
18. 行間距
line-height用于設(shè)置行高主儡，行高越大則行 間距越大。
行間距 = line-height – font-size
19. 大寫(xiě)化
text-transform樣式用于將元素中的字母全都變成大寫(xiě)惨缆。
大寫(xiě)：text-transform:uppercase
小寫(xiě)：text-tansform:lowercase
首字母大寫(xiě)：text-transform:capitalize
正常：text-transform:none
20. 文本修飾
text-decoration屬性糜值，用來(lái)給文本添加各 種修飾。通過(guò)它可以為文本的上方坯墨、下方 或者中間添加線條寂汇。
可選值：
underline
overline
line-through
none
21. 字母間距和單詞間距
letter-spacing用來(lái)設(shè)置字符之間的間距。
word-spacing用來(lái)設(shè)置單詞之間的間距捣染。
這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百 分?jǐn)?shù)作為值骄瓣。正數(shù)代表的是增加距離，而 負(fù)數(shù)代表減少距離耍攘。
22. 對(duì)齊文本
text-align用于設(shè)置文本的對(duì)齊方式榕栏。
可選值：
left：左對(duì)齊
right：右對(duì)齊
justify：兩邊對(duì)齊
center：居中對(duì)齊
23. 首行縮進(jìn)
text-indent用來(lái)設(shè)置首行縮進(jìn)。
該樣式需要指定一個(gè)長(zhǎng)度蕾各，并且只對(duì)第一 行生效扒磁。
text-indent:2em;首行縮進(jìn)2個(gè)字符
