标签:隐藏 key animation 页面 之间 bsp type 存在 字体加粗
id选择区:
#i1{ background-color: #2459a2; height: 48px; }
class选择器 ******
.名称{ ... } <标签 class=‘名称‘> </标签>
标签选择器:
div{
...
}
所有div设置上此样式
层级选择器(空格隔开) ******
.c1 .c2 div{
}
组合选择器(逗号) ******
#c1,.c2,div{ }
属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n=‘alex‘]{ width:100px; height:200px; }
1.边框:
border: 1px solid red border-top # 上 border-bottom # 下 border-left # 左 border-right # 右
2.background:
background-color; # 背景颜色 background-image:url(‘image/4.gif‘); # 默认,div大,图片重复放 background-repeat: repeat-y; # 是否重复 background-position-x: # 图片x轴位置 background-position-y: # 图片y轴位置 background: url(icon_18_118.png) 0 -119px no-repeat; # 简写
3.常用属性:
height; # 高度 百分比 width; # 宽度 像素,百分比 text-align: center; # 水平方向居中 line-height; # 垂直方向根据标签高度居中 color; # 字体颜色 font-size; # 字体大小 font-weight; # 字体加粗 text-decoration:none; # 去除超链接的下划线 opcity: 0.6; # 透明度 z-index: 10; # 高的在上面 overflow: hidden,auto # 规定当内容溢出元素框时发生的事情,隐藏或者出现滚动条 hover # 选择鼠标指针浮动在其上的元素,并设置其样式 a:hover{background-color:yellow;}
4.float:
让标签浪起来,块级标签也可以堆叠
<div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: left">2</div>
控制不住加上:<div style="clear: both;"></div>
5.display:
display: none; -- 让标签消失 display: inline; # 行内 display: block; # 块级 display: inline-block; 具有inline,默认自己有多少占多少 具有block,可以设置高度,宽度,padding margin ****** 行内标签:无法设置高度,宽度,padding margin 块级标签:设置高度,宽度,padding margin
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin:100px 50px;
ps:缩写如果写全的话,顺序是上右下左,其实就是顺时针方向.
padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px;
padding:25px 50px;
8.position:
fiexd (固定在页面的某个位置)
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
relative + absolute
<div style=‘position:relative;‘> <div style=‘position:absolute;top:0;left:0;‘></div> </div>
标签:隐藏 key animation 页面 之间 bsp type 存在 字体加粗
原文地址:http://www.cnblogs.com/breakering/p/7221173.html