CSS課程講解
一.回顧內容
- 前端的三大組成(三大模組) HTMl(超文字標記語言) 結構層 css(層疊樣式表) 表現層:用來美化HTML結構 JS(Java script)(指令碼語言) 行為層:提供使用者和介面的互動
二.CSS(層疊樣式表)
1. CSS的概念及其介紹 CSS 指層疊樣式表 (Cascading Style Sheets) 作用:美化HTML結構,重點:css可以很好的將結構內容和表現進行分離. 2. css的三種表現形式(引入方法) css的語法結構:選擇器{屬性:值;屬性:值;…} 選擇器
<html> <head> <meta charset="utf-8" /> <title></title> </head> <body> //border-style:solid;設定邊框樣式為實線// //margin:"auto";設定水平居中// <div style="width: 200px;height: 200px; border-color: red; border-style: solid; border-width: 5px; margin: auto;"></div> <div style="width: 1000px; height: 100px; background: red; border-color: green; border-width: 5px; border-style: solid;"></div> <br /> <div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div> <div style="width: 200px; height: 200px; border: 1px solid darkgoldenrod;"></div> <p style="background: yellow;">我比你帥</p> </body> </html>
(2)內嵌樣式:通過style標籤將樣式寫入head標籤中. 例:
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: url(img/r14.jpg);//插入背景圖片// background-size: 100%,100%;//body要加逗號// } a{ text-decoration: none;font-family: 阿美簡體;font-weight: 900;font-size: 54px;color: red; } p{ width: 200px; height: 50px; background: red;text-align: center;line-height: 50px; } div{ width: 400px; height: 200px; border: red solid 2px; background: url(img/img01.jpg); background-size: 100% 100%; } </style> </head> <body> <a href="#">我的超連結</a> <p>我愛學習,學習使我快樂</p> <div></div> </body> </html>
(3)外聯樣式(外部樣式):通過link標籤引入外部css資料夾中的xxx.css檔案到head標籤中. div: 沒有具體的含義(主要用來頁面的佈局中,替代了原始的table和框架佈局). 塊元素:所謂的塊元素會佔據一行顯示稱之為塊元素,即便把寬高縮小也會佔據一行顯示. 3. CSS 文字設定 常用的應用文字的 css 樣式： color 設定文字的顏色，如： color:red; font-size 設定文字的大小，如：font-size:12px; font-family 設定文字的字型，如：font-family:‘微軟雅黑’; font-style 設定字型是否傾斜，如：font-style:‘normal’; 設定不傾斜， font-style:‘italic’;設定文字傾斜 font-weight 設定文字是否加粗， 如： font-weight:bold; 設 置 加 粗 font-weight:normal 設定不加粗 font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗字號/行高 字型；如： font:normal 12px/36px ‘微軟雅黑’; line-height 設定文字的行高，如：line-height:24px; (文字的垂直居中) text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉 (overline上劃線,underline下劃線) text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排 24px text-align 設定文字水平對齊方式，如 text-align:center 設定文字水平居中 border-collapse: collapse;設定表格邊框合併 4.css顏色的三種表現形式 (1).直接寫顏色的名稱 background:red; (2).使用RGB三原色設定 background:rgb(76,50,0); background:rgba(76,50,0,0.8);//a不透明度// (3).使用16進位制的方式表示顏色(最常用的一種) background:#ff0000 5.css的選擇器 (1).標籤選擇器 (2).ID選擇器 通過 id 名來選擇元素，元素的 id 名稱不能重複，所以一個樣式設定項只能 對應於頁面上一個元素，不能複用，id 名一般給程式使用，所以不推薦使用 id選擇器. (3).類選擇器(class) .class的值{屬性:屬性值} 例:
<style type="text/css">
//標籤選擇器//
table{
border: 5px solid black;
width: 300px;
height: 200px;
margin:100px auto; //設定表格的水平居中// //距離頂端100px 然後水平居中//
border-collapse: collapse; //設定表格的邊框合併//
background: url(images/bg3.jpg);
background-size: 100% 100%;
}
td{
border: 2px dashed green;
color: red;
font-family: 宋體;
font-size: 24px;
}
//id選擇器//
#inp1{
background: pink;
border: 5px solid black;
width: 150px;
height: 20px;
}
#inp2{
background: white;
border: 5px solid black;
width: 150px;
height: 20px;
}
#ipn3{
background: goldenrod;
border: 5px solid black;
width: 150px;
height: 30px;
font-family: 阿美簡體;
font-size: 15px;
color: white;
}
label{
text-align: right;
/*border: 1px solid green;*/
}
//類選擇器//
.td1{
text-align: right;
}
</style>
<body>
<form method="get">
<table>
<tr>
<td class="td1">
<label>姓名:</label>
</td>
<td>
<input id="inp1" type="text" placeholder="請輸入使用者名稱" />
</td>
</tr>
<tr>
<td class="td1">
<label>密碼:</label>
</td>
<td>
<input id="inp2" type="password" placeholder="請輸入密碼" />
</td>
</tr>
<tr>
<td></td>
<td>
<input id="ipn3" type="button" value="點選登入" />
</td>
</tr>
</table>
</form>
</body>
層級選擇器 主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元 素 結合使用，減少命名，同時也可以通過層級，防止命名衝突。 (4)子代選擇器:父級元素1>子集元素2 (5)後代選擇器:父級元素 後代元素 後代元素 例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
//子代選擇器//
#ul_01>li{
background: red;
}
#ul_01>li>ul{
background: yellow;
}
#ul_01>li>ul>li{
background: pink;
}
//後代選擇器//
#ul_01 a{
text-decoration: none;
}
#ul_01 li{
list-style: none;//去掉無序列表的點//
}
#ul_01 li ul li{
background: greenyellow;
}
#ul_01>li ul a{
color: red;
}
</style>
</head>
<body>
<ul id="ul_01">
<li><a href="#">首頁</a></li>
<li><a href="#">數碼產品</a></li>
<li><a href="#">家用電器</a></li>
<p><a href="#">學的不僅是技術</a></p>
<li>
<a href="#">其他型別</a>
<ul>
<li><a href="#">童裝</a></li>
<li><a href="#">男裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">時尚裝</a></li>
</ul>
</li>
</ul>
</body>
</html>
(6)組選擇器 多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。 例:
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">.........</div>
<div class="box2">.........</div>
<div class="box3">.........</div>
(7)偽類及偽元素選擇器 常用的偽類選擇器有 hover，表示滑鼠懸浮在元素上時的狀態，偽元素選擇器有 before 和 after,它們可以通過樣式在元素中插入內容 例:
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}
<div class="box1">.........</div>
<div class="box2">.........</div>
<div class="box3">.........</div>