css笔记小结

初学css，笔记小结如下，（咳嗽两声）望高手指点，不喜勿拍，期与菜鸟们一起狂飞：

首先用元素或class或id标签定位：

1、给出现文字加底色图片

在css中写

background-image:url('../../images/project/hengLine.png');

2、给文字旁边加图片，用span标签，

但span是行级标签，所以可以加上

display:block;将span变成块级标签，这样可以给他加上长和高

 display: inline-block;这样可以让多个span在一行里变成块级标签

float:left;所有的块级标签都是重上向下依次排列，float：left会将其变成左右排列。当适用浮动时，要加上clear：both清楚浮动

3、关于一像素的图片如横线

可将其放到一个span里做为背景图片展示，

 

background-image:url('../../images/project/hengLine.png');

background-position:centercenter;在标签容器中居中显示

background-repeat:repeat-x;他的高度是一像素，如果设了高度大于1，就会出现重复。此句消除重复

4、当鼠标移动放上或拿下的时候出现图片变化，这是注册了事件

 

'mouseover.clickBtn':'addBackgroudImage',

'mouseout.clickBtn':'removeBackgroundImage'

一下这种方法适用于当多个标签出现时，只让触发的标签发生变化

removeBackgroundImage:function(event){

$(event.target).removeClass('animateButton');

},

addBackgroudImage:function(event){

this.$el.find('.clickBtn').not($(event.target)).removeClass('animateButton');

$(event.target).addClass('animateButton');

},

5、color是字体颜色，background—color是背景的颜色

 

 

6、在css中disabled是属性，需要使用相关的attr方法，display是样式需要使用css

在标签中使用：disabled=“disabled”或disabled="true"

 

7、css中调节div的边框

在该div的css中写上     border: 1px solid#8A8F97;

 

 

8、加滚动条overflow:auto

一定要设置高度height

9、让字体垂直居中显示

 line-height: 34px;

34px;是高度height的值

文字左右居中显示

  text-align: center;

10、 vertical-align: top;

Vertical-align:middle

就是里面的标签相对于外面的标签的垂直居中

 

table里有cellspacing=“0”可消除表格间 的空隙

11、使用jquery加奇偶行

$("tr:odd").addClass("odd");        //加奇行样式

$("tr:even").addClass("even");        //加偶行样式

 

12、css控制字符显示长度

2. overflow:hidden; //将超出内容隐藏

3. text-overflow:ellipsis; //IE专用属性，文本溢出时显示省略标记()；其他浏览器不支持。

4. white-space:nowrap; //强制内容不换行。强制在同一行内显示所有文本，直到文本结束或者遭遇 br 元素

 

  目前使用这种方法比较成功的示例是Gmail的内容显示，在IE下达到最好的效果。如果是FF那就比较糟糕，总是会出现截取半个中文的效果。其中涉及到最主要的原因是 text-overflow 这个属性只在IE下有效，目前很多CSS属性也存在这个问题，特别重要的是Margin和Padding这两个属性，往往导致页面出现各种不同的效果；在页面设计的时候，需要注意这些属性在不同浏览器的显示效果。