CSS

hack写法,用来识别不同版本的IE浏览器:
*zoom: 1; /* 设置对象缩放比例 .*/*后面的属性 IE6 IE7能识别,IE8 IE9……都不能识别;
_height:1px; "_"后面的属性,只有IE6能识别,其他版本(IE7 8 9 更高级别)都不能识别

text

letter-spacing定义字符间距 normal(0,默认) | length | inherit ,区别:修改字符与字母之间间隔
word-spacing增加或减少单词间的空白(即字间隔)normal(0,默认) | length | inherit
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
实例 TIY :white-space: pre:不会合并所有的空白符,并忽略换行符。
实例 TIY :white-space: nowrap:单元格设置为不能换行

border

border:5px solid red;
border-width:默认medium
border-style border-color

resize用户是否可微调元素尺寸 css3
: Firefox 4+、Chrome 以及 Safari 不支持 resize。
: none(默认)|both|horizontal|vertical;
text-decoration设置字体修饰,注意兼容问题
:none(默认) | underline | overline | line-through | blink | inherit
text-index段落首行缩进 n | % | index 可为负
content与 :before 及 :after 伪元素配合使用,来插入生成内容
none| normal | content specifications | inherit
box-shadow框添加一个或多个阴影 css3
:h-shadow v-shadow blur spread color inset
object.style.boxShadow="10px 10px 5px #888888"
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
建议写:定义firfox和chrowm浏览器,以及默认下阴影效果
-moz-box-shadow: -6px 7px 20px #333333;
-webkit-box-shadow: -6px 7px 20px #333333;
box-shadow: -6px 7px 20px #333333;

zoom设置或检索对象的缩放比例:主要兼容性
normal | | :

border-radius

默认值:0 无继承 css3
IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

border-radius: 5px/em 或者 5% ;(值越大,角弧度越大)
Border-radius: (1-4)个值 / (1-4)个值
object.style.borderRadius=” 5em”

(省略下边角,则与相对应对角相同;
省略上边角,则与相对应另一侧上边角相同)
eg:如果省略 bottom-left,则与 top-right 相同。
如果省略 bottom-right,则与 top-left 相同。
如果省略 top-right,则与 top-left 相同。

-moz-border-radius:25px; /* 老的 Firefox */

CSS文本

Line-height:

object.style.lineHeight=”2”
行框(line-hight) =行间距+(font-size):可以包含这些内容的最小框
行间距=(line-height)-(font-size),作为文本行内容顶部,
文本行内容底部:font-size值,

设置行间距离(行高)>=0 ,影响行框布局
应用到块级元素时,影响基线最小值,非最大值
所有浏览器都支持,所有IE不支持inherit
默认Normal 可继承 css1
5个值:(
normal: 合理行间距
number: n; 行框=n(font-size); line-hight:0.5;
%: n%;行框=n%
(font-size); line-hight:200%;
length: 固定行间距; line-hight:10px;
inherit: 继承父元素line-height;

background

无继承 css1 css3 无继承 所有brownser兼容
objiect.style.background:“white url(../git.gif) repeat-y”
background: #00FF00 url(bgimage.gif) no-repeat fixed top;(不设某个值也可以)
(建议使用background写法,不建议单个使用以下属性,因兼容性好,而且代码量少)

  • background-color 背景色
    所有browser支持 ,IE不支持inherit,无继承性,CSS1
    red | #ffffff | rgb(255,0,0) | inherit |transparent(默认)
    背景色范围:元素内容+内边距+边框+边框边界(不包括外边距,若边框
    透明或者是虚线则会显示出颜色)
  • background-position: (支持所有browser)设置背景图起始位置
    注:通常与background-attachment:fixed同用,该属性在 Firefox 和 Opera 中才可显示。
    默认0% 0% 无继承 css1
    top left|% %| px px(当省略第二个值,默认第二个为center 50% 50px)
  • background-size :
    IE9+、Firefox 4+、Opera、Chrome 、 Safari 5+支持,无继承 css3
    npx|%(宽 高,省略auto) |coverz(完全覆盖)|contain(适应区域);
  • background-repeat 背景图是否重复
    所有browser支持,IE不支持inherit , 无继承性
    由background-image定义从background-position开始重复
    repeat(默认) | no-repeat | repeat-x/y | inherit
  • background-origin:
    IE9+、Firefox 4+、Opera、Chrome 、Safari 5+、无继承css3
    padding-box(默认)|border-box|content-box;背景图定位区域相对内/外边框/内容来定位
  • background-clip定义背景background-color绘制区域
    IE9+及其他browser都支持,无继承,css3
    border-box(默认) | padding-box | content-box
  • background-attachment设置background-image的随页面滑动时的形式
    所有browser支持,IE不支持inherit,CSS1
    scroll(默认,随页面滑动) | fixed(图片固定) | inherit
  • background-image
    注:最好同时设置background-color,以防止图片不显示影响页面效果
    所有浏览器支持,IE无继承 ,CSS1
    背景覆盖范围:内容+内边距+边框(无外边距)
    url( ) | none(默认) | inherit

你可能感兴趣的:(CSS)