2018-08-17
* 今天的課程內容：
* CSS
* CSS的簡介
* CSS：cascading style sheet ：層疊樣式表。
* 做什麼用：設置網頁的顯示效果（設置樣式）。
* CSS將網頁顯示的效果和內容分離。（耦合性）
超<font>文本</font>標籤語言
* HTML只需要把文本內容封裝起來，不用屬性，用CSS的代碼來控制顯示效果。
* 如果開發了多套CSS的代碼，都不用修改HTML的代碼。（換膚效果）
* CSS和HTML的結合（*****）
* CSS與HTML的結合方式（4種）
* 在html的標籤上，提供了一個(屬性)，style="CSS的代碼"
* 在HTML的文件，提供了一個(標籤)
這個標籤放在<head></head>的中間
<head>
<style type="text/css">
CSS的代碼
</style>
</head>
* 引入外部的文件的方式（引入CSS的文件，定義一個css文件（後綴名名 demo.css））（經常使用的方式）
* @import url("CSS文件的地址");（注意分號） 屬性必須要寫<style></style>內部。（style html解析引擎）大寫和小寫都沒有問題。（注意：必須有;）
* 引入外部文件的方式，通過一個<link> 寫在<head></head>中間， 不要放在<style>中間（經常使用）
* rel：代表當前和引入文件之間的關係
* type：
* href：引入CSS文件的地址
1 <link rel="stylesheet" type="text/css" href="zong.css" >
* CSS的優先級（*****）和規範
* 從上到下，由外到內，優先級是從低到高的。（一般情況下）（*****）
* 標籤名選擇器 < 類選擇器 < ID選擇器 < style屬性 （特殊情況下）（*****）
* 規範
* CSS的寫法： div{CSS的屬性名:值;CSS的屬性名:值;...}
* 如果一個屬性有多個值，值與值之間使用空格隔開
* 例子 div{ xx:yy zz aa }
* CSS的選擇器（*****）
* CSS的選擇器
* 告訴CSS的代碼作用在哪個標籤上。
* 基本選擇器
* 標籤名選擇器 div{} span{}
* 類選擇器：在HTML的標籤上，提供了屬性 class，定位到div的標籤（美工經常使用的方式）
* 寫法： .class的名稱 (.hehe{CSS的代碼})
* 設置不同的標籤，具有相同的樣式
* ID選擇器
* 在HTML的標籤上，提供的屬性 設置樣式
* 寫法： #id的名稱 (#haha{CSS的代碼})
* 一般情況下：設置不同的ID
* 一般情況下給js語言來使用。
* 擴展選擇器
* 關聯選擇器：標籤可以嵌套，標籤與標籤之間的關係。
* 寫法： 中間用空格隔開 例子（div font{CSS的代碼}）
* 組合選擇器：對多個不同的選擇器進行相同的樣式
* 寫法：在多個不同的選擇器之間用 , 隔開
* 僞元素選擇器： 定義好的一些選擇器，用就ok。
* 如果使用超鏈接僞元素選擇器：使用順序： L V H A
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"> 7 /*順序：L V H A */ 8 /*未訪問*/ 9 a:link{ 10 /*超鏈接的下劃線*/ 11 text-decoration: none; 12 } 13 /*訪問wanch*/ 14 a:visited{ 15 color: blueviolet; 16 font-size: 20px; 17 } 18 /*懸停*/ 19 a:hover{ 20 color: red; 21 font-size: 25px; 22 } 23 /*點擊-未鬆開*/ 24 a:active{ 25 color:green; 26 font-size: 30px; 27 } 28 /*文本框獲得焦點時*/ 29 input:focus{ 30 background-color:greenyellow ; 31 } 32 </style> 33 </head> 34 <body> 35 <a href="http://www.baidu.com">百度</a><br/> 36 <a href="http://www.baidu.com">優酷</a><br/> 37 <a href="http://www.youku.com">優酷</a><br/> 38 <hr/> 39 <input type="text"><br/> 40 <input type="password"> 41 </body> 42 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!--鏈接式-->
7 <link rel="stylesheet" href="css/外部樣式.css">
8 <!--導入式-->
9 <style type="text/css">
10 @import "css/外部樣式.css";
11 </style>
12 <style type="text/css">
13 /*標籤選擇器*/
14 p{
15 color: green;
16 font-family: 楷體;
17 font-weight: bolder;
18 font-size: 20px;
19 }
20 .first{
21 color: aqua;
22 }
23 #second{
24 color: cyan;
25 }
26
27 </style>
28 </head>
29 <body>
30 <p>劉晶晶啊哈哈</p>
31 <p class="first">七夕快樂呀</p>
32 <p class="first">天天快樂呀快樂呀</p>
33 <!--id 不可以是數字-->
34 <p id="1">我想回家了</p>
35 <p id="second">我想回家了</p>
36 <!--行內樣式 -->
37 <p style="color: antiquewhite;font-size: 20px">七夕呀！小點心！</p>
38
39 </body>
40 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 p{
8 color: antiquewhite;
9 }
10 /*後代選擇器*/
11 p strong{
12 color: cyan;
13 font-family: 華文楷體;
14 font-size: 25px;
15 }
16 /*交集選擇器*/
17 /*id p#id*/
18 p.first{
19 color: blue;
20 font-family: 華文楷體;
21 font-size: 25px;
22 }
23 p.second{
24 color: blueviolet;
25 font-size: 30px;
26 }
27
28 /*並集選擇器*/
29 p,.three,#six{
30 font-size: 35px;
31 color: chartreuse;
32 }
33 </style>
34 </head>
35 <body>
36 <p>小楊同學很帥</p>
37 <p> <strong>一表人才</strong>，哈哈哈哈</p>
38
39 <p class="first">111111</p>
40 <p class="second">222222</p>
41 <p class="three">33333</p>
42 <p id="six">66666</p>
43
44
45 </body>
46 </html>
* CSS的佈局（瞭解）（CSS+DIV進行佈局）
<div>
<div>
<img />
</div>
<div>
<font>領導很忙</font>
</div>
</div>
例：1
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 #first{
8 width: 400px;
9 height: 50px;
10 color: cornsilk;
11 font-size: 25px;
12 background: mediumvioletred;
13 }
14 .second{
15 width: 400px;
16 border-bottom-style: dashed;
17 border-bottom-width: 1px;
18 }
19 .second a span{
20 color:white;
21 background: url("圖片素材/dot_01.gif") ;
22 background-repeat: no-repeat;
23 padding: 10px;
24 background-position:center center;
25 }
26 .second a:hover{
27 color: red;
28 }
29 .second a:hover span{
30 color:white;
31 background: url("圖片素材/dot_02.gif") ;
32 background-repeat: no-repeat;
33 padding: 10px;
34 background-position:center center;
35 }
36
37 </style>
38 </head>
39 <body>
40 <div id="first">
41 大家都喜歡買的美容品
42 </div>
43 <div class="second">
44 <a >
45 <span class="white">1</span> 雅詩蘭黛即時修護眼部精華霜15ml</div>
46 </a>
47 </div>
48
49 <div class="second">
50 <a >
51 <span class="white">2</span> 伊麗莎白雅頓顯效複合活膚霜 75ml</div>
52 </a>
53 </div>
54 <div class="second">
55 <a >
56 <span class="white">3</span> OLAY玉蘭油多效修護霜 50g</div>
57 </a>
58 </div>
59 <div class="second">
60 <a >
61 <span class="white">4</span> 巨型一號絲瓜水320ML</div>
62 </a>
63 </div>
64 <div class="second">
65 <a >
66 <span class="white">5</span> 倩碧保溼潔膚水2號 200ml</div>
67 </a>
68 </div>
69 <div class="second">
70 <a >
71 <span class="white">6</span> 比度克細膚淡印霜 30g</div>
72 </a>
73 </div>
74 <div class="second">
75 <a >
76 <span class="white">7</span> 蘭芝 (LANEIGE)夜間修護鎖水面膜 80ml</div>
77 </a>
78 </div>
79 <div class="second">
80 <a >
81 <span class="white">8</span> SK-II護膚精華露 215ml</div>
82 </a>
83 </div>
84 <div class="second">
85 <a >
86 <span class="white">9</span> 歐萊雅青春密碼活顏精華肌底液</div>
87 </a>
88 </div>
89 </body>
90 </html>
效果圖：
例：2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style type="text/css">
7 .title{
8 background-color: brown;
9 color: beige;
10 width:50%;
11 }
12 a:hover .ll{
13
14 background: no-repeat url("圖片素材/dot_02.gif");
15 color: brown;
16 }
17 a:hover .hh{
18 display: block;
19 }
20 .hh{
21 display: none;
22 }
23 .ll{
24
25 background: no-repeat url("圖片素材/dot_01.gif");
26 color: dimgrey;
27 border-bottom: 1px dashed;
28 }
29 .s{
30 color: azure;
31 }
32 </style>
33 </head>
34 <body>
35 <div id="con">
36 <p class="title">大家都喜歡的彩妝</p>
37
38 <a href="#"><div class="ll"><span class="s"> 1</span> Za姬芮新能真皙美白隔離霜 35g
39 <div class="hh">
40 <img src="圖片素材/icon-1.jpg">
41 <p>￥62.00 最近69122人購買</p>
42 </div>
43 </div></a>
44 <a href="#"><div class="ll"><span class="s"> 2</span> 美寶蓮精純礦物奇妙新顏乳霜BB霜 30ml
45 <div class="hh">
46 <img src="圖片素材/icon-1.jpg">
47 <p>￥89.00 最近13610人購買</p>
48 </div>
49 </div></a>
50 <a href="#"><div class="ll"><span class="s"> 3</span> 菲奧娜水漾CC霜40g
51 <div class="hh">
52 <img src="圖片素材/icon-1.jpg">
53 <p>￥59.90 最近13403人購買</p>
54 </div>
55 </div></a>
56 <a href="#"><div class="ll"><span class="s"> 4</span> DHC 蝶翠詩橄欖卸妝油 200ml
57 <div class="hh">
58 <img src="圖片素材/icon-1.jpg">
59 <p>￥169.00 最近16757人購買</p>
60 </div>
61 </div></a>
62
63 </div>
64
65 </body>
66 </html>
*漂浮和定位
例：3
同一個標籤可以同時有兩個樣式
