css学习心得.docx

1) 文档类型不解释，一句话不要删2) 编码格式两种 UTF-8和gb2312 必须和css样式表同其他文件相同3) 标签:4) css样式外部样式 内部样式 h2 color:#f00;行内样式 内部样式导入样式 import url(/css/global.css);5）css优先级 id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的 6）css模型盒 &默认body是有外边距的body margin:0;这里要注意一个问题：IE6的3像素bug解决方法：margin-right:-3px；7）css布局Css代码部分body margin:0;#content width:470px; margin:0 auto;#side background: #99FF99; height: 300px; width: 120px; float: left; #side1 background: #99FF99; height: 300px; width: 120px; float: right; #main background: #99FFFF; height: 300px; margin:0 120px; 界面代码部分 此处显示 id side 的内容 此处显示 id side1 的内容 此处显示 id main 的内容8）CSS Sprites技术CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。Css部分如下：body font-family: Verdana; font-size: 12px; line-height: 1.5; a color: #000; text-decoration: none; a:hover color: #F00; #menu width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;#menu ul list-style: none; margin: 0px; padding: 0px; #menu ul li float:left; margin-left:2px;#menu ul li a display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(images/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;#menu ul li a:hover background:url(images/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;#menu ul li a#current background:url(images/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;界面部分如下：首页网页版式web教程web实例常用代码9）用label标签提升用户体验简单举例：点击姓名是，光标跳转到后面的输入框姓名：10）全局定义样式body margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p padding:0; margin:0;ul list-style:none;img border:0px;11）框架12.css调用方法inputtype=text width:150px; display:block;一直在思考的一个问题；body background-image:url(/i/eg_bg_03.gif); background-repeat:no-repeat;background-attachment:fixed; background-position:66% 33%; 背景图片定位Css文本属性背景关联如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：body background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;字间隔word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。p.spread word-spacing: 30px;p.tight word-spacing: -0.5em;字母间隔letter-spacing 属性，字母间隔修改的是字符或字母之间的间隔。h1 letter-spacing: -0.5emh4 letter-spacing: 20pxCss列表属性Css边框属性在表格中th等同与td的应用关于盒子模型内容大小的问题Padding设置，不会影响到背景图片及颜色的位子，只会影响盒子内容的位子Css盒子模型的大小#topmainwid