一.回顧內容
前端的三大組成(三大模塊)
HTMl(超文本標記語言) 結構層
css(層疊樣式表) 表現層:用來美化HTML結構
JS(Java script)(腳本語言) 行為層:提供用戶和界面的交互
二.CSS(層疊樣式表)
1. CSS的概念及其介紹
CSS 指層疊樣式表 (Cascading Style Sheets)
作用:美化HTML結構,重點:css可以很好的將結構內容和表現進行分離.
2. css的三種表現形式(引入方法)
css的語法結構:選擇器{屬性:值;屬性:值;…}
選擇器:選擇器是將樣式和頁面元素關聯起來的名稱，屬性是希望設置的樣式屬性每個屬性有一 個 或多個值.顧名思義就是用來篩選元素的一種方式.
(1)行內樣式(內聯樣式):通過style屬性將樣式寫入標簽中.
例:
<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>