一、行內、內部、外部樣式
1、行內樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background-color: orange;color: red;"> <h1 style="border: 1px solid #ccc;">網頁的內容</h1> </body> </html>
2、內部樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background-color: orange; } h1{ background-color: blue; color: white; } </style> </head> <body> <h1>網頁的內容</h1> </body> </html>
3、外部樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <h1>網頁的內容</h1> </body> </html>
導入的.css文件
body{ background-color: orange; } h1{ color: red; }
二、語法格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: blue; color: white;} </style> </head> <body> <h1>網頁的內容</h1> </body> </html>
三、注釋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 多行注釋, 這里的內容就不會被顯示或者不會被瀏覽器執行. */ body{ background-color: #7cffa7; /* 背景-顏色: 藍色; */ color: white; /* 字體顏色: 白色; */ font-size: 100px; /* 字體-大小: 100像素; */ } h1{ background-color: white; border-radius: 32px; } </style> </head> <body> <h1>網頁的內容</h1> </body> </html>
四、選擇符
1、萬能選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: #cccccc; } * { /* 代表網頁中的所有元素 */ color: blue; } li{ background-color: wheat; } </style> </head> <body> <h1>靜夜詩</h1> <p> 床前明月光,<br> 疑是地上霜.<br> .... </p> <ul> <li>第1個li選項</li> <li>第2個li選項</li> </ul> </body> </html>
2、標簽選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: #cccccc; } p { /* 通過標簽名來控制指定哪些標簽的外觀效果,這就是標簽選擇符 */ font-size: 26px; } </style> </head> <body> <h1>靜夜詩</h1> <p> 床前明月光,<br> 疑是地上霜.<br> .... </p> <p> 另一個段落 </p> </body> </html>
3、id選擇符
!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #p1{ /* 告訴瀏覽器找到id值為p1的標簽,給它加上外觀樣式 */ color: orange; /* 顏色: 橙色 */ font-size: 32px; /* 字體-大小: 32像素; */ } #h2{ color: blue; } </style> </head> <body> <h1>靜夜詩</h1> <p> 床前明月光,<br> 疑是地上霜.<br> .... </p> <p id="p1"> 另一個段落 </p> <h2 id="h2">h2標題</h2> </body> </html>
4、class選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1{ /* 指定具有class屬性值為c1的所有的標簽的樣式 */ color: blue; } .p1{ font-size: 32px; } .p2{ background-color: orange; } </style> </head> <body> <ul> <li></li> </ul> <h1>靜夜詩</h1> <p class="p2"> 床前明月光,<br> 疑是地上霜.<br> .... </p> <p class="c1 p1 p2" id="c1">另一個段落</p> <h2 class="c1">h2標題</h2> <p class="c1 p1">還有一個段落</p> </body> </html>
5、包含選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box p{ /* div元素包含的所有的p元素 */ background-color: blue; color: #fff; } </style> </head> <body> <p>這是一個網頁</p> <div class="box"> <p>這里也有一個段落</p> <p>詳情請點擊<a href="">了解更多</a></p> </div> </body> </html>
6、父子選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .header p{ /* class=headers的元素里面所有的子標簽p或者孫子標簽p... */ background-color: #ccc; color: blue; } .header>p{ /* class=header的元素的子標簽p */ color: red; } </style> </head> <body> <div class="header"> <div class="header-left"> <p>頁面的左邊</p> </div> <p>中間的一段文本</p> <div class="header-right"> <p>頁面的右邊</p> </div> </div> </body> </html>
7、兄弟選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #three+li{ /* id=three的下一個標簽叫li的,如果下一個標簽不叫li或者不是指定的選擇符,則樣式的修改無效 */ color: red; } #three~.a1{/* id=three的后面所有class=a1的兄弟元素 */ background-color: orange; } </style> </head> <body> <ul> <li>第1個li元素</li> <li>第2個li元素</li> <li id="three">第3個li元素</li> <li>第4個li元素</li> <li class="a1">第5個li元素</li> <li>第6個li元素</li> <li class="a1">第7個li元素</li> </ul> </body> </html>
8、屬性選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input[type]{ /* 控制所有具有type屬性的input元素 */ outline: none;/* 去除外邊線 */ } input[type=text]{ /* 控制所有type="text"的input元素 */ color: red; } </style> </head> <body> 用戶名: <input type="text" name="" /><br> 昵稱: <input type="text" /><br> 密碼: <input type="password" /><br> 性別: <input type="radio" name="">男 </body> </html>
9、偽類選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{ color: blue; } a:hover{ /* 當標簽處於被鼠標懸浮的時候 */ color: #7cffa7; } a:nth-child(1){/* 處於第一個位置的子元素 */ color: red; } a:last-child{ color: red; } .list1 li:nth-child(odd){ /* odd排名在奇數位置的li標簽 */ background-color: red; } .list1 li:nth-child(even){ background-color: blue; } .last2 li:nth-child(3n-2){ background-color: red; } .last2 li:nth-child(3n-1){ background-color: green; } .last2 li:nth-child(3n){ background-color: blue; } </style> </head> <body> <a href="http://www.baidu.com/">老男孩</a><br> <a href="http://www.baidu.com/">老男孩</a><br> <a href="http://www.baidu.com/">老男孩</a><br> <a href="http://www.baidu.cn/">老男孩</a> <ul class="list1"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <ul class="last2"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </body> </html>
10、偽對象選擇符
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .price{ color: red; } .price::before{ content: "<<"; color: blue; } .price::after{ content: ">>"; color: blue; } .price::selection{ background-color: red; color: orange; } </style> </head> <body> <span class="price">價格</span> </body> </html>
五、基本屬性
1、文本屬性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .center{ text-align: center; } .left{ background-color: red; text-align: left; text-indent: 10px; } .right{ background-color: red; text-align: right; } .p1{ letter-spacing: 3px; /* 文本中字符之間的距離 */ } .p2{ text-decoration: line-through; /* 下划線 */ } .p2 img{ vertical-align: middle; /* 在圖片和文本進行組合排版的時候,用於指定圖片在垂直方向的對齊方式 */ } a{ text-decoration: none; /* 去掉a標簽默認的下划線 */ } .p3{ line-height: 32px; /* 文本的行高 */ } </style> </head> <body> <p class="left">這是一段很長的的很長的告白!!!!</p> <p class="center">這是一段很長的的很長的告白!!!!</p> <p class="right">這是一段很長的的很長的告白!!!!</p> <p class="p1">這是一段很長的的很長的告白</p> <p class="p2">百度 <img src="./image/icon.png" alt=""><a href="">百度</a></p> <p class="p3"> 一段文本 <br> 一段文本 <br> 一段文本 <br> 一段文本 <br> </p> </body> </html>
2、字體屬性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ font-size: 32px; color: red; font-weight: bold; /* 字體加粗 */ } .p1{ font-family: "微軟雅黑"; } .p2{ font-family: "宋體"; font-style: italic; /* 字體傾斜, normal表示正常,不傾斜 */ } .p3{ font: italic bold 32px "宋體"; /* 簡寫: 加粗 字體大小 字體族 */ } </style> </head> <body> <p class="p1">這是一段很長的的很長的告白!!!!</p> <p class="p2">這是一段很長的的很長的告白!!!!</p> <p class="p3">這是一段很長的的很長的告白!!!!</p> </body> </html>
3、邊框屬性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .p1{ /*border-left-color: red; !* 左邊邊框顏色: 紅色; *!*/ /*border-left-width: 2px; !*左邊邊框寬度: 2像素; *!*/ /*border-left-style: solid; !* 左邊邊框樣式: 實線 *!*/ /*border-color: blue red; !* 上下邊框顏色: 藍色 左右邊框: 紅色; *!*/ /*border-width: 2px 4px; !*上下邊框寬度: 2像素; 左右邊框: 4像素 *!*/ /*border-style: solid dashed; !* 邊框樣式: 上下實線 左右虛線; *!*/ /*border-color: red blue black; !* 邊框顏色: 上紅色 左右藍色 下黑色 ; *!*/ /*border-width: 2px 4px 10px; !*邊框寬度: 上2px 左右4px 下10px*!*/ /*border-style: solid dashed dashed; !* 邊框樣式: 上實線 左右下都是虛線; *!*/ /*border-color: red blue black orange; !* 邊框顏色: 上紅色 右藍色 下黑色 左橙色; *!*/ /*border-width: 2px 4px 10px 5px; !*邊框寬度: 上2px 右4px 下10px 左5px*!*/ /*border-style: solid dashed dashed solid; !* 邊框樣式: 上實線 右下都是虛線 左實線; *!*/ border: 1px solid black; /* 四條邊框統一1px 實線 黑色 */ } </style> </head> <body> <p class="p1">這是一段很長的的很長的告白!!!!</p> </body> </html>
4、背景屬性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .p1{ background-color: orange; border-radius: 13px; /* 邊框圓角 */ } img{ background: #000; border-radius: 12px; } body{ /*background-image: url("./image/timg.jpg"); !* 背景圖片,必須使用url進行指定,而且只能是相對於當前url所在的文件 *!*/ /*background-size: 500px 600px; !*背景大小 寬度500px 高度600px*!*/ /*background-repeat: no-repeat;!* 不平鋪 *!*/ /*!*background-repeat: repeat-x;!* x軸平鋪 *!*!*/ /*!*background-repeat: repeat-y;!* y軸平鋪 *!*!*/ /*!*background-repeat: repeat;!* 默認 平鋪 *!*!*/ /*!* 在背景如果不平鋪的情況,可以選擇讓背景位置移動 *!*/ /*background-position: 100px -300px; !* 背景定位: 距離左邊的位置100px 距離頂部的位置-300px *!*/ /*background-color: #bbbbbb; !* 背景顏色 *!*/ /* 縮寫 */ /*background: 背景顏色 背景圖片 背景位置/背景大小 背景平鋪方式;*/ background: url("./image/timg.jpg") #bbbbbb 100px 300px/100px 200px no-repeat; } </style> </head> <body> <p class="p1">這是一段很長的的很長的告白!!!!</p> <img src="./image/icon.png" alt=""> </body> </html>
5、邊距屬性（一）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 100px; height: 100px; background-color: blue; margin-bottom: 20px; /* 距離下方元素的邊距: 20px; */ } .box2{ width: 100px; height: 100px; background-color: red; margin-top: 20px; /* 距離頂部元素的邊距: 20px; */ } .img1{ background-color: orange; } .img2{ background-color: red; } .img1{ margin-right: 10px; /* 距離右邊元素的邊距: 10px; */ } .img2{ margin-left: 10px; /* 距離左邊元素的邊距: 10px */ } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> <div class="box2"></div> <img class="img1" src="./image/icon.png" alt=""><img class="img2" src="./image/icon.png" alt=""> </body> </html>
6、邊距屬性（二）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 300px; /* 元素寬度 */ height: 300px; /* 元素高度 */ background-color: orange; padding-top: 10px;/* 設置內部元素距離當前元素的頂部之間的空白高度 */ padding-left: 20px; /* 設置內部元素距離當前元素的左邊之間的空白高度 */ } .son{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box1"> <div class="son"></div> </div> </body> </html>