jQuery/CSS3/HTML5 前端【4】CSS
1.总是开始使用 CSS Reset
HTML标签在浏览器里有默认的样式，不同浏览器的默认样式之间也会有差别。例如，ul默认带有缩进的样式在IE下它的缩进是通过margin实现的，而Firefox下它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。CSS reset就是重新定义标签样式，"覆盖"浏览器的CSS默认属性。建议参考YUI和Eric Meyer的CSS Reset内容。
1 * { padding: 0; margin: 0; border: 0; }
YUI CSS Reset 1 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td 2 { 3 padding: 0; 4 margin: 0; 5 } 6 table 7 { 8 border-collapse: collapse; 9 border-spacing: 0;10 }11 fieldset, img12 {13 border: 0;14 }15 address, caption, cite, code, dfn, em, strong, th, var16 {17 font-weight: normal;18 font-style: normal;19 }20 ol, ul21 {22 list-style: none;23 }24 caption, th25 {26 text-align: left;27 }28 h1, h2, h3, h4, h5, h629 {30 font-weight: normal;31 font-size: 100%;32 }33 q:before, q:after34 {35 content: '';36 }37 abbr, acronym38 {39 border: 0;40 }Eric Meyer CSS Reset 1 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 2 { 3 margin: 0; 4 padding: 0; 5 rder: 0; 6 outline: 0; 7 font-size: 100%; 8 vertical-align: baseline; 9 ackground: transparent;10 }11 body12 {13 line-height: 1;14 }15 ol, ul16 {17 list-style: none;18 }19 blockquote, q20 {21 quotes: none;22 }23 blockquote:before, blockquote:after, q:before, q:after24 {25 content: '';26 content: none;27 }28 /* remember to define focus styles! */29 :focus30 {31 outline: 0;32 }33 /* remember to highlight inserts somehow! */34 ins35 {36 text-decoration: none;37 }38 del39 {40 text-decoration: line-through;41 }42 /* tables still need 'cellspacing="0"' in the markup */43 table44 {45 border-collapse: collapse;46 border-spacing: 0;47 }2.命名规范
标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。坚持以字母开头命名，这样可保证在所有浏览器下都能兼容。
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
页面主体：main
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
摘要: summary
主要 master.css
模块 module.css
基本 base.css
布局 layout.css
主题 themes.css
栏目 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
3.按字母顺序排列CSS 代码可以轻松地浏览和查找正确的行
1 .classname 2 { 3 border: 1px solid #dedede; 4 color: #000; 5 font-size: 18px; 6 line-height: 24px; 7 margin: 48px; 8 padding: 0; 9 position: relative;10 z-index: 101;11 }4.使用简写可以减少CSS文件的大小，更加容易阅读
1 .classname 2 { 3 /* 颜色 */ 4 /* 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369 */ 5 6 /* 盒尺寸 */ 7 property: value1; /* 表示所有边都是一个值value1 */ 8 property: value1 value2; /* 表示top和bottom的值是value1,right和left的值是value2 */ 9 property: value1 value2 value3; /* 表示top的值是value1,right和left的值是value2,bottom的值是value3 */10 property: value1 value2 value3 value4; /* 四个值依次表示top,right,bottom,left */ 11 /* margin和padding */12 margin: 1em 0 2em 0.5em; 13 14 /* 边框-border */15 border-width: 1px;16 border-style: solid;17 border-color: #000; 18 /* border */19 border: 1px solid #000; 20 21 /* 背景-background */22 background-color: #f00;23 background-image: url(background.gif);24 background-repeat: no-repeat;25 background-attachment: fixed;26 background-position: 0 0; 27 /* background */28 background: #f00 url(background.gif) no-repeat fixed 0 0; 29 /* 默认 */30 color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 31 32 /* 字体-font */ 33 font-style:italic;34 font-variant: small-caps;35 font-weight: bold;36 font-size: 1em;37 line-height: 140%;38 font-family: "Lucida Grande" ,sans-serif; 39 /* font */40 font: italic small-caps bold 1em/140% "Lucida Grande" ,sans-serif; /* 缩至少要定义font-size和font-family两个值 */ 41 42 /* 列表-list */43 list-style-type: square;44 list-style-position: inside;45 list-style-image: url(image.gif); 46 /* list */47 list-style: square inside url(image.gif);48 }5.未完待续
TAG:
