CSS 前端实战代码.ppt

css 命名的标准定义 1，CSS命名 和其他语言规范一样，css的命名也讲究命名要有意义，命名要尽可能短但是要足够表达含义；命名的词用连字符连接。 不规范的命名： #navigation{ } .demoimage{ } .error_status{ } 规范的命名： #nav{ } .demo-image{ } .error-status{ } 2，css选择器 不同的标签类型尽可能不用相同的css类名；尽可能不用标签类型选择器，用css类名和ID足够定义css，因为ID是可以唯一确定Dom元素的，而css类是不推荐用于不同的标签的；另外应该少用ID选择器定义，因为ID的唯一性使得定义的css无法重用。 不规范定义： ul#menus{ } { } 规范定义： .main-menus{ } .info{ } 3，属性名称和值的定义精简 css的某些属性定义可以可以分拆为各个独立项，比如padding，border, margin, background, font等，虽然分拆定义的可读性会好一些，但是就目前的经验来看，前端工程师们对这些常用的css理解程度足够好，合并后的定义不会对可读性带来影响，反而代码更简洁；此外对属性值为0的单位可以省略，在0后面添加入px em cm等单位是毫无意义的；对小数值可以省略小数点前的0；url值两端的引号可以省略。 不规范的定义： border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; margin: 0.8em; background: #00FF00 url(bgimage.gif) no-repeat fixed top; 规范定义： border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em; margin: .8em; background: #00FF00 url(bgimage.gif) no-repeat fixed top; 4，css代码的格式 漂亮统一的代码格式可以提高代码的可读性和可维护性，css的最佳代码格式主要有以下几点：定义顺序以字母序排列，不考虑浏览器前缀；定义以分号结束；属性名称定义的分号后添加一个空格；多个选择器定义时，每个定义单独占一行。 /*css定义顺序以字母序排列；结束用分号；属性名称与值之间添加空格*/ background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em; /*多个选择器定义时，每个选择器单独占用一行*/ h1, h2, h3 { font-weight: normal; line-height: 1.2; } 5，避免写兼容某个浏览器的css代码 避免写特定浏览器兼容代码，这里说的特定浏览器主要指的是万恶的IE系列浏览器，IE6，7尤为严重。碰到浏览器兼容问题，首先考虑的是能否换一种其它的解决方案，如果没有合适的解决方案，记得单独写一个css文件给这些特定的浏览器，不要把兼容代码和常规代码混合，这样方便代码的维护，如果后期不支持这些老旧浏览器，可以直接删除这些单独的css文件即可。 !--[if IE 6] link rel=stylesheet type=text/css href=css/ie6.css / ![endif]-- !--[if IE 7] link rel=stylesheet type=text/css href=css/ie7.css / ![endif]-- 6，记住块元素和行内元素的区别，避免写无用的css代码 块级元素显示会独占一行，而行内元素不会独占一行。常见的块级元素有：div p ul ol table h1~h6 等；行内元素有：a em img input label select span strong textarea等。块级元素的display默认样式是block，而行内元素是inline，可以通过重新定义display来互转块级元素和行内元素。但是记住以下的css样式对行内元素是无效的：width height 和垂直方向设