CSS2简写和常用css总结笔记

    本文只是一些css总结,旨在学习笔记记在这里,方便以后查阅,本文可能随时添加内容.

外边距 margin:1px 1px 1px 1px 简写margin:1px;
           maigin:1px 2px 1px 2px 简写 margin:1px 2px;
           margin:1px 2px 3px 2px 简写 margin:1px 2px 3px;
上边距 margin-top:1px
下边距 margin-bottom:1px
右边距 margin-right:1px
左边距 margin-left:1px
居中设置  margin:0 auto;

内边距 padding同上外边距


边框  简写 border:1px solid #120
     类似border-top border-right border-bottom border-left
     none无边框 solid实线 dashed虚线 dotted点线

背景 background-color:颜色
     Background-image:url(1.jpg)
     Background-repeat:repeat|repeat-x|repeat-y|no-repeat 平铺样式
     background-attachment:scroll|fixed
     Background-position:x y|top center bottom left center right 背景位置x y是百分比默认0% 0%
      
     简写:background:#ff url() no-repeat 0 0;
     默认transparent是背景透明
      none无图片
      repeat横纵都平铺
      scroll背景随内容滚动 fixed背景固定
      0% 0%默认图像位置

     
     
字体 font-style:nomal|italic 正常和斜体
    Font-variant:nomal | small-caps 正常 小型大写字母
    Font-weight:nomal(400) |bold(700) | 100-900 字体粗细
    Font-size:medium默认 12px 12号字体  
    Line-height:nomal |12px 行高
    Font-family:"Times New Roman",serif
    简写 font:(italic small-caps bold) 12px/13px “Times New Roman”,serif
    文本修饰: text-decoration:none|underline下划线|line-through中划线|overline上划线
    文本位置: vertical-algin:baseline默认|sub下标|super上标
    文本剪切:text-overflow:clip不显示...剪切|ellipais显示...剪切
    文本流入方向:direction:ltr左|rtl右|inherit集成父类
    文本对齐:text-align:left|right|center|justify两端对齐
        
列表 list-style:none //清除所有列表样式

     List-style-type:disc实心圆|circle空心园|squqre实心方块|decimal数字|none无符号
     List-style-position:outside文本外|inside文本内
     List-style-image:none|url(1.jpg)
      简写:list-style:disc outside none
    
定位 position:static无特殊定位|absolute文档流出|relative对象不层叠
     上->下->左->右(top-bottom-left-right)
     z-index:auto|2 数字越大越在上
宽高 width:20px height:100px;     
布局 clear:none允许两边浮动|left不允许左浮动|right清除右浮动|both清除浮动
      float:none对象不浮动|left左浮动|right右浮动
      overflow:visible不剪切不添加滚动|auto自动|hidden不显示超过对象尺寸|scroll显示滚动
     display:block添加新行,显示|inline行内|none隐藏|
      visibility:inherit继承|visible显示|hidden隐藏 保留空间

属性选择器     a[rel='it']{color:red;}     
子对象选择器   div ul>li{} 选择li属性
分组选择符    td,div,a{}
未被访问 a:link{}
移动到上边 a:hover{}
点击中 a:active{}
点击后 a:visited{}
方式 L V H A


@import url(css.css);导入css样式

div{color:red!important} 优先级


圆角 简写 –moz-border-radius:5px 5px 5px 5px
          -webkit-boder-radius:0 5px 5px 5px
           Border-radius:5px;

插入文字或图片 div:before{content:’文字’}在div之前插入文字
               div.after{content:url()}在div之后插入图片
文字阴影   text-shadow:5px 5px 5px red; x y方向位移 模糊半径 颜色

手型 cursor:hand(pointer)手型 | help帮助 |url(1.ani) |wait等待

常见颜色值 Transparent透明 black黑色 white白色 red红色 黄色yellow 绿色green 蓝色blue
橙色orange 灰色#C0C0C0 紫色#FF00FF 

垂直居中设置 line-height=height
IE6居中body{text-align:center;}
文本居中div{text-align:left;margin:0 auto;}

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" />< ![endif]-->      
IE6高度为1px overflow:hidden,zoom:0.8,line-height:1px;
06-01添加一个
如果相邻元素要想平行就需要第一个元素设置vertical-algin:middle 第二个设置display:inline这样就可以了,有浮动尽量清除

喜欢的保存起来吧,当作一个手册!

(来自yoby整理)