CSS知識梳理02
iframe 在body裡面嵌入一個頁面
屬性：
frameborder 0/1 是否顯示邊框
scrolling yes/no/auto 是否顯示滾動條
width/height 設定框架的寬高
<frameset>
<frame />
</frameset>
1 <iframe frameborder="0" scrolling="no" width="100%" height="500" src="http://www.baidu.com" />
組合選擇器
1. E.class 表示既要是E元素，也要有.class
2. 後代選擇器： 爹 後代
ul li{} 表示選擇ul所有的後代li
3. 兒子選擇器： 爹>兒子
ul>li{} 表示只選擇ul的兒子li
4. 相鄰選擇器： 鄰居+老王
ul+p{} 選擇緊跟在ul後的兄弟p標籤
5. 兄弟選擇器： 大哥~兄dei
ul~p{} 選擇ul後面所有的兄弟p標籤
id > class > 標籤
選擇器越具體，優先順序就越高
1 <head> 2 <meta charset="UTF-8"> 3 <title>CSS的選擇器</title> 4 <style> 5 /*既要是p標籤，也要有class="big"*/ 6 /*p.big{font-size:30px;}*/ 7 8 /*後代選擇器*/ 9 /*ul li{border:1px solid red;}*/ 10 11 /*兒子選擇器*/ 12 /*ul>li{border:1px solid red;}*/ 13 14 /*相鄰選擇器：選擇緊跟在ul後面的p標籤*/ 15 /*ul+p{border:1px solid red;}*/ 16 17 /*兄弟選擇器：選擇ul後面所有的兄弟p標籤*/ 18 ul~p{border:1px solid red;} 19 20 </style> 21 </head> 22 <body> 23 <ul> 24 <li>千萬別說你一無所有</li> 25 <li class="big">千萬別說你一無所有</li> 26 <li> 27 <ol> 28 <li>#####</li> 29 <li>#####</li> 30 </ol> 31 </li> 32 </ul> 33 34 <b>小三</b> 35 36 <p class="big">千萬別說你一無所有，因為你至少還有病啊！</p> 37 <p class="big">千萬別說你一無所有，因為你至少還有病啊！</p> 38 <p class="big">千萬別說你一無所有，因為你至少還有病啊！</p> 39 40 <div> 41 <p>兄弟的兒子是侄子</p> 42 </div> 43 </body>
偽類選擇器
:link 訪問前
:visited 訪問後
:hover 懸停時（最常用的）
:active 啟用的時候，滑鼠按下去還沒鬆開的時候
1 <head> 2 <meta charset="UTF-8"> 3 <title>偽類選擇器:hover</title> 4 <style> 5 .box{ 6 background:#38f; 7 width:100px; 8 height:40px; 9 color:#fff; 10 } 11 12 .box:hover{ 13 background:#ccc; 14 } 15 16 /*設定a標籤的4種狀態*/ 17 a:link{color:#333;} 18 a:visited{color:#999;} 19 a:hover{color:#aaa;} 20 a:active{color:red;} 21 </style> 22 </head> 23 <body> 24 <div class="box">更多產品</div> 25 <a href="http://www.sina.com">招聘煮飯阿姨，男女不限</a> 26 <a href="wangru.com">旺旺</a> 27 </body>
font 設定字型的屬性
font-size 設定字型大小
font-weight 設定粗細
值：
bold或者100~900的整百數，600以上為粗體
font-family 設定字型檔案
設定文字的字型，設定的字型需要是計算機上安裝好的字型；字型安裝路徑為: c/windows/fonts
font-style 設定文字為斜體
值： italic 斜體
font統一設定，必須要兩個屬性以上：大小和字型檔案為必須的
1 <head> 2 <meta charset="UTF-8"> 3 <title>css的常用屬性-字型屬性</title> 4 <style> 5 p{ 6 /*設定字型大小*/ 7 /*font-size:30px;*/ 8 9 /*設定為粗體*/ 10 /*font-weight:bold;*/ 11 12 /*設定字型檔案*/ 13 /*font-family:老宋,宋體,楷體;*/ 14 15 /*font-style:italic;*/ 16 17 font:italic bold 30px 楷體; 18 } 19 </style> 20 </head> 21 <body> 22 <p>令鋒一直就很喜歡旺儒！不直的時候呢？</p> 23 <p>令鋒一直就很喜歡旺儒！不直的時候呢？</p> 24 <p>令鋒一直就很喜歡旺儒！不直的時候呢？</p> 25 26 </body>
background 背景屬性
background-color 背景顏色
background-image 背景圖片
值：
url(圖片路徑)
background-repeat 背景圖片的平鋪方式
值：
no-repeat 不平鋪
repeat-x x軸平鋪
repeat-y y軸平鋪
repeat 預設值，x和y都平鋪
background-position 背景圖片的位置
值：
可以是畫素或者百分比
也可以是：
top/bottom/center/left/right
background-size 背景圖片的大小，不能參與統一設定
值：
可以是畫素或者百分比
cover 等比例縮放到鋪滿整個容器，背景圖可能會超出容器
contain 等比例縮放來鋪滿寬或者高
background統一設定
例：
background:no-repeat bottom right red url(f.gif);
1 <head> 2 <meta charset="UTF-8"> 3 <title>css的常用屬性-背景屬性</title> 4 <style> 5 p{ 6 width:500px; 7 height:500px; 8 9 10 /*背景顏色*/ 11 /*background-color:deeppink;*/ 12 /*背景圖片*/ 13 /*background-image:url(f.gif);*/ 14 /*平鋪方式*/ 15 /*background-repeat:repeat-x; 16 background-repeat:repeat-y; 17 background-repeat:no-repeat;*/ 18 /*背景圖片的位置*/ 19 /*background-position:bottom right; 20 background-position:-150px;*/ 21 22 23 /*設定背景圖的大小*/ 24 /*background-size:500px; 25 background-size:cover; 26 background-size:contain;*/ 27 28 29 /*統一設定*/ 30 background:no-repeat bottom right red url(f.gif); 31 } 32 </style> 33 </head> 34 <body> 35 <p>令鋒一直就很喜歡旺儒！不直的時候呢？</p> 36 </body>
cursor 設定滑鼠的樣式
值：
pointer 小手手
not-allowed 禁止
其他請參考./cursor.html
1 <head> 2 <meta charset="UTF-8"> 3 <title>精靈圖的例項</title> 4 <style> 5 .box{ 6 /*1.設定盒子的寬高*/ 7 width:126px; 8 height:39px; 9 /*2. 載入背景圖片*/ 10 background:red url('./anniu.jpg') no-repeat -336px -296px; 11 12 border:1px solid red; 13 14 /*設定滑鼠樣式為小手*/ 15 cursor:pointer; 16 cursor:not-allowed; 17 /*cursor:text;*/ 18 } 19 /*3.設定hover*/ 20 .box:hover{ 21 width:135px; 22 height:40px; 23 background-position:-403px -161px; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"></div> 29 </body>
text-decoration 設定各種線
none： 指定文字無裝飾
underline： 指定文字的裝飾是下劃線
overline： 指定文字的裝飾是上劃線
line-through： 指定文字的裝飾是貫穿線
text-indent 設定首行縮排，值通常設定為2em
text-align 設定文字的水平位置
值： left/center/right 左/中/右
line-height 設定行高，設定為和高度一致，可以讓文字垂直居中；會悄悄將高度也設定為自己的行高！
vertical-align 設定元素本身的垂直對齊方式
1 <head> 2 <meta charset="UTF-8"> 3 <title>文字屬性</title> 4 <style> 5 /*去掉所有a標籤的下劃線*/ 6 a{text-decoration:none;} 7 p{ 8 width:150px; 9 border:1px solid red; 10 /*設定各種線*/ 11 text-decoration:underline; 12 text-decoration:line-through; 13 /*text-decoration:overline;*/ 14 15 /*首行縮排*/ 16 text-indent:2em; 17 18 } 19 20 h1{ 21 text-align:right; 22 border:1px solid red; 23 /*height:150px;*/ 24 line-height:150px; 25 } 26 </style> 27 </head> 28 <body> 29 <p> 30 怎麼是你？How are you? 31 怎麼老是你？How old are you? 32 </p> 33 <!-- 設定文字的水平位置 --> 34 <h1>難受，香菇。你為什麼要射這種哇？</h1> 35 36 <input style="height:40px" /><button style="height:40px">百度一下</button> 37 </body>