什么是CSS?
在標簽上設置標簽的style屬性。
編寫CSS的方法
一、直接在標簽中寫style屬性。
二、在head標簽中寫style標簽,這里就需要選擇器選擇所需的標簽
1、id選擇器,以#開頭,例子如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 定義了id為i1的使用style--><style>#i1{background-color:blue;}</style> </head> <body><div>Treelight</div><div id="i1">Alex</div><div>Syvia</div><div>HeMinLing</div> </body> </html>
2、類選擇器,以.開頭
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 定義了類名為c1標簽的使用style--><style>.c1{background-color:blue;}</style> </head> <body><div>Treelight</div><div>Alex</div><div class="c1">Syvia</div><div>HeMinLing</div> </body> </html>
3、標簽選擇器,例子如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 定義了span標簽的使用style--><style>span{background-color:blue;}</style> </head> <body><div>Treelight</div><div>Alex</div><div>Syvia</div><div>HeMinLing</div><span>Diana</span> </body> </html>
4、層級選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 定義了div標簽中的span標簽的使用style(中間用空格分開),標簽可用以點開頭的類或以#開頭的id代替--> <style>div span{background-color:blue;}</style> </head> <body><div>Treelight<span>30歲</span></div><div>Alex</div><div>Syvia</div><div>HeMinLing<span>18歲</span></div> </body> </html>
5、組合選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 此處定義的標簽或類或ID(用逗號分隔)均可用此style--> <style>div,span{background-color:blue;}</style> </head> <body><div>Treelight<span>30歲</span></div><div>Alex</div><div>Syvia</div><div>HeMinLing<span>18歲</span></div> </body> </html>
?
6、屬性選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 此處定義了具有屬性n="30"的div標簽可用此style,其中標簽可用類或id代替--><style>div[n="30"]{background-color:blue;}</style> </head> <body><div n="30">Treelight<span>30歲</span></div><div>Alex</div><div>Syvia</div><div>HeMinLing<span>18歲</span></div> </body> </html>
優先級:
1、直接在標簽中添加style屬性最優。
2、在head中的style標簽中,如有沖突,最后定義的屬性優先。
在標簽中定義多個類class="c1 c2"
7、css還可存在于文件中,然后可在html的頭標簽中利用link標簽,示例如下:
css樣式文件
.c1{ background-color:red;}.c2{ background-color:green;}
html文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> <!-- 此處引用了commons.css樣式--><link rel="stylesheet" href="commons.css"> </head> <body><div>Treelight<span>30歲</span></div><div class="c1">Alex</div><div class="c2">Syvia</div><div>HeMinLing<span>18歲</span></div> </body> </html>
?CSS中常用屬性
一、border:設置邊框的寬度、顏色、樣式
二、height:標簽高度,單位像素,不能使用百分比
三、width:標簽寬度,單位可為像素或百分比
四、text-align:center:水平居中
五、line-height:<標簽高度>:可實現垂直居中
六、color:red:字體顏色
七、font-size:num:字號
八、font-weight:bold:加粗
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="border:1px solid red; height:50px; width:400px; text-align:center; line-height:50px; color:blue; font-size:20px; font-weight:bold">Treelight </div> </body> </html>
九:float:<left><right>:使得塊級標簽可堆疊
clear:both:使用情況如下:如果父級標簽沒設置高度,此時可在子級標簽(設置了浮動)下加上一個樣式clear:both,清除浮動,此時可撐起父級標簽。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="width:80%;background-color:red;float:left">Treelight</div><div style="width:20%;background-color:blue;float:right">Alex</div> </body> </html>
十、display屬性:
display:inline:使得塊級標簽有多少占多少
display:block:使得行內標簽占一行
display:inline-block:使得標簽有多少占多少;可以設置高度,寬度,padding? margin
display:none:使得標簽消失
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="display:inline;background-color:red">Treelight</div><span style="display:block;background-color:blue">Alex</span> </body> </html>
默認情況下,行內標簽無法設置高度、寬度等,但以下程序使用display則可實現
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><span style="width:600px;height:100px;display:inline-block;background-color:blue">Alex</span> </body> </html>
?十一、margin屬性:外邊距,就是標簽的外邊框與上一層標簽之間的距離
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="height:60px;border:1px solid blue"><div style="margin:0px">Treelight</div></div> </body> </html>
十二、padding屬性:內邊距,標簽的內邊框與標簽內容的距離。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div style="height:60px"><div style="padding:10px;background-color:red;border:3px solid blue">Treelight</div></div> </body> </html>
?寫html注意事項
1、應該在最外面設置絕對寬度(像素》,然后在里面用百分比
十三、postion屬性
1、fixed:另起一層,可固定在頁面的一個地方
案例一 :返回頂部按鈕固定在右下角
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body> <div style="height:800px;border: 1px solid red"></div> <div style="position: fixed;bottom:5px;right:5px;background-color: black;color:white">返回頂部</div> </body> </html>
案例二:頭部內容永遠固定在頁面的最上面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.pg-header{height:48px;position:fixed;top:0;left:0;right:0;background-color:black;color:white}.pg-body{margin-top:53px;border:1px solid red;height:800px}</style> </head> <body> <div class="pg-header">頭部</div> <div class="pg-body">內容</div> </body> </html>
2、relative、absolute:一般一齊來用,比如一個div設置了一個position屬性為relative,則此div的子div可設置屬性為absolute,則子div的位置則是相對于父div的位置
案例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;"><div style="background-color:black;position:absolute;top:0;left:0;width:50px;height:50px"></div> </div> <div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;"><div style="background-color:black;position:absolute;top:0;right:0;width:50px;height:50px"></div> </div> <div style="width:980px;height:200px;margin:0 auto;position:relative;border:1px solid red;"><div style="background-color:black;position:absolute;bottom:0;left:0;width:50px;height:50px"></div> </div> </body> </html>
十四、opacity:透明度,值為0-1之間
十五、z-index:層級;越大就在上面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.layer1{border:1px solid red;height:5000px;}.layer2{position:fixed;top:0;right:0;left:0;bottom:0;z-index:9;opacity:0.5;background-color:black}.layer3{position:fixed;top:50%;left:50%;height:100px;width:250px;margin-top:-100px;margin-left:-250px;z-index:10;background-color:white;}</style> </head> <body> <div class="layer1">第一層 </div> <div class="layer2">第二層 </div> <div class="layer3"><input type="text "\><input type="text "\><input type="text "\> </div></body> </html>
十六、overflow:應用場景:父div中含有一個img標簽,而此標簽中的圖片的寬、長比父div的大,則overflow設置為auto或scroll則會出現滾動條。設為hidden,則超出的范圍不顯示。
案例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="height:400px;width:400px;overflow:auto"><img src="1.jpg"\> </div></body> </html>
?十七、hover
使用方法:在style標簽中,.<classname>:hover,表示此樣式,在鼠標移動到對應的classname的標簽上才應用
案例:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:blue;height:48px}.pg-header .content{width:1000px;margin:0 auto;line-height:48px;}.topic{float:left;padding:0px 40px}.topic:hover{background-color:red}</style> </head> <body> <div class="pg-header"><div class="content"><div class="topic">全部</div><div class="topic">42區</div><div class="topic">段子</div><div class="topic">圖片</div><div class="topic">挨踢1024</div></div> </div> <div class="pg-body">a </div></body> </html>
?十八、background-color:設置背景顏色
十九、background-image:url(path):設置背景圖片,默認情況下會占滿整個標簽。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="background-image:url(4.gif);height:150px"></div> </body> </html>
二十、background-repeat:no-repeat:設置圖片不重復
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="background-image:url(4.gif);height:150px;background-repeat:no-repeat"></div> </body> </html>
?二十一、background-repeat-x background-repeat-y:no repeat:設置不在x或y方向重復
二十二、background-position-x、background-position-y:設置背景圖片的位置
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="height:100px"><div style="background-image:url(2.png);height:19px;background-repeat:no-repeat;width:20px;border:1px solid red;background-position-y:10px"></div> </div> </body> </html>
?案例:用戶登錄框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div><div style="width:980px;height:48px;margin:0 auto"><div style="color:red;line-height:48px;font-size:20px;float:left">*</div><div style="line-height:48px;font-size:20px;float:left;margin-left:10px">用戶名</div><div style="height:48px;width:400px;float:left;margin-left:10px;position:relative"><input type="text" style="height:48px;width:370px;padding-right:30px" \><span style="background-image:url(i_name.jpg);height:48px;display:inline-block;width:30px;background-repeat:no-repeat;position:absolute;right:0;top:20px; " ></span></div></div> </div></body> </html>
?案例:后臺管理頁面(左側菜單不動,右側的內容可動)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#3825a2;height:48px;color:white;}body{margin:0;}.pg-content .menu{position:fixed;top:48px;left:0;bottom:0;width:200px;background-color:red;}.pg-content .content{position:fixed;top:48px;left:200px;bottom:0;right:0;background-color:green;overflow:auto;}</style> </head> <body> <div class="pg-header"></div> <div class="pg-content"><div class="menu">a</div><div class="content"><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div> </div> <div class="pg-footer"></div> </body> </html>
?案例:后臺管理頁面(左側菜單可隨著滾動條移動)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#3825a2;height:48px;color:white;}body{margin:0;}.pg-content .menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background-color:red;}.pg-content .content{position:absolute;top:48px;left:200px;bottom:0;right:0;background-color:green;}</style> </head> <body> <div class="pg-header"></div> <div class="pg-content"><div class="menu">a</div><div class="content"><div style="background-"><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div></div> </div> <div class="pg-footer"></div> </body> </html>
案例:后臺管理頁面(左側菜單不動,右側的可滾動)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#3825a2;height:48px;color:white;}body{margin:0;}.pg-content .menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background-color:red;}.pg-content .content{position:absolute;top:48px;left:200px;bottom:0;right:0;background-color:green;overflow:auto;}</style> </head> <body> <div class="pg-header"></div> <div class="pg-content"><div class="menu">a</div><div class="content"><div style="background-"><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div></div> </div> <div class="pg-footer"></div> </body> </html>
主要是在content中添加了overflow:auto,則此標簽可流動
建議加上mini-width,則少于mini-width出現橫排滾動條,防止變形。
案例:鼠標放到父標簽上,其中的一個子標簽可顯示紅色背景
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.item:hover .item2{background-color:red}</style> </head> <body> <div class="item"><div class="item1">123</div><div class="item2">456</div> </div> </body> </html>
?案例:后臺管理(用戶菜單的顯示和隱藏)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color:#3825a2;height:48px;color:white;}.pg-header .logo{width:200px;height:48px;background-color:#3cb572;line-height:48px;text-align:center;}.pg-header .login{width:200px;height:48px;background-color:#a97c38;postion:relative;}.pg-header .login:hover{background-color:blue;}body{margin:0;}.pg-content .menu{position:absolute;top:48px;left:0;bottom:0;width:200px;background-color:red;}.pg-content .content{position:absolute;top:48px;left:200px;bottom:0;right:0;background-color:green;overflow:auto;z-index:10;}.left{float:left;}.right{float:right;}.pg-header .login a img{width:40px;height:40px;border-radius:50%;margin-top:5px;}.pg-header .login .usermenu{position:absolute;top:48px;right:120px;z-index:20;width:80px;height:60px;padding:10px;background-color:red;}.hide{display:none}.login:hover .usermenu{display:block}</style> </head> <body> <div class="pg-header"><div class="logo left">老男孩</div><div class="login right"><a><img src="1.jpeg"></a><div class="usermenu hide"><a style="display:block">我的資料</a><a style="display:block">注銷</a></div></div> </div> <div class="pg-content"><div class="menu">a</div><div class="content"><div style="background-"><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p></div></div> </div> <div class="pg-footer"></div> </body> </html>
?
?
圖標使用
網絡上具有大量的圖標提供,可直接使用,如http://www.fontawesome.com.cn
一、使用方法
1、下載:http://www.fontawesome.com.cn
2、解壓縮下載文件,并把font-awesome.min.css放在某個文件夾
3、引入:在html中的<head>
處加載font-awesome.min.css如下。
link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
4、使用:參考http://www.fontawesome.com.cn/faicons/,點擊對應的圖標有使用的教程
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="font-awesome.min.css"> </head> <body> <i class="fa fa-superpowers" aria-hidden="true" style="font-size:50px"></i> </body> </html>
?