<!DOCTYPE html>
<!-- CSS：
一、樣式層疊次序：
1.瀏覽器缺省
2.外部樣式表
3.內部樣式表（<<head>內部的樣式）
4.內聯樣式（HTML元素內部）=》優先級最高
二、CSS基礎語法
Selector選擇器{屬性和具體設置值}
Selector{property:value...} eg：h1{color:red;font-size:14px}
三、CSS樣式單基本使用：
1.鏈接外部樣式文件：這種方式將樣式和HTML文檔徹底分離，樣式文件需要額外引用，採用這種方式，一個CSS樣式上單可以控制多個HTML文檔
2.導入外部樣式文件：@import
3.採用內部樣式定義：這種方式是在HTM了文檔頭部定義，採用這種方式，每個CSS樣式只控制一份HTML文檔
4.使用內聯樣式：將樣式內聯定義咋具體的HTML元素，精準控制一個HTML元素表現，每個CSS樣式只控制單個HTML元素。
四、CSS選擇器（有元素有屬性值）
① Selector選擇器：
1.元素選擇器:E{......} /* E代表有效的HTML元素名 */
2.屬性選擇器：E[attr]:該CSS樣式對具有attr屬性的E元素起作用
E[attr=value]:該樣式對所有包含attr屬性，且屬性值爲value的E元素起作用。
3.E[attr^="value"]:改CSS樣式對所有包含attr屬性，且屬性值是以value開頭的字符串E起作用（css3）
4.E[attr$="value"]:改CSS樣式對所有包含attr屬性，且屬性值是以value結尾的字符串E起作用（css3）
5.E[attr*="value"]:改CSS樣式對所有包含attr屬性，且屬性值包含value的字符串E起作用（css3）
當多個CSS樣式可以同時對某個HTML元素起作用時，該HTML元素現實的外觀是將多個CSS樣式”疊加“作用的效果。
如果多個CSS樣式定義有衝突時，則衝突屬性以優先級更高的CSS樣式取勝。
② ID選擇器（*****）
ID選擇器指定的CSS樣式將會對具有指定ID屬性值HTML元素起作用。
ID選擇器語法：
[E]#idValue{......}
#idValue{......}：指定該CSS樣式對id爲idValue的HTML元素起作用
ID選擇器優先級>屬性選擇器（元素選擇器）、class選擇器
③ class選擇器
[E].classValue{....}
class選擇器對指定css樣式具有class屬性且值爲classValue的HTML元素起作用。
④ 包含選擇器
語法：Selector1 Selector2{...}
Selector2選擇器必須處於Selector1選擇器對應元素內部
⑥ 子選擇器
語法：Selector1>Selector2{..}
Selector2選擇器必須是Selector1選擇器對應元素的子元素
五、CSS背景
背景色：background-color:屬性設置背景色，不能繼承，默認透明
背景圖片：background-image:url（圖片地址） 將圖像發個圖背景，默認null。
backgroung-repeat:設置圖片平鋪（重複方式），默認全平鋪。
background-position:設置顯示位置
關鍵字、數值 px（距離左上角位置） 百分號數值（距離左上角位置）
background-attachment:fixed設置背景圖片不會隨着頁面滾動
六、CSS文本
縮進文本：段落的第一行進行縮進，段落的第一行縮進
text-indent：正值首行向右縮進，負值首行向左縮進
百分比：縮進相對於父元素的百分比值
水平對齊：
text-align
字間隔：默認0
word-spacing：接受一個正值，字之間的間隔會增加
負值：字間隔縮短
字母間距：
letter-spacing：接受一個正值，字母之間的間隔會增加
負值：字母間隔縮短
字符轉換：大小寫，對中文無效
text-transform：
none默認值
uppercase全部大寫
lowercase全部小寫
capitalize首字母大寫
文本裝飾：
text-decoration：
none默認值
underline下劃線
overline：上劃線
line-through：中劃線
blink：文本閃爍
處理空白符：默認normal
white-space
pre-line：合併空白符，保留換行符
七、CSS字體
字體系列 font-family
字體風格font-style：
normal（默認）
italic：文本斜體展示（推薦使用） oblique：文本傾斜展示
字體變形font-variant：小型大寫字母
字體加粗font-weight（100-900）：
ligther（100）細體展示
normal（400）正常展示
bold（700）粗體展示
字體大小font-size:
絕對值：
將文本設置爲指定大小，不允許用戶在所在瀏覽器中改變字體大小
用px來設置絕對值文本大小，可以對文本大小進行絕對控制。
相對值：
使用em單位（W3C推薦使用em單位 1em=16px）
em的值會隨着父元素字體大小改變
八、CSS鏈接
鏈接的四種狀態：
a:link：普通的未被訪問的鏈接
a:visited:用戶已經訪問的鏈接
a:hover：鼠標指針位於鏈接的上方
a:active：鏈接被點擊的時刻
hover位於link&visited之後
active位於hover之後
九、CSS列表
列表類型list-style-type：
-->
<html>
<head>
<!-- 鏈接外部樣式單(若樣式存在於樣式單中，推薦使用） -->
<!-- <link rel="stylesheet" type="text/css" href="demon.css"> -->
<!-- 導入外部樣式單 -->
<!-- <style type="text/css">
@import"demon.css"
</style> -->
<!-- 內部CSS樣式（一般不建議，減緩頁面加載速度） -->
<!-- <style type="text/css">
body{
color:red;
/*多個屬性雙引號括起來，中間空格隔開*/
color: "red blue";
}
h1{
color:#00ff00;
}
p.ex{
color:rgb(0,0,255);
}
</style> -->
<!-- <style type="text/css">
table{
background-color: #003300;
width: 400px;
}
td{
background-color: #fff;
font-family: "楷體_CB2312";
font-size: 20px;
text-shadow: -8px 6px 2px #333;
}
.title{
font-size: 18px;
color: #60c;
height:30px;
width: 200px;
border-top: 3px solid #cccccc;
border-left: 3px solid #cccccc;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
}
</style> -->
<!-- <style type="text/css">
div{
background-color: grey;
font: italic normal bold;
}
p{
background-color: #444;
color: #fff;
font: normal small-caps bold 20pt normal 宋體;
}
</style> -->
<!-- <style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
div[id]{
background-color: #aaa;
}
div[id*=xx]{
background-color: #999;
}
div[id^=xx]{
background-color: #555;
}
div[id=xx]{
background-color: #111;
color: #fff;
}
</style> -->
<!-- <style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #ddd;
padding: 10px;
}
p#xx{
border: 2px dotted black;
background-color: #888;
}
div[id=xx]{
background-color: green;
}
</style> -->
<!-- <style type="text/css">
.myclass{
width: 240px;
height: 40px;
background-color: #dddddd;
}
div[class = myclass]{
background-color: rebeccapurple;
}
div.myclass{
border: 2px dotted black;
background-color: #888888;
}
</style> -->
<!-- <style type="text/css">
div{
width: 350px;
height: 60px;
background-color: #ddd;
margin: 5px;
}
div .a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888;
}
</style> -->
<!-- <style type="text/css">
div{
width: 350px;
height: 60px;
background-color: #ddd;
margin: 5px;
}
div>.a{
width: 200px;
height: 35px;
border: 2px dotted black;
background-color: #888;
}
</style> -->
<!-- css背景 -->
<style type="text/css">
body{
background-color: #889900;
}
h1{
background-color: #00ff00
}
h2{
background-color: transparent;
}
p{
background-color: rgb(250,0,250);
}
p.no1{
background-color: gray;
padding: 20px;
}
</style>
<title>CSS(1)</title>
<meta charset="utf-8"/>
</head>
<body>
<!-- <h1>第一段CSS代碼</h1>
<h1 style="color: purple">第一段CSS代碼</h1>
<p class="ex">帶有class屬性的文本標籤</p>
body體，沒有任何而標籤。
-->
<!-- <div class="title">
前端課程體系：
</div><hr>
<table>
<tr>
<td>
HTML從入門到精通
</td>
</tr>
<tr>
<td>
CSS從入門到精通
</td>
</tr>
<tr>
<td>
JS從入門到精通
</td>
</tr>
</table> -->
<!-- <div>div內容</div>
<p>p中內容</p> -->
<!-- <div>不帶任何屬性的div</div>
<div id="aa">
具有id屬性，但屬性值沒有xx
</div>
<div id= yyxx>具有id屬性，且屬性包含xx</div>
<div id = xxyy>具有id屬性，且屬性值以xx開頭</div>
<div id= xx> 具有id屬性，且屬性值就是xx</div> -->
<!-- <div>不帶任何屬性的div</div>
<div id="xx">具有id屬性且屬性值爲xx的div</div>
<p id = "xx">具有id屬性且屬性值爲xx的p</p> -->
<!-- <div>不帶任何屬性的div</div>
<div class="myclass">帶有class屬性且置爲myclass</div>
<p class="myclass">帶有class屬性且值不等於myclass</p> -->
<!-- <div>不帶任何屬性的div</div>
<div>
<p class="a">帶有class屬性且值爲a的p標籤</p>
</div>
<p class="a">
帶有class屬性且值爲a的p標籤,但是不在div內部
</p> -->
<!-- <div>不帶任何屬性的div</div>
<div>
<p class="a">帶有class屬性且值爲a的p標籤</p>
<section>
<p class="a">帶有class屬性且值爲a的p標籤</p>
</section>
</div>
<p class="a">
帶有class屬性且值爲a的p標籤,但是不在div內部
</p> -->
<!-- <h1>h1標籤</h1>
<h2>h2標籤</h2>
<p>不帶class屬性的p標籤</p>
<p class="no1">帶有class1屬性的標籤</p> -->
<body>
</body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- <style type="text/css">
body{
background-image: url(longmao.gif);
}
a.flower{
background-image: url(2.gif);
padding: 20px;
background-repeat: repeat-x;
background-position: %50 %50;
}
p.flower{
background-image: url(2.gif);
padding: 20px;
background-repeat: repeat-y;
</style>
-->
<!-- <style type="text/css">
body{
}
div{
width: 500px;
}
div#outer{
width: 500px;
}
div#inner{
text-indent: 10%;
}
p{
/*第一行縮進，餘下部分不會縮進，正值首行向右縮進，負值首行向左縮進*/
text-indent: 10%;
/*左內邊距*/
padding-left: 5em;
}
</style> -->
<!-- <style type="text/css">
p#id{
text-align: center;
}
p#right: {
text-align: right;
}
</style> -->
<!-- <style type="text/css">
p#zheng{
word-spacing: 0.5em;
}
p#fu{
word-spacing: -0.5em;
}
</style> -->
<!-- <style type="text/css">
h1{
letter-spacing: -0.5em;
}
h4{
letter-spacing: 20px;
}
</style> -->
<!-- <style type="text/css">
h1{
text-transform: uppercase;
}
h4{
text-transform: capitalize;
}
</style> -->
<!-- <style type="text/css">
a{
text-decoration: underline overline line-through blink;
}
h4{
text-decoration: underline;
text-transform: capitalize;
}
h4#id{
text-decoration: overline;
text-transform: capitalize;
}
p{
white-space: pre;
}
</style> -->
<!--
<style type="text/css">
body{
background-image: url(longmao.gif);
font-family: sans-serif;
}
h1{
/*指定字體和通用字體*/
font-family: Georgia,serlf;
}
p.normal{
font-style: normal;
}
p.ita{
font-style: italic;
}
p.obl{
font-style: oblique;
}
</style> -->
<!-- <style type="text/css">
body{
background-image: url(longmao.gif);
}
p.normal{
font-weight: normal;
}
p.thin{
font-weight: lighter;
}
p.bold{
font-weight: bold;
}
</style> -->
<!-- <style type="text/css">
body{
background-image: url(longmao.gif);
font-size: 100%;
}
p{
font-size: 1em;
}
h1{
font-size: 30px;
}
</style> -->
<!-- CSS鏈接 -->
<!-- <style type="text/css">
body{
background-image: url(longmao.gif);
font-size: 100%;
}
a:link{
color: antiquewhite;
text-decoration: underline;
background-image: url(1.png);
}
a:visited{
color: blueviolet;
text-decoration: overline;
background-color: #FFFF85;
}
a:hover{
color: blue;
text-decoration: line-through;
background-color: #FF704D;
}
a:active{
color: green;
text-decoration: blink;
background-color: blue;
}
</style> -->
<!-- 列表 -->
<style type="text/css">
ul{
list-style-type: square;
list-style-type: lower-alpha;
list-style-image: url(longmao.gif);
list-style-position: inside;
}
</style>
</head>
<body>
<!-- <p class="flower">有背景的段落
<a href="#" class="flower">
設置一個瞄點
</a>
</p> -->
<!-- 長引用標籤縮進 -->
<!-- <blockquote>
<p>
長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進.
</p>
<div>
<p>
長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進長引用標籤縮進.
</p>
</div>
</blockquote> -->
<!-- <div id="outer">
<div id="inner">
<p>
段落文本段落文本
</p>
</div>
</div> -->
<!-- <p>
不帶任何屬性的p標籤
</p>
<p id="id">帶有id屬性的p標籤</p>
<p id="right">帶有id屬性的p標籤</p>
<center>
center標籤中的元素
</center> -->
<!-- <p>
Some text! Some text!
這 是 一 段 文 字
</p>
<p id="zheng">
Some text! Some text!
這 是 一 段 文 字
</p>
<P id="fu">
Some text! Some text!
這 是 一 段 文 字
</P> -->
<!-- <h1>This is h1</h1>
<h4>This is h4</h4> -->
<!-- <h1>
this is h1
段落1
</h1>
<h3>
this is h3
段落3
</h3>
<h4>
this is h4
段落4
</h4> -->
<!-- <a href="#">這是一個超鏈接</a>
<h4> this is h4</h4>
<h4 id="id"> this is h4</h4>
<p> this is
p
文本處理
</p>
<pre> this is
p
文本處理
</pre> -->
<!-- 龍貓
<h1>this is h1</h1> -->
<!-- <p class="normal"> narmal文本</p>
<p class="ita">ita文本</p>
<p class="obl">obl文本</p> -->
<!-- <p class="normal"> narmal文本</p>
<p class="thin">ita文本</p>
<p class="bold">obl文本</p> -->
<!-- <h1>this is h1</h1>
<p>this is p</p> -->
<!-- <a href="http:www.baidu.com" target="_blank">百度</a>
<a href="http://123.207.58.25/" target="_blank">比特</a> -->
<ul>
<li>檸檬</li>
<li>西瓜</li>
<li>蘋果</li>
</ul>
</body>
</html>
