css+div笔记

 

 
   1,基础css
 1,选择器   派生选择器 例如： li strong {font-style:italic; font-weight:normal;}
 2,id选择器  例如 #sidebar p {font-style:italic;text-align:right; margin-top:0.5em;} #sidebar {font-style:italic;text-align:right;margin-top:0.5em;}
 3,类选择器  例如： .fancy td {color:#f60;backgroud:#666;}  td.fancy{color:#f60;backgroup:#666;}
 4,属性选择器  只对ie7及其以上有效   [title]{color:red;}input[type="text"]{width:150px;display:block; margin-bottom:10px;backgroup-color:yellow;}
    2,css样式
 1，背景 例如： p{backgroud-color:gray;}  body {backgroud-image:url(/i/eg.gif);}  p.flower {background-image:url(/i/ss.gif);} 背景重复  body{background-image:url(i/a.gif); background-repeat:repeat-y[repeat-x|no-repeat]:}背景定位 body{background-image:url('i/ss.gif'); background-repeat:no-repeat;background-position:center;[x,y长度值值][x,y百分值]} 背景关联 body{background-image:url(i/ss.gif);background-repeat:no-repeat;background-attachment:fixed}
 2,文本  例如：缩进文本第一行缩进 p{text-indent:5em[百分比];}缩进也可以继承  字间隔 (只对英文有效，字的意思就是单词) p.word-spacing{word-apacing:30px;}  字母间隔(这个对汉字有效)  h1{letter-spacing:-0.5em}  文字装饰(加下划线，加上划线) a:link a:visited {text-decoration:underline overline;}  文本方向  direction:ltr[rtl];  行高：line-height
 3，字体  p{font-family:Times,serif;} p.normal{font-style:normal[italic斜体|oblique倾斜];} 字体变形 大写字母跟小写字母的一样大当时样子确实大写的 p{font-variant:small-caps;} 文字加粗 p.normal{font-weight:normal;} 字体大小 (推荐是用em为单位) ht{font-size:1em;}
 4,列表  ul li{list-style-image: url(xxx.gif);list-style-type:square;}
 5,表格  table,th,td {border:1px solid blue;} 折叠边框 table {border-collapse:collapse;} table,th,td{border:1px solid black;}
 6,轮廓  p.dotted {outline-style:dotted;outline-color:#00ff00;}
 7,内边距  h1{padding-top[right|bottom|left]:10px;}
 8,边框  p{border-style[color|width]}
 9,外边距 p{margin:10px;}
    4,css定位
 1,相对定位 元素框偏移某个距离 h2.pos_left{position:relative;left:-20px}
 2,绝对定位 元素可以放置到页面上的任何位置 h2.pos_abs{ position:absolute;left:100px;top:150px}
 3, 固定定位 元素框的表现类似于position设置为absolute，不过其包含是视窗本身 p.one{position:fixed;left:5px;top:5px;}  overflow内容溢出时处理方法
 4,设置元素的形状  .a{position:absolute;clip:rect(0px 50px 200px 0px)}
 5,z-index设置一个元素放于另一个元素之后  img .x{position:absolute;left:0px;top:0px;z-index:-1}z-index默认是0，-1比他优先级低
 6,相对定位是相对于元素最初的位置做一些偏移，而绝对定位是在已定位的元素的祖先元素，如不存在祖先元素(继承的元素)就“相对于”最初的包含快
 7,浮动框  css float属性定义元素在那个方向浮动(浮动了就不在普通的文档流中了) img {float:right;}  css clear属性规定元素的那一侧不允许其他浮动元素
   5,选择器
 1，类型选择器  <p class="important warning"> thid aragraph is a very important warning.</p> .important {font-weight:bold;} .warning{font-weight:italic;} .important .warning {background:silver;}
 2,id选择器在css中是唯一的

 

 

  6，css高级
 1,visibility:visible元素可见|hidden元素不可见|collapse(表格中是删除一行或列，其它中是hidden)|inherit规定继承父元素
 2，cursor 这个属性是鼠标指针放在一个元素边界内所用的光标形状url自定义span.crosshair{cursor:crosshair;} 
 3,display  属性用于定义建立布局时元素生成的显示框类型display:block把元素做为块级元素，元素前后会带有换行符   none 元素不会被显示  inline元素会做为内联元素，前后没有换行符  list-item  元素会做为列表显示 run-in元素会根据上下文作为快级元素活内联元素显示
 4,float  定义元素在那个方向浮动
 5,属性定位为建立元素布局所用的定位机制
 6,伪元素  first-letter  首字母设置