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>CSS知识梳理02
原文地址：https://www.cnblogs.com/zhony/p/10045697.html