CSS学习总结

1. 用css消除按钮的value：【用文本的缩进实现，还可以控制按钮长度、背景等属性】

<input type="button" value="button"/>
<style type="text/css">
    input[type="button"]{text-indent: -130px;width: 100px; }
</style>

2.一个大的div里面包含可隐藏的div，类似图片切换的效果【注意position的设置】

<div id="out">
	<div id="d1"></div>
	<div id="d2"></div>
</div>

<style type="text/css">
	#out{position: relative;width: 200px;height: 200px;background-color:blue;overflow: hidden;}
	#d1{width: 200px;height:200px;background-color: rgba(255,0,0,0.5);position: absolute; left: 100px;}
	#d2{width: 200px;height:200px;background-color: white;position: absolute;left: -100px;}
</style>

3.css的rgba（x,x,x,y）==>y值取[0,1],0表示完全透明。

4.div水平居中==>  margin：0 auto;

5.background的position属性如果只有一个关键字，另一个缺省值为center；

     position：x y;[center,top,bottom,left,right]

     background: background-color || background-img || background-repeat || background-attachment || background-position ;

6.属性约定

　　* ， ? , + ,

      {a,b}  : 出现至少a次，至多b次

 a || b ：至少必须使用两者之一，任意顺序；

 [ a | b ]   : 使用其中一个；

7.可选样式表

<link rel=" alternate stylesheet"  type="text/css" href="my.css" title="big text"/>

8.伪类伪元素(为链接元素指定伪类的顺序)

a:link　　a:visited 　　a:hover　　a:focus　　a:active　　

p:first-letter 　　p:first-line　

9.文本标签

　　 <em><strong><span>

10.特殊性【样式规则的权重】

　　h1{} 　　　s=1;

　　p em{}　　s=2;

　　.class{}　　s=10;

　　p.class {} 　　　s=11;

　　p.class1 em.class2 {} 　　s=22;

　　#id　{}　　　　s=100;

　　<style></style>　　s=100;

　　p.dark {color:#333  ! important ;  background: white;} 　　s=max;

11.层叠规则

　　A找出所有包含与给定元素匹配的选择符声明；

　　B按应用于给定元素的所有声明显式权重排序： !important  >   声明起源（制作者 ， 读者  ， 用户代理）

　　C按应用于给定元素的所有声明的特殊性排序：高特殊性元素有更大权值（style 比外联的高）

　　D按应用于给定元素的所有声明的出现顺序排序：样式表里越靠后的声明权值越大。

12.元素分类

　　块级：p, title, ul/ol ,table, div, body　　(新行显示)

　　内联：a, em, span ,img , input

　　列表：li

　　display:　block | inline | list-item | none  (default:bolck)

13.文本属性

   text-indent　　

　text-align:left | right | center | justify (块级元素)　　

　white-space:pre | nowrap | normal (default:normal) (块级元素)

　line-height

   vertical-align:baseline | sub | super | bottom | text-bottom | middle | top | text-top  <百分比>（default:baseline）(内联元素)

　word-spacing　　　

　letter-spacing　　　

　text-transform:uppercase | lowercase | capitalize(首字母大写) | none

         text-decoration: none | underline | overline | line-throuth | blink(闪烁)

14.字体元素

font-style: italic | oblique | normal

font-variant: small-caps | normal (字体变形)

用户代理选择字体： font-style -> font-variant -> font-weight -> font-size

　　

15.属性选择器

     a[href^=http][*=henry][$=.pdf]  

     匹配以http开头，值中含有henry，以.pdf结尾的a类元素属性

 

16.@import会使得渲染避开了并行，不利于效率；而link可以并行下载css.

     @import必须放在其他css样式前才有效。

      高性能网站设计：不要使用@import

 

17.类的选择器时，同时具备类a和类b的元素应该这样写：   .a.b{}