czbk前端css总结
position:定位元素 默认是静态固定static
fixed固定定位，以“浏览器”为窗口定位
配合top：left：right：bottom使用
relative相对定位，以原来的自己的位置定位
配合top：left：right：bottom使用
-100px;
Absolute 绝对定位，它是以祖先定位元素（相对定位，绝对定位）作为定位标准。如果祖先元素都没有定位，那么它则会以body来进行定位。
配合top：left：right：bottom使用
{position:Absolute ;right:-20px;top:-20px;}
（如果没有给其配合top left right bottom使用的话，会在原来的位置，且不占位置了，它下面的东西就会占上来）
以前看过的图片就是这样浮动，图片浮出来一点点。
图片啊，div 各种盒子的定位移动就可以用定位，绝对和相对定位
{position:fixed;right:0px;top:200px;}
Sublime
ctrl+{
ctrl+/
table>tr*3>td*4 Tab
div.div1 Tab
div#div2 Tab
shitf+Ctrl+d 复制当前行
Ed
tab+shift 回空格
shift 多空格
ctrl+j 复制当前行
ctr+shift+/ 注释
ctr+shift+ 解除注释
/*初始化*/
body,ul,li,a,p,img,h2,h4,span,div{margin:0px;padding:0px;}
ul,li{list-style:none;}
img{border:none;}
body{
background:url(../images/bg-body.gif) repeat-x left top;
background:url(images/job.gif) no-repeat left center;
background-color:#f1f1f1;
font-size:12px;
text-align:center;
text-indent:28px;首行缩进
font-weight:bold;加粗
}
<div>
<h2>新闻标题</h2>
<ul>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</div>
/*咨询QQ*/
定位
.zqq{160px;height:308px;position:fixed;right:0px;top:200px;}
/*css背景图片*/
background:url(../images/bg-logo.jpg) no-repeat right bottom;
/*div我的校园的下划线*/
border-bottom:1px solid #e0e0e0;
29.solid 固体的；实心的 (border-style取值:实线)
30.dashed 虚线的 (border-style取值：虚线)
31.dotted 点线的 (border-style取值：点状虚线)
Line-height：设置行高 取值：固定值与百分比
Text-indent：设置首行缩进 text-indent:28px;
Text-decoration:none(无)、underline(下划线)、overline(上划线)、line-through(删除线)
<h1>{text-decoration:underline;设置下划线 underline下划线 overline上划线 line-through删除线}
Letter-spacing：字符间距
Word-spacing：英文单词间距
text-align:center left right 文字
/*div宽 行元素高度 字体样式，居中*/
line-height:40px
text-align:center;
font-family:黑体
font-weight:bold; 加粗
/*ul li*/
ul li{
list-style-type : none;
list-style-image:url(图片的路径;)
list-style-position:inside;}
/*****li里面的小图标*****/
body{list-style-image:url(图片的路径) no-repeat left center;padding-left:20px;}
ul li{background:url(图片的路径) no-repeat left center;padding-left:20px;}
type 预定义值:disc 设置项目符号的种类，circle设置项目符号为空心圆点（小环形），disc为实心圆点（默认值），square为实心方块。
css中是
list-style-type : none disc circle square
list-style-position: outside inside项目符号的的位置
list-style-image:url(图片的路径;)
简写模式
list-style:none outside url（）;
/*背景颜色*/
.cs{background-color:#00cc00;}
/*********************************命名方式
************************************/
主要英语单词，有道查找
中间可以以中间上下左右，1234,ABCD，颜色红黄蓝这些命名
可以以下划线___隔开
------
zqq咨询
top
logo
nav 菜单导航
left right
left01_A right_01_A
footer
-----------
------------
/*咨询QQ*/ .zqq
/*box*/
/*top*/ .header .top .divA,divAspan1
/*logo*/ .logo .logoleft .logoright
/*menu 或者起名nav 菜单*/
/*flash*/
/*share分享*/ .share
/*new新闻*/ .new_left .new_left_bg
/*shop*/ .shop_left_ol.shop_zj_top
/*bottom*/
/*footer页脚*/
new_left_bg .header .logo .divL
new_right_list class="ppt float1"多个class
shop_left_ol
margin；上top 左left 下bottom 右right
padding-top:10px;
margin:0px auto; 自动居中
--------------
/*************************************公共样式****************************************/
/*浮动与清除*/1会恢复本身高度，2，其后面的元素会恢复原有的特效
可以在其加多一个div 给其clear，那么其后的div就会恢复原有的特效，相同的，要恢复特性，则在前面加多个div，清除特性
传智ul 设置 雪碧图
<div class="float1 red ">
.float1{float:left;}
.float2{float:right;}
.clear{clear:both;} clear:left; clear:right; 清除浮动
.blank{height:10px;clear:both;}
/*文本颜色*/
.font1{font-size:12px;}
.font2{font-size:14px;}
.font3{font-size:16px;}
.red{color:#FF0000;}
.white{color:#FFFFFF;}
.blue{color:#0000FF;}
.blue2{color:#0174c9;}
.gray{color:#808080;}
.gray2{color:#333333;}
/*清除边线*/
#noline{border:none;}
/*更多*/
.more{text-align:right;}
/**************************缩写方式*************/
1. margin；上top 左left 下bottom 右right
padding-top:10px;
2. 背景background
background-color:#FFF 背景颜色
background-image:url(/) 背景图片
background-repeat:no-repeat; 背景重复 repeat-x
background-attachment:fixed; 背景附近
background-position:center bottom;背景水平位置，背景垂直位置(固定值100px 0px，百分比50%,50%，英文,center)
缩写
background:#FFF url(/) no-repeat fixed center bottom;
3. 颜色缩写：#000 #333
4. 边框的缩写：边框的属性如下
border-1px;
border-style:solid;
boder-color:#000;
缩写为：boder:1px solid #000;
5. 字体缩写
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
font-height:140%;
font-family:"黑体"
缩写为font:(至少定义size和famil两个值)
6. 列表lists
list-style-type:square;
list-style-position:inside;
list-style-image:url(/);
缩写为
list-style:square inside url(/);
/*************************************超级链接*****************************************/
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:#FF0000;}
a.a3:link,a.a3:visited{color:#0174c9;}
a.a3:hover{color:#ff0000;}
一般配合
display:block;块元素才有背景
-----------------------------------------------------------
a:link 初次
a:visited 访问过后
a:hover 鼠标放在上面
a:active 点下激活
text-decoration:none;无下划线
------------------------------------------------------------
<a href="#" target="blank">
target
_blank在新窗口中打开目标网页
_self在当前窗口中打开目标网页
_top整个浏览器窗口
_parent多框架结构中父窗口
定义href指向的页面打开位置
------------------------------------------------------------------------------
div{100px;height:100px;border:1px solid red;;}
span{display:block;}
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
display-----------------------------------------------------------
设置元素的显示方式
display:none; 将元素隐藏（div隐藏）
display:block; 将一个行元素设置为块元素
display:inline; 将一个块元素设置为行元素
overflow-x:hidden 溢出来的隐藏
overflow：scroll 溢出来的滚动
行内元素没有宽与高，它的宽与高是由内容来决定的
块元素可以给它设置宽和高
所以要转换为块元素
块元素：h、p、div、ul、ol、dl、dt、dd、li、table、tr、td、hr、pre、fremeset
行元素：span、label、b、u、i、font、sub、sup、a、img、strong、em、iframe
超出部分显示省略号
1、overflow:hidden;
--------------------------------------------------------------
/*表格本身框架*/
boder 0
valign="top" 表格对齐
cellspacing 外边距
cellpadding 内边距
rowspan 跨行合并
colspan 跨列合并
------------firefox火狐 firebug