CSS基礎一
什麽是CSS？
CSS：層疊樣式表
網頁一層一層的。
而css就可以分別為網頁的各層設置樣式。
CSS樣式編寫放在那裏？
（內聯樣式）放在元素的style屬性中。給誰設置寫在那個標簽裏面。
也稱為：內聯樣式，只對當前的元素中的內容起作用。
內聯樣式不方便復用，不推薦使用。
內聯樣式屬於結構與表現耦合，不方便後期的維護，不推薦使用。
<p style="color:red;font-size:100px;">鋤禾日當午，旱地和嚇唬</P>（內部樣式）將css樣式編寫在head中的style標簽裏,然後通過css選擇器選擇指定元素，然後可以同時為這些元素一起設置樣式，這樣可以使樣式進一步的復用。
將樣式表編寫到style標簽中，也可以使表現和結構進一步分類，使表現和結構進一步分離，推薦使用方式。
<style type="text/css"> p{ color:red; font-size:100px; } </style>（外部樣式）表
將樣式表編寫到外部的css文件中。
編寫外部樣式css文件
引入外部css樣式文件到當前html中。
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>CSS入門</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>鋤禾日當午，旱地和嚇唬</P> <p>創建明月光，疑似地上霜</p> </body> </html>- 將css樣式統一編寫到外部樣式表中，完全使結構和表現完全分離，可以使樣式表在不同的頁面中使用。
- 最大限度是樣式復用。
- 通過link標簽引入，可以利用瀏覽器的緩存加快用戶訪問的速度提高用戶體驗。所以在開發中最推薦的方式是外部樣式表。
CSS註釋
/*
註釋內容
*/選擇器
通過選擇器可以選中頁面中指定的元素，並且將聲明塊中的樣式應用到選擇器對應的元素上。
聲明塊
聲明塊緊跟在選擇器的後邊，使用對{}括起來，聲明塊中實際上就是一組一組的明值對結構，這一組一組的明值對我們稱為聲明。
在一個聲明塊中可以寫多個聲明，多個聲明之間使用;隔開。聲明的樣式名和樣式值之間使用：來連接
p{ color:red; font-size:100px; }
開發工具HBulder
推薦使用的開發工具，見官網文檔。
div 塊元素
- 所謂的塊元素就是會獨占一行的元素。
- 無論他的內容有多少，都會獨占一整行。
- div標簽沒有任何語義，不會為他裏面的元素設置任何的默認樣式。
- div元素主要用來對網頁布局的。
<div style="background-color: red; width: 100px;">one div</div>
<div style="background-color: blue; width: 100px;">two div</div>常見塊元素
div、p、h1、h2、h3.。。。
內聯元素（行內元素）
span：沒有任何語義，專門用來選中文字，然後為文字設置樣式。
內聯元素：只占自身大小，不會占用一行。
常見內聯元素
a、img、span、iframe
塊元素與內聯元素區別
塊元素：主要用來布局。
內聯元素：主要用來選中文本，設置文本樣式。
一般請款告知使用塊蒜素去包含內聯元素，二不會使用內聯元素去包含塊元素。
a元素可以包含任意元素
，但是除了它本身。
p元素不能包含任何塊元素
常用選擇器
元素(標簽)選擇器
作用：可以選擇頁面中的所有指定元素。
p{ color:red; font-size:100px; }id選擇器
通過元素的id屬性值選中唯一的一個元素。
語法：
#p1{ color: green; font-size: 300px; }類選擇器
可以為元素設置class屬性，class屬性和id屬性類似，只不過class屬性可以重復。
用戶相同class屬性的元素，稱為一組元素。
通過元素的class屬性，選中一組元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>css03</title> <style> p{ color:red; font-size:100px; } #p1{ color: green; font-size: 200px; } .p1{ color:greenyellow; } .hello{ color: #9932CC; font-size: 60px; } </style> </head> <body> <p>ggggg</p> <p>ggggg</p> <p id="p1">ggggg</p> <p class="p1 hello">ggggg</p> <p class="p1">ggggg</p> </body> </html>class可以同時為一個元素設置多個class屬性值，多個值之間用空格隔開。
選擇器分組
通過選擇器分組可以同時選中多個選擇器對應的元素。
語法：選擇器1，選擇器2，選中N{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>css03</title>
<style>
p{
color:red;
font-size:100px;
}
#p1{
color: green;
font-size: 200px;
}
.p1{
color:greenyellow;
}
.hello{
color: #9932CC;
font-size: 60px;
}
#p1,h1,.p2{
background: gold;
}
</style>
</head>
<body>
<h1>fd</h1>
<p class="p2">fdfd</p>
<p>ggggg</p>
<p id="p1">ggggg</p>
<p class="p1 hello">ggggg</p>
<p class="p1">ggggg</p>
</body>
</html>通配選擇器
可以用來選中頁面中的所有元素
*{
color:red;
font-size: 90px;
}- 復合選擇器（交際選擇器）
作用：可以選中同時滿足多個選擇器的元素
span.p3{
color: #00008B;
}span與p3中間沒有空格。
對id選擇器來說，不建議使用復合選擇器。
CSS基礎一