H5基本樣式和css選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本樣式</title>
<style type="text/css">
div{
/*文字顏色*/
color: red;
/*設定寬度*/
width:500px;
/*設定高度*/
height: 500px;
/*設定背景顏色*/
/*background-color: orange;*/
background-color:rgb(84,121,30);
/*邊框*/
border: 5px solid black;
/*標籤文字開頭空出30px*/
text-indent:30px;
/*標籤內文字內容加下劃線*/
text-decoration:underline;
/*文字貫穿線*/
text-decoration:line-through;
/*取消a標籤的下劃線*/
text-decoration:none;
/*內容居中*/
text-align: center;
/*字型大小*/
font-size:30px;
/*字型*/
font-family: STSong;
/*文字加粗*/
font-weight:bold;
/*文字傾斜*/
font-style:italic;
/*設定背景圖片*/
background-image: url(img/3.jpg);/*(此處需要在omg資料夾中插入一張圖片)*/
/*不重複背景圖片*/
background-repeat:no-repeat;
/*背景尺寸*/
background-size:100%100%;
}
／*取消a標籤自帶的下劃線*/
a{
text-decoration:none;
}
</style>
</head>
<body>
<div>我是div</div>
<a href="javascript:void(0)">我是a標籤</a>
<div>
<a href="javascript:void(0)">我是另一個a標籤</a>
</div>
</body>
</html>
css選擇器： css選擇器就如同雷達一樣，他能精準的找到我們想要修改的標籤的樣式，他在程式編寫的過程中起到很大的作用，可以說沒有css選擇器就不能製作出一套完美的網頁，如下，我通過程式碼的方式讓大家體會選擇器的強大作用；（注：大家在執行程式碼的過程中儘量是想用哪個就注掉其他無關的程式碼，以免它們之間相互影響，給你的觀察帶來影響。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css選擇器</title> <!--選擇器：負責在樣式區找到我們要修改樣式的標籤--> <style type="text/css"> /*css選擇器第一種：標籤名選擇器*/ div{ width: 100px; height: 100px; background-color: red; } /*二：類選擇器*/ .div1{ width: 200px; height: 200px; background-color: darkcyan; } /*三：id選擇器,優先順序很高，和js有關,儘量少使用*/ #oDiv{ width: 50px; height: 50px; background-color: blue; } /*四：後代選擇器*/ .div2 p{ color: red; } /*五：萬用字元選擇器*/ * { border: 1px solid black; } /*六：組合選擇器*/ .div3,.div4,.div5,#oDiv1,p{ width: 200px; height: 200px; background-color: cyan; } p{ width: 100px; height: 100px; background-color:red; } </style> </head> <body> <div class="div1"></div> <div id="oDiv"> 我是做參考的</div> <p class="div1"></p> <div class="div2"> <p>我是p1</p> <div> <p>我是p3</p> </div> </div> <p>我是p2</p>--> <div class="div5"></div> <div class="div4"></div> <div class="div3"></div> <div id="oDiv1"></div> <p></p> <!-- 選擇器優先順序 標籤名選擇器<class選擇器<id選擇器 --> </body> </html>