css学习经验和心得.docVIP

关于CSS的学习经验和心得 网站（网页）做给谁看 人和电脑 人：客户 电脑：电脑（浏览器）、搜索引擎等 从客户的角度设计页面，从电脑的角度编写代码 网页分类与构成 分类： 从程序上讲，分为动态和静态 结构： 从代码结构上： !DOCTYPE html html head/head body /body /html 显示内容上：body又分为 top、 body和 end 网页制作流程 策划：了解需求，收集尽可能多的信息 设计页面：构思并设计页面 切割页面：根据设计稿进行切割，代码要尽量简洁，符合W3C标准。图片要在不影响美观的情况下尽可能小 测试修改：兼容性测试，修复bug。(浏览器的兼容性、火狐、IE、Opera、chrome、苹果等) 设计页面 结构排版： Top：导航、logo、网站名称等（也有导航做到左侧的） Body：主体内容，一般常见的是左右分栏 End：尾部声明，包括版权信息等 配色： 一般主要色系不超过三种，黑色和白色不算 如果色彩种类多，最好选选用比较好搭配的颜色， 参考网站（/lanren/colorcolor102857.html） 如果色系单一，最好要有对比色鲜明的颜色作为点缀色 16进制颜色码/view/644772.htm 其他： Div尽量少于三层 网页主体宽度一般不超过1003像素 网页排版位置和眼睛之与脸庞的比例关系 合理使用H1、h2等 切割网页 什么是css：CSS 指层叠样式表 (Cascading Style Sheets) CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。 基本格式如下： selector { property: value} （选择符 { 属性：值}） 层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 浏览器缺省设置 外部样式表 内部样式表（位于 head 标签内部） 内联样式（在 HTML 元素内部） Table 块级元素： div ul(ol) li P h1、h2、h3.。。。。。。 行内元素： span a strong font 图片： img 不需要刻意去记，用的时候试下就可知道，比如没有按定义的宽高展示即是行内元素。 比较常用的通用属性： background（background-image，background-color）：背景图片和背景色 float：漂浮 clear: margin：外边距 padding：内边距 font-size：字体大小，还有字体family、weight等 （参考/blog/static/726902222009529585915/） 附：text-shadow:0 -1px 0 #374683 文字阴影效果，部分IE无效 height:行高 line-height：行高 text-align:文本水平位置 vertical-align：文本垂直位置 display：框的类型 overflow:溢出处理 position:位置 border：边框 z-index：堆叠顺序Z-index 仅能在定位元素上奏效（例如 position:absolute;） 特殊标签的常用属性 a : text-decoration li: list-style:none 关于a的设为首页，加入收藏 a href=# onclick=this.style.behavior=url(#default#homepage);this.setHomePage(http://123); 设为首页/a a href=# onclick=window.external.AddFavorite(location.href,document.title);加入收藏/a 测试修改 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-