css
1.CSS基礎
2.CSS簡介
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。css
CSS 可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力html
2.1 分離原則CSS
內嵌CSS通常寫在html結構當中head頭裏面的，遵循原則的話CSS通常是和頁面分離的，內容與樣式分離的原則，css3
等同於如今比較火的概念：結構、樣式和行爲分離原則。它們的中心思想是同樣的，實現不一樣的做用之下進行代碼分離。web
該原則不只屬於web標準,仍是web標準中的核心概念windows
一個標準的網頁組成又分爲三部分組成瀏覽器
1）.HTML文件佈局
2）.CSS樣式文件字體
3）.JS腳本文件spa
結構、樣式和行爲分離能夠在頁內分離，也能夠分別自成一個文件，都容許的。操作系統
根據HTML標籤規則行內出現樣式是不標準的，也不提倡使用這種那麼挫的樣式，後面會仔細講解爲何
結構、樣式和行爲分離主的做用減小維護成本，提升可讀性和更好的兼容性。
2.2 CSS樣式之總體感知
以下style標籤是內嵌樣式風格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">/*這對style標籤,就是CSS的書寫舞臺，全部的CSS代碼將寫在裏面*/ /*選擇器*/p{ color:red; font-size: 30px; text-decoration: underline; font-weight: bold; text-align: center; font-style: italic; } /*選擇器*/h1{ color:blue; font-size: 50px; font-weight: bold; background-color: pink; } </style> </head> <body> <h1>我是一個標題</h1> <p>我是一個段落</p> <p>我是一個段落</p> </body> </html>
<style type=」text/css」></style>
type表示「類型」 ， text就是「純文本」。css也是純文本的。
2.3 選擇器
選擇器使用語法：
選擇器 {
k:v; /*key屬性名 v屬性值*/
k:v;
k:v; }
選擇器一些常見的屬性：
1.顏色屬性： color屬性的值，能夠是英語單詞，好比red、blue、yellow等等；也能夠是rgb、十六進制 2.字號大小： font就是「字體」，size就是「尺寸」。px是「像素」。 單位必須加，不加不行。 3.背景顏色： background-color:xxx background 就是背景的意思 4.加粗: font-weight:bold; bold等價於700 font是「字體」 weight是「重量」的意思，bold粗 5.不加粗: font-weight:normal; normal 就是正常的意思 6.字體傾斜: font-sytle:italic italic就是「傾斜」 不傾斜 font-style:normal; 7. 下劃線： text-decoration:underline; decration 就是「裝飾」的意思。 取消下劃線：text-decoration:none;
2.4 類選擇器
.就是類的符號，類英文名又稱之爲class。
所謂的類，就是class屬性，class屬性和id屬性很是類似，任何的標籤均可以攜帶class屬性
使用方法 在標籤內填class="類名" 真正使用的時候請在CSS文件裏面調用 .類名 {} 「{}」內填寫相關的樣式屬性，
class屬性能夠重複使用，不一樣標籤能夠引用相同的class屬性，也就是說有時候個人需求不但只是p要改變顏色h3也要改變相同的顏色，
這時候能夠引用同一個class屬性，一個標籤又能夠有多個類屬性，只想要用空格隔開 如class="teshu zhongyao" ,
假設 teshu類主要用於改變顏色 zhongyao類主要用於添加下劃線，那麼此時至關於兩個類名分別各自有各自的功能，
通常狀況下針對不一樣的狀況而這樣選擇。
以下代碼就是經過類選擇器改變給指定標籤改變顏色的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .teshu { color:red; } </style> </head> <body> <h3>我是一個h3</h3> <h3 class="teshu">我是一個h3</h3> <h3>我是一個h3</h3> <p>我是一個段落</p> <p class="teshu">我是一個段落</p> <p>我是一個段落</p> </body> </html>
類的使用，可以決定一我的的CSS使用水平，looking以下2個案例：
案例1具體代碼：
/*捨去html結構*/
<style type="text/css"> .pp1{ font-size: 60px; color: green; } .pp2{ color:green; text-decoration: underline; } .pp3{ font-size: 60px; text-decoration: underline; } </style> <p class="pp1">段落1</p> <p class="pp2">段落2</p> <p class="pp3">段落3</p>
案例2具體代碼：
/*捨去html結構*/
<style type="text/css"> .lv { color:green; } .da { font-size: 60px; } .xian { text-decoration: underline; } </style> <p class="lv da">段落1</p>
<p class="lv xian">段落2</p> <p class="da xian">段落3</p>
案例2 對比案例1 正確的思路，採用了「公共類」的思路，就是咱們類就是提供「公共服務」，好比有綠、大、線，
一旦攜帶這個類名，就有相應的樣式變化。不要用一個類名把謀個標籤的全部樣式寫完，能提取公共屬性使用的就提取。
通常狀況下咱們寫樣式一般用類屬性的比較多，通常不提倡用ID屬性，
緣由：ID屬性是JS用的 JS要經過ID屬性獲得標籤。
2.5 後代選擇器
使用語法：
類屬性 空格 後代 ==》 .div1 p 就是.div1的後代
後代css代碼:
<style type="text/css"> .div1 > p { color: red; } </style>
強調一下，後代不必定是兒子，好比有以下層級關係
div
ul
li
p
我要讓p變紅色 首先明確一點 ul 的上一級是.div1這個div盒子，
所謂的後代不必定是兒子的意思是，.div1已經裏面已經包括了p標籤 因此 .div1 p 會變成紅色。
首先咱們要明確一點，後代選擇器，只要有祖先結構便可選擇上的，何爲祖先結構，咱們看上面列出來的層級關係 p的祖先是結構.div1，
因此能選擇上也是毫無疑問的，看以下的幾個案例：
案例1
div div .div4 div p{color:red;} <div class="div1"> <div class="div2"> <div class="div3"> <div class="div4"> <p>我是什麼顏色？</p> </div> </div> </div> </div>
咱們能夠看到案例1給出的後代選擇條件是 div div .div4 div p 當到.div4的時候 接着再套一層後代div p 此時.div4結構內部根本就沒有div這個標籤，
因此 .div4 div p 顏色根本不會改變,由於被隔離了。
2.6交集選擇器
使用語法：
標籤.類名
什麼是交集選擇器呢？ 顧名思義就是他們之間有交集的，looking 如圖以及代碼
造成了交集如圖：
具體代碼：
/*捨去html結構*/
<style type="text/css"> h3.special { color: red; } </style> <h3>我是標題</h3> <h3 class="special">我是標題</h3> <h3 class="special">我是標題</h3> <h3 class="special">我是標題</h3> <p>我是段落</p> <p>我是段落</p>
咱們能夠看到上述代碼有3個h3和.special類屬性之間，是有交集的，針對上述對面而言也就是說必需要同事知足兩個條件，
必須是h3標籤,而後必須是含有special類屬性。
注意交集選擇器是不須要用空格隔開的使用時 標籤.類便可而不是 p 空格 .xxxx 交集選擇器是能夠連續交的，什麼意思呢 連續交？
也就是說 好比一個標籤內有兩個類屬性 一個叫x類屬性 一個叫y類屬性 分別隔開 class= 'x y' 咱們連續交的時候 標籤.x.y:值;
連續交這種寫法是IE7開始兼容的，IE7如下都不兼容哦~
2.7 兼容問題介紹
IE： 微軟的瀏覽器，隨着操做系統安裝的。因此每一個windows都有IE瀏覽器。
windows xp 操做系統安裝的IE6
windows vista 操做系統安裝的IE7
windows 7 操做系統安裝的IE8
windows 8 操做系統安裝的IE9
windows10 操做系統安裝的edge
瀏覽器兼容問題，要出，就基本上就是出在IE六、7身上，這兩個瀏覽器是很是低級的瀏覽器。
http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/
瀏覽器的市場佔有率： http://tongji.baidu.com/data/
今天：
IE9 5.94%
IE8 21.19%
IE7 4.79%
IE6 4.11%
2.8 並集選擇器
使用語法：
多個標籤以逗號隔開 如 p,h1,span
具體代碼：
<style type="text/css"> h3,p { color: red; } </style>
上述代碼意思是將h3和p標籤都變成紅色。
2.9 兒子選擇器
使用語法:
如 div > p
表明 p是div的兒子標籤,並非實際上的大於
兒子選擇器 ie7開始兼容,ie7如下的瀏覽器都不兼容，
兒子選擇器必須遵循父輩關係，關係不對應是不起做用的，看以下層級關係：
div
ul
li
p
若是我想將span變成紅色 那麼請問 div > p 這樣的夸父輩關係能行嗎？
毫無疑問是不行的，必須不能脫離父輩之間的關係，此時能夠這樣 div ul li>p 又或者 是 div >ul>li >p
具體代碼：
<style type="text/css"> div > p { color: red; } </style>
3.0 序選擇器
使用語法：
ul li:first-child 意思是ul下的第一個
ul li:last-child 意思是選中最後一個
ul li:nth-child(4) 意思是選中第四個li
ul li:nth-child(2n+2) 意思是選中全部偶數li
注意序選擇器，ie8開始兼容,ie8如下的都不兼容,
若是考慮到仍是須要兼容ie6,7 能夠自行寫類名 如選中第一個和選中最後一個：
class='first'
class='last'
具體代碼：
<style type="text/css"> ul li:first-child {/*選中第一個li*/ color: red; } ul li:last-child {/*選中最後一個li*/ color: red; } ul li:nth-child(4) {/*選中第一個4個li*/ color: red; } ul li:nth-child(2n+2) {/*選中偶數個li*/ color: red; } </style>
3.1 下一個兄弟選擇器
使用語法：
如h3+p 意思是h3下第一個p元素
注意：ie7如下都不兼容
具體代碼：
<style type="text/css"> h3+p{/*h3下的第一個p元素變紅色*/ color:red; } </style>
4.0 繼承性
以下案例div下有p,但只給div選擇了顏色,但卻p標籤隨之變色，這是什麼回事呢？looking 下圖，
但有些屬性是能夠繼承的，有些是不能夠的。
那麼有哪些屬性是能夠繼承的？
color、text-開頭的、line-開頭的、font-開頭的
這些關於文字樣式的，都可以繼承；全部關於盒子的、定位的、佈局的屬性都不能繼承。
因此假如，頁面的文字，都是灰色，都是14px。那麼咱們能夠利用繼承性：
body{
color:gray;
font-size:14px;4
}
繼承性是從本身開始，直到最小的元素。
4.1 層疊性
不少公司若是要筆試，那麼必定會考層疊性。
層疊性：就是css處理衝突的能力。 全部的權重計算，沒有任何兼容問題！
CSS像藝術家同樣優雅，像工程師同樣嚴謹。
當選擇器，選擇上了某個元素的時候，那麼要這麼統計權重：
id數量，類的數量，標籤的數量
優先權重 是 id > 類 >標籤
不進位，實際上能進位（奇淫知識點：255個標籤，等於1個類名）可是沒有實戰意義！
若是權重同樣，那麼之後出現的爲準：
同一個標籤，攜帶多個類名會有衝突
結果會是紅色的，由於CSS中的red在後面
4.2 權重問題深刻
!important 標記
important 是英語裏面的 」重要的「 意思 。 經過語法：
k:v !important;
來給一個屬性提升權重，這個屬性權重無窮大。
主要使用語法：
正確的
font-size:60px !important;
錯誤的
font-size:60px; !important; 不能把！important 寫在外面
font-size:60px important 沒有感嘆號
1 ) ！important 提高的是一個屬性，而不是一個選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> p { color: red !important; #只寫了這個 !important,因此字體顏色屬性提高權重 font-size: 100px; #這條屬性沒有寫 !important,因此沒有提高權重 } #para1 { color: blue; font-size: 50px; } .spec { color: green; font-size: 20px; } </style> </head> <body> <p id="para1" class="spec">文字</p> </body> </html>
因此綜合來看，字體是red(聽important的); 字號是50px (聽id的);
2 ) ！important 沒法提高繼承的權重，該是0仍是0以下案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { color:red !important; } p { color: blue; } </style> </head> <body> <div> <p>哈哈哈哈哈哈</p> </div> </body> </html>
因爲div是經過繼承性來影響文字顏色的，因此!important沒法提高它的權重，權重依然是0。
幹不過p標籤，由於p標籤是實實在在選中了，因此字是藍色的（以p爲準）。
- 1. CSS——CSS樣式
- 2. 【CSS】理解CSS
- 3. CSS Tools: Reset CSS
- 4. CSS——CSS基礎
- 5. CSS之CSS hack
- 6. CSS：關於CSS Hack
- 7. CSS animation & CSS animation 101
- 8. CSS+DIV-CSS與Javascript
- 9. css樣式 --- CSS hack
- 10. CSS 框架 Blueprint CSS
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。