CSS3基礎——筆記+實戰案例(CSS基本用法、CSS層疊性、CSS繼承性)
CSS3基礎——筆記
CSS是Cascading Style Sheet的縮寫，翻譯爲"層疊樣式表" 或 "級聯樣式表"。CSS定義如何顯示HTML的標籤央視，用於設計網頁的外觀效果。經過使用CSS實現頁面的內容與表現形式分離，極大提升了工做效率。css
1、CSS基礎用法
CSS代碼能夠在任何文本編輯器中打開和編輯。所以，無論讀者有沒有變成基礎，初次接觸CSS時會感到很簡單。html
1.1 CSS樣式
樣式是CSS最小的語法單元，每一個樣式包含兩部份內容:選擇器和聲明(規則)，以下所示：瀏覽器
- 選擇器(Selector): 選擇器告訴瀏覽器呢該樣式將做用於頁面中哪些對象，這些對象能夠是某個標籤、全部網頁對象、指定Class或ID值等。瀏覽器在解析這個樣式時，根據選擇器來渲染對象的顯示效果。
- 聲明(Declaration): 聲明能夠增長一個或者無數個，這些聲明命令瀏覽器如何去渲染選擇器指定的對象。聲明必須包括兩部分:屬性和屬性值，並用分號來標識一個聲明的結束，在一個樣式中最後一個聲明能夠省略分號。全部聲明被放置在一對大括號內，而後總體緊鄰選擇器的後面。
- 屬性(Property): 屬性是CSS提供的設置好的樣式選項。屬性名是一個單詞或多個單詞組成，多個單詞之間經過連字符相連。這樣可以直觀表示屬性所要設置樣式的效果。
- 屬性值(Value): 屬性值是用來顯示屬性效果的參數。它包括數值和單位，或者關鍵字。
1.2 CSS應用
CSS樣式代碼必須保存在.css類型的文本中，或者放在網頁內<style>標籤中，或者插在網頁標籤的style屬性中。CSS樣式應用的方法主要包括4種: 網絡
一、行內樣式：行內樣式就是把CSS樣式直接放在代碼行內的標籤中，通常都放入標籤的style屬性中。框架
這種方法是修改最不方便的樣式！ 編輯器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css行內樣式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html>
二、內嵌式： 內嵌式經過CSS卸載網頁源文件的頭部，即在<head>與</head>之間，經過使用HTML標籤中的<style>標籤將其包圍，其特色是：該樣式只能在此頁使用，佈局
這種方法解決行內樣式屢次書寫的弊端！字體
<html> <head></head> <body> !doctype html> <meta charset="UTF-8" /> <title>css內嵌樣式</title> <style type="text/css">#div{width:100px;height:100px;background:red;}</style> <div id="div"></div>> </body> </html>
三、連接式：連接式經過HTML的<link>標籤，將外部樣式表文件連接到HTML文檔中，這也是網絡上網站引用最多的方式，同時也是最實用的方式。網站
這種方法將HTML文檔和CSS文件徹底分離，實現結構層和表示層的完全分離，加強網頁結構的擴展性和CSS樣式的可維護性。 ui
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css內嵌樣式</title> <link rel="stylesheet" type="text/css" href="ccss.css" /> </head> <body> <div id="div"></div>> </body> </html>
四、導入樣式：導入樣式使用@import命令導入外部樣式表。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@import_CSS使用@import命令導入外部樣式表</title> <style> @import url("style.css") screen, print; </style> </head> <body></body> </html>
兩種導入樣式表的方法比較：
1 link屬於HTML標籤，而@important是CSS提供的。 2 頁面被加載的時，link會同時被加載，而@important引用的CSS會等到頁面被加載完再加載。 3 @important只在IE5以上才能識別，而link是HTML標籤，無兼容問題。 4 link方式的樣式的權重高於@important的權重。 5 所以，通常推薦link導入樣式表的方法，@important能夠做爲補充方法使用。
1.3 CSS註釋
在CSS中增長註釋很簡單，全部被放在"/*"和"*/"分隔符之間的文本信息都被稱爲註釋。
/* 下面這段代碼的做用是創建網頁佈局 start */ .header{
width: 960px;
}
/* 下面這段代碼的做用是創建網頁佈局 end */
/* 整段代碼註釋: 下面這段代碼的做用是創建網頁佈局，它包括頭部和尾部寬度設置 start */
.header{width:960px;}
.footer{width:960px;}
/*下面這段代碼的做用是創建網頁佈局 它包括頭部和尾部寬度設置 end */
2、 CSS特性(很是重要)
層疊和繼承是CSS樣式兩個基本的特性。本節將對CSS特性分別進行詳細說明，並經過示例演示CSS特性在網頁設計中的應用。
2.1 CSS層疊性
一、CSS樣式表的優先級: 按照CSS的起源能夠將網頁定義的樣式分爲4種: HTML、做者、用戶、瀏覽器。
a) HTML表示元素的默認樣式；做者就是建立人，即建立網站所編輯的CSS；用戶也就是瀏覽網頁的人所設置的樣式；瀏覽器就是指瀏覽器默認的樣式。
b) 原則上講，做者定義的樣式優先於用戶設置的樣式，用戶設置的樣式優先於瀏覽器的默認樣式，而瀏覽器的默認樣式會優先於HTML的默認樣式。
二、CSS樣式的優先級: 對於相同CSS起源來講，不一樣位置的樣式其優先級也是不相同的。
通常來講，行內樣式會優先於內嵌式表，內部樣式會優先於外部樣式表。而被附加了!important關鍵字的聲明會擁有最高的優先級。
若是多個不一樣類型的選擇器同時爲一個對象設置樣式時，該對象將如何顯示最終樣式呢？如下給出一個簡單的計算方法。對於常規選擇器，它們擁有一個優先級加權值，說明以下：
- 標籤選擇器: 優先級加權值爲1；
- 僞元素或僞對象選擇器: 優先級加權值爲1；
- 類選擇器: 優先級加權值爲10；
- 屬性選擇器: 優先級加權值爲10；
- ID選擇器: 優先級加權值爲100；
- 其餘選擇器: 優先級加權值爲0，如統配選擇器等。
而後，以上面加權值數加起點來計算每一個樣式中選擇器的總加權值數。計算的規則是：
- 統計選擇器中ID選擇器的個數，而後乘於100；
- 統計選擇器中類選擇器的個數，而後乘於10；
- 統計選擇器中標籤選擇器的個數，而後乘於1；
以此方法類推，最後把全部加權值數相加，便可獲得當前選擇器的總加權值，最後根據加權值來決定哪一個樣式的優先級大。
對於由多個選擇器組合而成的複合選擇器，首先分別計算每一個組成選擇器的加權值，接着相加得出當前選擇器的總分，最後根據選擇器的分值大小，分值越高則優先級越高，那麼就將應用它所設置的樣式。若是分值相同，則根據位置關係來進行判斷，越靠近對象的樣式就擁有越高的優先級。
2.2 CSS繼承性
所謂繼承性，就是指被包含的元素將用於外層元素的樣式效果。繼承性最典型的應用就是在默認樣式的預設上。
咱們先從文檔樹（HTML DOM）開始。文檔樹由HTML元素組成。文檔樹和家族樹相似，也有祖先、後代、父親、孩子和兄弟。這很容易理解吧，筆者在這裏就不一一贅述了。但願深刻了解的朋友請google之。
那麼CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。
不是全部的屬性均可以繼承,只有以color/font-/text-/line開頭的屬性才能夠繼承。
在css中的繼承不只是兒子才能夠繼承,只要是後代就能夠繼承
css繼承性中的特殊性。a標籤的文字顏色和下劃線是不能被繼承的，h標籤的文字大小是不能被繼承的。
應用場景: 通常用於設置網頁上的一些共性信息。
CSS基礎——實戰案例
以上部分是理論基礎知識的介紹，下面咱們開始着案例來涉及一個完整的頁面，幫助本身加深理解。
【操做步驟】
(1) 使用文本編輯器(我使用Notepad++)，新建HTML文件，保存爲index.html。
<html> <head> </head> <body> </body> </html>
(2) 切換到<body></body>標籤內輸入如下代碼，用來構建本頁面主體結構，設計本頁面一級框架。
<html> <head> </head> <body> <!--[一級框架]--> <!--頂部--> <div id="top"></div> <div id="top1"></div> <!--主體--> <div id="main"></div> <!--底部--> <div id="footer"></div> <div id="copyright"></div> </body> </html>
在標準佈局中，影噶爲每一個div框架元素定義id屬性，這些id屬性如同人的身份證同樣，方便CSS可以準確控制每一個div佈局塊。因此，爲了閱讀和維護的須要，咱們應該爲它們起一個有意義的名字。
(3) 進一步細化頁面結構，設計頁面內部層次框架。因爲本例頁面比較簡單，嵌套框架不會很深，頂部和底部佈局塊可能就不要嵌套框架。輸入完整的HTML結構代碼：
<html>
<head>
</head>
<body>
<!--[完整 HTML 框架]-->
<!--頂部-->
<div id="top"></div>
<div id="top1"><img src="http://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=CSS3%20%E5%9B%BE%E7%89%87&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3225363744,4220361311&os=3377850775,544686624&simid=4252198847,742695430&pn=1&rn=1&di=56730334650&ln=1869&fr=&fmq=1533315991177_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fwww.xuejiqiao.com%2Fuploads%2Fimage%2F20140912%2F14104879608470.jpg&rpstart=0&rpnum=0&adpicid=0" ></div>
<!--主體-->
<div id="main">
<div id="content">
<div id="titile">Hello World -- 第一個 CSS3+DIV頁面</div>
<div class="sub">實例</div>
<div class="box"><div class="t1"><div class="tr"><div class="b1"><div class="content br"></div>
<!--底部-->
<div id="footer"></div>
<div id="copyright"></div>
</body>
</html>
(4) 豐富結構內容，使用<pre>標籤顯示代碼內容，使用<a>設計超連接文本，整個頁面內容顯示以下，代碼內容是在網頁中居中顯示紅色字符"Hello World!"
<html>
<head>
</head>
<body>
<!--[完整 HTML 框架]-->
<!--頂部-->
<div id="top"></div>
<div id="top1"><img src="http://file01.16sucai.com/d/file/2010/1026/20101026011522224.jpg"></div>
<!--主體-->
<div id="main">
<div id="content">
<div id="titile">Hello World -- 第一個 CSS3+DIV頁面</div>
<div class="sub">實例</div>
<div class="box"><div class="t1"><div class="tr"><div class="b1"><div class="content br"></div>
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Wold</title>
<style type="text/css">
h1 {
color: #FF0000; /*元素文本顏色Red*/
text-align: center; /*元素文本的對齊方式*/
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
</pre>
</div></div><div></div></div>
<div id="gotop"><a titile="跳到頁首" href="#top">返回頂部</a></div>
</div>
<!--底部-->
<div id="footer"></div>
<div id="copyright">
©2017 <a href="#" target="_black" >mysite.cn</a> all rights reserved
</div>
</body>
</html>
(5) 按Ctrl+S快捷鍵保存文檔，按F12鍵在瀏覽器中預覽，則顯示以下所示，如今尚未定義CSS代碼，因此看到的效果還不是最終效果。
(6) 編寫CSS代碼能夠在一個單獨的文件中進行。新建images文件夾，文件夾內建立CSS文檔，保存爲style.css，文件擴展名爲.css。
(7) 不急於編寫CSS代碼，打開index.html文檔，而後在<head>標籤內插入一個<link>標籤，輸入如下代碼導入上一步新建的外部樣式表文件。
<head> <!--[在網頁中連接外部樣式表文件]--> <link href="images/style.css" type=text/css rel=stylesheet> </head>
(8) 打開style.css文檔，在其中輸入CSS代碼以下：
/*公共屬性
----------------------*/
html{min-width:776px;}
/*頁面屬性:邊距爲0，字體顏色爲黑色，字體大小14像素，行高爲字體大小1.6倍，居中對齊，背景色爲天藍色，字體爲宋體等*/
body{
margin:0px;
padding:0px;
border:0px;
color:#000;
font-size:14px;
line-height:160%;
text-align:center;
background:#6D89DD;
font-family:'宋體','新宋體',arial,verdana,sans-serif;
}
/*超鏈接屬性: 無邊距、無邊框，無下劃線，而後定義正常狀態下的顏色、訪問過的顏色和鼠標通過的顏色並顯示下劃線*/
a{
margin:0px;
padding:0px;
border:0px;
text-decoration:none; /*這個屬性容許對文本設置某種效果，如加下劃線*/
}
a:link{color: #FF0000} /* 未訪問的連接 */
a:visited{color:E66133} /* 已訪問的連接 */
a:hover{color: #FF00FF; text-decoration:underline;} /* 當有鼠標懸停在連接上;定義文本下的一條線 */
/*預約義格式屬性：淺灰色北京，無首行縮進，內邊距大小，外邊距爲0，右縮進爲一個字體大小，字體顏色爲藍色 */
pre{
text-indent:0;/*用於定義塊級元素中第一個內容行的縮進 */
background:#DDDDDD;
padding:0px;
margin:0px;
color:blue;
}
/**頂部佈局
----------------------*/
#top{
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
height:12px;
background: url(images/bg_dot1.gif) #fff repeat-x left top;
overflow:hidden;
}
#top1{
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
height:121px;
}
/*主體佈局
----------------------*/
/*外層定義背景圖像，實現麻點顯示效果 */
#main{
width:776px;
margin-right:auto;
margin-left:auto;
padding:1.2em 0px;
background:url(images/bg_dot2.gif) #fff repeat left top;
text-align:left;
}
/*內層定義背景顏色爲白色，實現中間內容區域遮蓋麻點顯示 */
#content{
width:710px;
margin-right:auto;
margin-left:auto;
padding:1em;
background:#fff;
}
/*大標題區域屬性*/
#titile{
font-weight:bold;
margin:0px 0px 0.5em 0px;
padding:0.5em 0px 0.5em 1em;
font-size: 24px;
color:#00A06B;
text-align:left;
border-bottom:solid #9EA3C1 2px;
}
/*小標題區域屬性*/
.sub{
color:#00A06B;
font-weight:13px;
text-align:left;
padding:1em 2em 0;
background:url(images/0.gif) #fff no-repeat 1em 74%;
}
/*內容區域顯示屬性*/
.content{
text-indent:2em;
font-size:13px;
margin-left:2em;
padding:1em 6px;
}
/*頁面連接區域屬性*/
#gotop{
width:100%;
margin:0px;
padding:0px;
background:#fff;
height:2em;
font-size:12px;
text-align:right;
}
/*底部佈局
----------------------*/
/*頁腳裝修圖*/
#footer{
clear:both;
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
background:url(images/bg_bottom.gif) #fff repeat left top;
text-align:center;
height:39px;
color:#ddd;
}
/*版權信息*/
#copyright{
width:776px;
margin-right:auto;
margin-left:auto;
padding:5px 0px 0px 0px;
background:url(images/bg_bottom.gif) #fff;
text-align:center;
height:60px;
line-height:13px;
font-size:12px;
color:#93A0BB;
}
/*圓角特效
----------------------*/
.box{background:url(images/nt.gif) repeat;}
.tl{background:url(images/tl.gif) no-repeat top left;}
.tr{background:url(images/tr.gif) no-repeat top right;}
.bl{background:url(images/bl.gif) no-repeat bottom left;}
.br{background:url(images/br.gif) no-repeat bottom right;}
(9) 按Ctrl+S保存文檔，而後在瀏覽器中再次預覽頁面，則能夠看到最終效果。images文件夾下的gif刪除了，因此展現不全，不過大部分都出來了，就懶得從新去把圖片找出來了。
- 1. CSS繼承和層疊性
- 2. CSS初學筆記：css的繼承性和層疊性
- 3. 07-css的繼承性和層疊性
- 4. css的繼承、層疊和特殊性
- 5. CSS 繼承與層疊
- 6. CSS層疊和繼承
- 7. css的繼承和層疊
- 8. CSS筆記-1-繼承/層疊/特殊性
- 9. CSS 三大特性：繼承性，層疊性，優先性
- 10. 解釋CSS三大特性—繼承性、層疊性、優先級
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • Kotlin學習（一）基本語法
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS繼承和層疊性
- 2. CSS初學筆記：css的繼承性和層疊性
- 3. 07-css的繼承性和層疊性
- 4. css的繼承、層疊和特殊性
- 5. CSS 繼承與層疊
- 6. CSS層疊和繼承
- 7. css的繼承和層疊
- 8. CSS筆記-1-繼承/層疊/特殊性
- 9. CSS 三大特性：繼承性，層疊性，優先性
- 10. 解釋CSS三大特性—繼承性、層疊性、優先級