前端——CSS笔记
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等。
CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍(lán)色，而其他的元素（如ol）不會受到影響。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時，中間可以英文分號“;”分隔，如下所示
CSS注釋代碼
就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來標(biāo)明（Html中使用<!--注釋語句-->)。就像下面代碼：
從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種
內(nèi)聯(lián)式css樣式，直接寫在現(xiàn)有的HTML標(biāo)簽中
內(nèi)聯(lián)式css樣式表就是把css代碼直接寫在現(xiàn)有的HTML標(biāo)簽中（多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開），如下面代碼：
<p style="color:red；font-size:12px">這里文字是紅色。</p>
嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。如下面代碼實現(xiàn)把三個<span>標(biāo)簽中的文字設(shè)置為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。如右邊編輯器中的代碼。
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
優(yōu)先級：內(nèi)聯(lián)式 > 嵌入式 > 外部式
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)。
什么是選擇器？
選擇器{
樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。比如下面代碼編輯器代碼中的“body”就是選擇器。
標(biāo)簽選擇器
類選擇器
ID選擇器
類和ID選擇器的區(qū)別
相同點：可以應(yīng)用于任何元素
不同點：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式，但只可以用類選擇器的方法實現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
正確：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>
錯誤：
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>
子選擇器
還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素。
包含(后代)選擇器
包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素。如右側(cè)代碼編輯器中的代碼：
.first span{color:red;}
總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標(biāo)簽元素，如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
偽類選擇符
它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：
a:hover{color:red;}
（關(guān)于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了）
分組選擇符
繼承（有繼承性標(biāo)簽和非繼承性標(biāo)簽）
特殊性
下面是權(quán)值的規(guī)則：
標(biāo)簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。例如下面的代碼：
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
注意：還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻(xiàn)提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
層疊
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。
重要性
p{color:red!important;}
樣式優(yōu)先級為：瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，但記住!important優(yōu)先級樣式是個例外，權(quán)值高于用戶自己設(shè)置的樣式。
文字排版--字體
用戶是否可以看到你設(shè)置的字體樣式取決于用戶本地電腦上是否安裝你設(shè)置的字體。
現(xiàn)在一般網(wǎng)頁喜歡設(shè)置“微軟雅黑”，如下代碼：（第一個兼容性較好）
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
文字排版--字號、顏色
body{font-size:12px;color:#666}
文字排版--粗體
p span{font-weight:bold;}
文字排版--斜體
p a{font-style:italic;}
<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>
元素分類
在了解CSS布局之前，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>
元素分類--塊級元素
什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設(shè)置display:block就是將元素顯示為塊級元素。如下代碼就是將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
元素分類--內(nèi)聯(lián)元素
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從而使 div 元素具有內(nèi)聯(lián)元素特點。
div{
display:inline;
}
......
<div>我要變成內(nèi)聯(lián)元素</div>
內(nèi)聯(lián)元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
小伙伴們你們觀查一下右側(cè)代碼段，有沒有發(fā)現(xiàn)一個問題，內(nèi)聯(lián)元素之間有一個間距問題，這個問題在本小節(jié)的 wiki 中有介紹，感興趣的小伙伴可以去查看。
友情參考鏈接：http://www.cnblogs.com/Wxtrkbc/p/5620935.html
總結(jié)
- 上一篇： Linux+Tomcat+Jdk1.8+
- 下一篇： Kubernetes-Service介绍