本文只是一些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 数字越大越在上 宽高 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整理)