CSS知識梳理05
阿新 • • 發佈：2018-12-05
ont check 文字描邊 empty election height 人在 nbsp after
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>屬性選擇器</title> 5 <style> 6 /*選中p標簽裏面有align屬性的*/ 7 /*p[align]{color:red;}*/ 8 /*選中p標簽裏面有align屬性並且值為center的*/ 9 /*p[align=center]{color:red;}*/ 10 11 /*以ce開頭的*/ 12 /*p[align^=ce]{color:red;}*/ 13 /*包含e的*/ 14 p[align*="e"]{color:red;} 15 </style> 16 </head> 17 <body> 18 <p>我叫怒放，我現在很慌，有個叫汪峰想要我的命！</p> 19 <p align="right">我叫怒放，我現在很慌，有個叫汪峰想要我的命！</p> 20 <p align="center">我叫怒放，我現在很慌，有個叫汪峰想要我的命！</p> 21 <p align="cesuo">廁所</p> 22 23 24 <input type="radio" name="sex" value="1" />男 25 </body> 26 </html>
:link
:visited
:active
:hover
:focus 獲取焦點的時候
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>偽類選擇器</title> 5 <style> 6 /*當獲取焦點的時候*/ 7 input:focus{border:1px solid blue;} 8 9 /* :not(選擇器) */ 10 /*input:not(.one){width:400px;}*/ 11 12 /*符合大兒子身份的li*/ 13 li:first-child{color:red;} 14 /*符合小兒子身份的li*/ 15 li:last-child{color:blue;} 16 /*符合獨生子身份的li*/ 17 li:only-child{font-size:30px;} 18 19 /*符合第n個兒子身份的li*/ 20 li:nth-child(2){font-size:50px;} 21 22 /*同級元素中的第1個li*/ 23 li:first-of-type{background:lime;} 24 25 /*絕後的標簽*/ 26 p:empty{height:30px;background:pink;} 27 /*:checked：單選框或多選框*/ 28 /*:checked{width:100px;height:50px;}*/ 29 :checked+span{color:red;} 30 </style> 31 </head> 32 <body> 33 <!-- 將選中的姓名改為紅色 --> 34 <!-- :checked --> 35 <input name="sex" type="radio"><span>男</span> 36 <input name="sex" type="radio"><span>女</span> 37 <!-- 選:empty --> 38 <p></p> 39 40 41 <!-- :focus --> 42 <input /> 43 <input class="one" /> 44 <input /> 45 46 <!-- 選兒子 --> 47 <ul> 48 <div>第1個兒子不是li</div> 49 <li>張根基第一次去女朋友家</li> 50 <li>老丈人熱情的握住他的手說</li> 51 <li>你就是根基吧？</li> 52 </ul> 53 <hr> 54 <ol> 55 <div>第1個兒子不是li</div> 56 <li>知道上帝看片為什麽不要錢嗎？</li> 57 <li>人在做</li> 58 <li>天在看</li> 59 </ol> 60 <hr> 61 <ul> 62 <li>秦始皇的太子一般都不大行</li> 63 </ul> 64 </body> 65 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>偽對象</title> 5 <style> 6 /*選中第1個字*/ 7 p::first-letter{ 8 font-size:30px; 9 color:orange; 10 } 11 12 /*選中1行*/ 13 p::first-line{ 14 color:blue; 15 } 16 17 /*火狐需要加前綴*/ 18 p::-moz-selection{ 19 background:black; 20 color:red; 21 } 22 p::selection{ 23 background:black; 24 color:red; 25 } 26 27 /*在前面追加內容*/ 28 p::before{ 29 content:‘請問：‘; 30 } 31 /*在後面追加內容*/ 32 p::after{ 33 content:‘行黑紅選擇喝兩杯水！‘; 34 } 35 </style> 36 </head> 37 <body> 38 <p>凝聚力發時間浪費了多少分了呢<br>接飛機撒漏發了</p> 39 </body> 40 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>opacity透明度和邊框圓角</title> 5 <style> 6 .box{ 7 width:200px; 8 height:200px; 9 background:orange; 10 position:relative; 11 top:200px; 12 left:50px; 13 14 /*邊框圓角*/ 15 border-radius:50%; 16 } 17 .box:hover{ 18 /*0~1之間：0全透明，1不透明*/ 19 opacity:0.5; 20 /*透明度兼容IE的寫法*/ 21 filter:alpha(opacity=50); 22 } 23 24 .box1{ 25 width:300px; 26 height:300px; 27 background:green; 28 29 /*邊框圓角*/ 30 border-bottom-left-radius:100%; 31 border-bottom-right-radius:50%; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="box"></div> 37 <div class="box1"></div> 38 </body> 39 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>盒子陰影</title> 5 <style> 6 .box{ 7 width:200px; 8 height:400px; 9 background:green; 10 margin:50px auto; 11 12 /*盒子陰影:x軸 y軸 模糊度 外延值 顏色*/ 13 /*box-shadow:0px 0px 10px 10px red;*/ 14 /*小米官網的凸起陰影*/ 15 box-shadow:0 15px 30px rgba(0,0,0,0.5); 16 } 17 18 p{ 19 font-size:100px; 20 /*文字陰影*/ 21 text-shadow:5px 5px 3px #544; 22 /*文字描邊*/ 23 -webkit-text-stroke:3px pink; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"></div> 29 30 <p>誰娶了多愁善感的你，誰特麽倒黴到底！</p> 31 </body> 32 </html>
animation:名稱 持續時間 過渡類型 延遲時間 循環次數 是否反向;
@keyframes 定義動畫詳情
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS的動畫</title> 5 <style> 6 @import ‘‘; 7 .box{ 8 width:100px; 9 height:100px; 10 background:pink; 11 12 /*動畫*/ 13 animation:sb .5s linear infinite alternate; 14 } 15 16 @keyframes sb{ 17 50%{ 18 transform:translateY(400px); 19 } 20 100%{ 21 transform:translateX(800px); 22 background:blue; 23 } 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"></div> 29 </body> 30 </html>
CSS知識梳理05