标签：颜色 男女 hover 大哥 no-repeat 百分比 :hover src html
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>
标签：颜色 男女 hover 大哥 no-repeat 百分比 :hover src html
原文地址：https://www.cnblogs.com/zhony/p/10045697.html
