css学习经验与心得

关于CSS的学习经验和心得1、 网站（网页）做给谁看人和电脑人：客户电脑：电脑（浏览器）、搜索引擎等从客户的角度设计页面，从电脑的角度编写代码2、 网页分类与构成分类：从程序上讲，分为动态和静态 结构：从代码结构上： 显示内容上：body又分为 top、 body和 end3、 网页制作流程1、 策划：了解需求，收集尽可能多的信息2、 设计页面：构思并设计页面3、 切割页面：根据设计稿进行切割，代码要尽量简洁，符合W3C标准。图片要在不影响美观的情况下尽可能小4、 测试修改：兼容性测试，修复bug。(浏览器的兼容性、火狐、IE、Opera、chrome、苹果等)4、 设计页面结构排版：Top：导航、logo、网站名称等（也有导航做到左侧的）Body：主体内容，一般常见的是左右分栏End：尾部声明，包括版权信息等配色：一般主要色系不超过三种，黑色和白色不算如果色彩种类多，最好选选用比较好搭配的颜色，参考网站（如果色系单一，最好要有对比色鲜明的颜色作为点缀色16进制颜色码其他：Div尽量少于三层网页主体宽度一般不超过1003像素网页排版位置和眼睛之与脸庞的比例关系合理使用H1、h2等5、 切割网页什么是css：CSS 指层叠样式表 (Cascading Style Sheets)CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property: value（选择符 属性：值）层叠次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。1 浏览器缺省设置2 外部样式表3 内部样式表（位于 标签内部）4 内联样式（在 HTML 元素内部）CSS+div，CSS+table什么是div：和table一样，都是容纳文本和多媒体信息的容器两者区别：Talbediv浏览器兼容性相对较高相对较低易学性入门相对容易入门相对稍微复杂一点修改维护（自由度）相对麻烦相对简单网页访问速度慢快代码简洁繁琐简洁适用度结构比较规律的排版任何排版，但在表格性质的版块没有table好用常用css标签：参考Table块级元素：divul(ol)liPh1、h2、h3.。行内元素：spana strongfont图片：img 不需要刻意去记，用的时候试下就可知道，比如没有按定义的宽高展示即是行内元素。比较常用的通用属性：background（background-image，background-color）：背景图片和背景色float：漂浮clear:margin：外边距padding：内边距font-size：字体大小，还有字体family、weight等（参考附：text-shadow:0 -1px 0 #374683 文字阴影效果，部分IE无效height:行高line-height：行高text-align:文本水平位置vertical-align：文本垂直位置display：框的类型，常用blockoverflow:溢出处理position:位置border：边框z-index：堆叠顺序Z-index 仅能在定位元素上奏效（例如 position:absolute;）特殊标签的常用属性a : text-decorationli: list-style:none关于a的设为首页，加入收藏设为首页 加入收藏其他技巧：全角空格字符大小和一个汉字一样字体：中文基本用宋体，英文基本用arialps切图注意事项插入视频：object 和embed 插入音乐：导航：焦点图等特效6、 测试修改SS类级别的hack仅IE7识别 *+html IE6及IE6以下识别 * html opera、safari、chrome识别：media all and (min-width: 0px) /Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则media screen and (-webkit-min-device-pixel-ratio:0) /IE、Firefox不识别该规则仅opera识别：media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0CSS属性级别的hack仅IE识别 ： margin-left:10px9;仅IE8识别 ： margin-left:10px0;IE6/IE7识别 ： *margin-left:10px;仅IE6识别：_margin-left:10px;Overflow 、display等属性有时候可以起到意想不到的效果视频被下拉菜单挡住问题http:/mihawk-IE6支持png问题http:/mihawk-