04_CSS入門和高級技巧(2)
上節課複習
HTML表格，table、tr、td（th）；thead、tbody；caption。css
必定要會根據圖形，來寫表格：
html
<table border="1">
<tr>
<td>7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td rowspan="2">9</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
</tr>
</table>
HTML註釋：<!--註釋寫在裏面-->面試
<!-- <tr>
<td>0</td>
<td>1</td>
</tr> -->
字符實體(轉義字符)瀏覽器
空格 > 大於號 < 小於號 © 版權符號
廢棄標籤：b、u、i、del、strong、em服務器
br標籤是breaking打斷的意思：<br>性能
<p>牀前明月光，<br />疑是地上霜</p>
它是一個自封閉標籤，自此咱們已經碰見4個自封閉標籤：學習
<meta name=」keywords」 content=」」 /> <img src=」1.jpg」 /> <input type=」text」 /> <br />
在2007~08年以前，全部的換行都是用<br />來完成的。而如今<br />已經被廢棄，用p、div、h系列來進行換行：測試
<p>牀前明月光，</p> <p>疑是地上霜</p>
可是<br />也不是沒用，就是有些時候，極特殊的用標籤來打斷語義不合適，沒轍了，只能<br />，好比一個有換行的超級連接。字體
好比淘寶首頁：網站
<p>
<a href="">高級<br />搜索</a>
</p>
高級搜索若是拆分爲兩個p，不合適，因此就用br打斷一下。
CSS： cascading style sheet層疊式樣式表
舞臺，寫代碼的地方：
<style type="text/css"></style>
語法：
<style type="text/css">
h1{
k:v;
k:v;
k:v;
k:v;
}
</style>
選擇器：
- 基本選擇器3種：標籤選擇器、id選擇器、類選擇器
- 高級選擇器4種：後代選擇器、交集選擇器、並集選擇器、通配符
標籤選擇器：
p{
}
id選擇器：
id頁面惟一，只要是合法的命名，能夠隨便任取id。合法的命名：英語字母開頭（AA和aa不一樣）、數字、下劃線、橫槓。
<p id=」pp」></p>
選擇法是#
#warning{
}
class選擇器：
多個標籤能夠攜帶同一個class；同一個標籤能夠攜帶多個class，空格隔開。
<p class=」warning」></p>
選擇符是``.。
.warning{
}
類的使用，要注意原子類，能夠把一個標籤多攜帶幾個class，簡化咱們的頁面製做，各取所需。
後代選擇器
選擇的是後代，而不是兒子。
div p
div 的後代 p，都被選擇。
div.haha ul.xixi li.hehe p
有haha類的div的後代有xixi類的ul的後代有hehe類的li中的p。
交集選擇器
div.haha
又是div，又是haha類。
並集選擇器
用逗號隔開的兩部分
div.haha ul li , div.xixi p{
}
等價於
div.haha ul li{
}
div.xixi p {
}
通配符選擇器
選擇全部元素，清除全部元素的默認margin、padding用。
*{
}
繼承性和層疊性
cascading style sheet， 咱們對cascading這個詞兒只要理解透了，css就理解透了。
實際上咱們如今已經知道了cascading的第一層含義，就是同一個標籤能夠從多個選擇器那裏獲得樣式。樣式是一層一層抹上去的。
1.繼承性
繼承性是css的最美的地方，它就簡化了css的書寫。
一些屬性，若是給一個元素設置了，那麼它的後代全部元素都有這個屬性了，就是繼承性。
哪些屬性可以繼承：
color text- font- line-
特別的，要知道不能繼承的屬性：background-color、全部盒模型的屬性（width、height、border、padding、margin)都是不繼承的！
2.層疊性
層疊性就是處理衝突的能力，就好比一個標籤p，用標籤選擇器設置文字顏色是紅色，用id選擇器設置文字顏色是藍色；聽誰的。聽id的，標籤選擇器的屬性就被槓掉了，術語叫作「層疊」掉了。
總結的一個圖：
就是同一個標籤攜帶多個類名的時候，若是攜帶的類名有衝突，那麼聽誰的？
結論：只和CSS順序有關，之後出現的爲準，與HTML標籤中掛類名的順序無關。
好比：
<p class="spec1 spec2">文字</p>
或者交換兩個類名的順序寫成：
<p class="spec2 spec1">文字</p>
是對權重沒有任何影響的。
1.應用場景
在共性中有某個元素有特性。
好比，如今想讓全部的li都是一個顏色，可是就第一個li顏色不一樣：
<html>
<head>
<style type="text/css">
.nav ul li{
color:blue;
}
.nav ul li.no1{
color:red;
}
</style>
<title></title>
</head>
<body>
<div class="nav">
<ul>
<li class="no1">網站欄目</li>
<li>網站欄目</li>
<li>網站欄目</li>
<li>網站欄目</li>
<li>網站欄目</li>
<li>網站欄目</li>
<li>網站欄目</li>
</ul>
</div>
</body>
</html>
錯誤的寫法：
<style type="text/css">
.nav ul li{
color:blue;
}
.no1{
color:red;
}
錯誤！不生效！由於這個權重幹不過上面的.nav ul li。
因此，之後必定要記住一個真理：若是想讓一個特性層疊掉共性，那麼這個特性的選擇器的前半部分必定要和共性的相同。
2.!important提高權重
咱們但願頁面中的全部原子類，都是權重很是大的，這樣，一旦頁面中的任何一個標籤，攜帶了這個原子類，當即有樣式產生，而不會被本身的樣式所層疊。因此，這時候，就能夠用!important來提高權重！
.warning{
color:red !important;
}
important是英語重要的意思。注意寫法！寫在分號以前，若是有多個屬性要提高權重，那麼必須寫多個：
.warning{
color:red !important;
font-weight: bold !important;
}
注意，頁面嚴禁濫用!important提高權重，只能在原子類的狀況使用！
還要注意下面幾個!important的權重提高方法：
!important不影響繼承性，該是0仍是0。一個標籤是經過繼承性影響的，權重是0，加上!important也是0，也不能與已經選中了的選擇器抗衡。
!important不影響就近原則，遠的那個，寫上!important也沒用，仍是以近的那個爲準！
如今咱們已經徹底揭示了「層疊性」的意思：
- 同一個標籤能夠有多個選擇器做用，給他增長樣式；
- 有繼承性，祖先的標籤的一些屬性，能夠繼承給後代的標籤；
- 有層疊性，當碰見衝突的時候有着嚴密一套法律，規定誰生效誰被槓掉。
CSS就是用代碼在畫畫，它像工程師同樣精確，像藝術家同樣優美。
從如今開始，咱們就要學習CSS的屬性了。大體分爲幾類：
- 文字樣式
- 盒模型
- 浮動
- 定位
- 背景
- 表格和列表
CSS8.7 中的顏色表示法
咱們大量的用到顏色，好比color、background-color、border:1px solid red;
以前咱們都是用英語來描述顏色red、blue等等。
一共有三種方法：單詞、rgb()、#十六進制
1.單詞來表示
在HTML中可以找到這些單詞表示的顏色名。不過咱們通常就用常見的這麼幾個：
black、white、red、green、blue、yellow、pink、orange、purple、gold、gray、yellowgreen、greenyellow等等。
2.rgb()表示法
background-color: rgb(0,0,255);
光學顯示器的三原色是紅、綠、藍，依靠他們三個的不一樣亮度，就能組成不同的顏色。每種顏色的亮度數值是0~255，一共256個數字。
計算機的顯示屏是由三元色的發光晶體組成的
注意它的語法，rgb()中間用兩個逗號隔開三個數字。
紅色：
background-color: rgb(255,0,0);
綠色：
background-color: rgb(0,255,0);
藍色：
background-color: rgb(0,0,255);
黑色：
background-color: rgb(0,0,0);
光學顯示器什麼都關掉了，就是黑色。
白色：
background-color: rgb(255,255,255);
特別的，當三個數字都同樣的時候，就是灰色：
background-color: rgb(111,111,111);
每一個數位都可以表示256種顏色（0~255），那麼三個數位可以表示多少顏色呢？乘法原理：
256* 256 * 256種顏色，16777216種顏色。
3.十六進制表示法
rgb表示法比較冗長，更經常使用的就是16進製表示法。
<style type="text/css">
.no1{
background-color: #000000;
}
.no2{
background-color: #ff0000;
}
.no3{
background-color: #00ff00;
}
.no4{
background-color: #0000ff;
}
</style>
十六進制表示法以#開頭，後面跟隨6位數字，分爲3組，分別表示紅、綠、藍的數量。
#ff0000
咱們如今要介紹一下十六進制：
咱們人的手指10隻手指，因此人類就是10進制，逢10進1。
【10進制中】0、一、二、三、四、五、六、七、八、9 一共10個數字
【16進制中】0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f 一共16個數字。
也就是說：
16進制中的5，就是10進制中的5；
16進制中的9，就是10進制中的9；
16進制中的a，就是10進制中的10；
16進制中的b，就是10進制中的11；
16進制中的c，就是10進制中的12；
16進制中的d，就是10進制中的13；
16進制中的e，就是10進制中的14；
16進制中的f，就是10進制中的15；
16進制中的10，就是10進制中的16；
16進制中的11，就是10進制中的17；
……
位權的概念：
一個10進制的數字，好比38 ， 數字3表示擁有3個10
38 = 3 * 10 + 8
一個16進制的數字，好比38 ，數字3表示擁有3個16
3 * 16 + 8 = 56
也就是說，16進制中的38就是10進制中的56。
因此如今給你一個16進制數字，你就可以當即算出對應的10進制數字是多少。
16進制的25 ， 2 * 16+5=37 , 就是10進制中的37
16進制的42 ， 4 * 16 + 2=66 , 就是10進制中的66
16進制的ab , 10 * 16 + 11 = 171 , 就是10進制中171
16進制的2b ， 2 * 16 +11 = 43， 就是10進制中43
16進制的ff， 15 * 16 + 15 = 255 , 就是10進制中255
因此：
#42ab2b
等價於，
rgb(66,171,43)
因此：
1#000000黑色
#ffffff白色
#ff0000紅色
#111111灰色
16進制寫法能夠簡化，全部形如
#aabbcc;均可以簡化爲：#abc;
好比：
#000000等價於#000
#6688cc等價於#68c
#ff0000等價於#f00
因此，
2b2b2b
不能簡化！
大小寫都同樣，好比#F00等價於#ff0000
至此咱們就介紹完了CSS2.1層面的顏色表示法，如今咱們表示紅色：
red
rgb(255,0,0)
#ff0000
#f00
文字相關的屬性
1.color
文字顏色，這個屬性可以繼承，可以用3種表示法來表示。
2.font-size
文字大小，它有單位的，如今只學習一個單位就是像素。
font-size:20px;
實際測量飽滿漢字的真實高度倒是18px。
這是由於咱們的漢字在製造的時候，就不是頂天立地的：
老師，我到底要用多少號字？根據設計師的設計圖。
可是若是設計圖中，有一些字沒有圖層的，那麼此時比較麻煩，絕對不要直接去量！由於漢字不是頂天立地的，必須本身寫一個漢字，而後去比較。
各個瀏覽器的默認字號都不同，有的是12px、有的是14px。因此設計圖上的文字，都要寫字號。
Chrome瀏覽器支持的最小字號是12px，低於12px字號將仍以12px顯示，設計師若是給你一個設計稿文字過小，直接找老闆告狀。
3.line-height
line-height表示行高。sublime裏面的快捷鍵是lnh
文字所在這一行的高度，稱爲行高。文字在行裏垂直居中。
行高到底爲多少？仍是那個答案：看設計圖！若是設計圖沒有圖層，要寫兩個文字量量。
line-height能夠以px爲單位，也能夠用百分比爲單位。
若是用百分比爲單位，那麼就是當前字號的百分比。也就是說：
font-size:14px; line-height:150%;
等價於
font-size:14px; line-height:21px;
font-size:16px; line-height:200%;
等價於
font-size:16px; line-height:32px;
因爲字號和行高很是重要，因此能夠和寫在一塊兒稱爲font屬性
font:14px/28px "宋體";
等價於：
font-size:14px; line-height:28px; font-family:"宋體";
4.font-family字體
font-family屬性就是字體，family就是家庭的意思。全部的字體都要用英語引號引用起來。
字體不是隨便設置哦，必須是用戶電腦裏有這個字體，你才能設置，不然用戶看到的是宋體。
因此網頁中，爲了讓全部的用戶都有一致的體驗，只能用宋體、微軟雅黑。黑體、楷體有的公司也用，可是不常見。
font-family: "宋體"; font-family: "微軟雅黑";
通常來講，若是設置爲微軟雅黑，那麼就要設置一個備選字體，備選字體通常是宋體，用逗號隔開列出。
font-family: "微軟雅黑","宋體";
有的服務器上面，爲了追求css的加載速度，把字體名變爲英語。 css中
font-family:」Microsoft Yahei」,」SimSun」;
等價於
font-family: "微軟雅黑","宋體";
英語字體寫在前面：
font-family: "Arial","Microsoft Yahei","SimSun";
5.font-weight加粗
bold就是粗體
font-weight:bold;
等價於
font-weight: 700;
不加粗，要寫normal這個詞
font-weight:normal;
等價於
font-weight:400;
面試愛考。
這是能繼承的屬性
6.font-style屬性
若是想讓文字傾斜，使用
font-style:italic;
不傾斜：
font-style: normal;
font-style:oblique;也是傾斜，和italic的區別：
7.text-decoration屬性
字符裝飾
下劃線：
text-decoration:underline;
沒有下劃線：
text-decoration:none;
刪除線：
text-decoration:line-through;
總結：
font-weight:bold; 加粗 font-style:italic; 傾斜 text-decoration:underline; 下劃線
8.綜合font屬性
font屬性是一個大綜合屬性：
font:italic bold 12px/20px arial,sans-serif;
等價於
font-style:italic; font-weight:bold; font-size:12px; line-height:20px; font-family:arial,sans-serif;
通常來講，咱們不會這麼綜合，而是：
font:12px/200% 「Microsoft Yahei」,」SimSun」;
其餘的文本屬性，好比text-indent、text-align沒有那麼難，因此碰見提一嘴就好了。
盒模型
1.盒模型總體感知
盒模型就是width、height、padding、border、margin外邊距這麼幾個屬性。
width：內容的寬度
height：內容的高度
padding：內邊距
border: 邊框
第一個案例：
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: yellow;
padding: 50px;
}
</style>
加上border：
<style type="text/css">
.nav{
width: 200px;
height: 200px;
background-color: yellow;
padding: 50px;
border:50px solid pink;
}
</style>
內容、padding、border、margin是四圈。
小測試：
div{
width:100px;
height:100px;
padding:10px;
}
那麼這個盒子真實佔有的寬度就是120px。
必定必定要養成一個習慣，就是一個盒子的width屬性，不是真實佔有的寬度！！
真實佔有的寬度 = width + 左邊padding + 右邊padding + 左邊border寬度 + 右邊的border寬度
2.padding
內容和邊框之間的距離
padding:50px;
四個方向的padding就都設置爲50了
若是想單獨設置padding：
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:40px;
等價於：
padding:10px 20px 30px 40px;
順序是上、右、下、左。
若是寫三個數值：
padding:10px 20px 30px;
此時至關於：
padding-top:10px; padding-right:20px; padding-bottom:30px; padding-left:20px; (和右同樣)
若是寫兩個屬性
padding:10px 20px;
等價於
padding-top:10px; padding-right:20px; padding-bottom:10px;(和上同樣) padding-left:20px; (和右同樣)
- 1. 06_CSS入門和高級技巧(4)
- 2. 03_CSS入門和高級技巧(1)
- 3. 10_CSS入門和高級技巧(8)
- 4. 05_CSS入門和高級技巧(3)
- 5. 07_CSS入門和高級技巧(5)
- 6. Perl語言入門——高級Perl技巧
- 7. Sublime Text 2 入門技巧
- 8. PS入門小技巧2
- 9. iOS核心動畫高級技巧-2
- 10. TypeScript 高級技巧
- 更多相關文章...
- • Markdown 高級技巧 - Markdown 教程
- • XML DOM 高級 - XML 教程
- • YAML 入門教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 06_CSS入門和高級技巧(4)
- 2. 03_CSS入門和高級技巧(1)
- 3. 10_CSS入門和高級技巧(8)
- 4. 05_CSS入門和高級技巧(3)
- 5. 07_CSS入門和高級技巧(5)
- 6. Perl語言入門——高級Perl技巧
- 7. Sublime Text 2 入門技巧
- 8. PS入門小技巧2
- 9. iOS核心動畫高級技巧-2
- 10. TypeScript 高級技巧