CSS规范:
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS规范:

on

  • 1,382 views

 

Statistics

Views

Total Views
1,382
Views on SlideShare
1,382
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS规范: Document Transcript

  • 1. CSS 规范: (一)xhtml 的规范: 1、所有的 xhtml 代码英文小写 2、属性的值一定要用双引号("")括起来,且一定要有值 3、每个标签都要有开始和结束,且要有正确的层次 4、表现与结构完全分离,代码中尽量不涉及任何的表现元素,如 style、font、bgColor、border 等 5、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查 询 6、给重要的区块加上注释 7、图片要加 alt 注释 (二)CSS 的规范: 1、id 和 class 命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个 字母大写,如:newRelease(最新产品/new+Release) ,或者用下划线链接 new_Release. 2、CSS 样式表各区块用注释说明 注释的写法: /* Footer */ 内容区 /* End Footer */ 3、尽量使用英文命名原则,尽量不缩写,除非一看就明白的单词 class 的命名: (1)颜色:使用颜色的名称或者 16 进制代码,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } (2)字体大小,直接使用"font+字体大小"作为名称,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)对齐样式,使用对齐目标的英文名称,如 .left { float:left; } .bottom { float:bottom; } (4)标题栏样式,使用"类别+功能"的方式命名,如 .barnews { } .barproduct { } (5)页面结构 容器:#container 布局:#layout 头部:#head、#header
  • 2. 尾部:#foot、#footer 侧栏:#sidebar 左边栏:#sidebarLeft 右边栏:#sidebarRight 页面主体:#main 栏目:#column 包装/外套:#wrapper、wrap 内容:#content (6)导航 导航:#nav 主导航:#mainNav 顶导航:#topNav 左导航:leftNav 右导航:rightNav 下导航:bottomNav 二级导航:#subNav 菜单:#menu 二级菜单:#subMenu 下拉:.drop 下拉菜单:.dropMenu (7)功能 标签:.tab、.tag 提示信息:.msg、.message 小技巧:.tips 注释:.note 热点:.hot 摘要:.summary 帮助:.help 投票:.vote 指南:.guild 商标:.branding 标签:.label 工具条:.tool、.toolBar 标题:.title LOGO:.logo 搜索:.search 搜索条:.searchBar 搜索框:.searchBox 搜索输入框:.search_input 搜索输出框:.search_output 搜索结果:.search_results 注册:.register 登录:.login
  • 3. 登录条:.loginBar 登录框:.loginBox 友情链接:.friendLink、.link 广告/标语:.banner 版权信息:.copyright 加入我们:.joinUs 合作伙伴:.partner 服务:.service 网站地图:.siteMap、.map 缩略图:.screenShot 产品:products 产品价格:products_prices 产品描述:products_description 产品评论:products_review 最新产品:new_products 生产商:suppliers、publisher 编辑:editor 编辑评论:editor_review 博客:blog 论坛:forum 新闻:news 下载:download 网站信息:.siteinfo 法律声明:.legal 信誉:.credits 列表:.list (8)其他 左中右:left、center、right 上中下:top、middle、bottom 按钮:btn 面包屑:breadcrumb(即页面所处位置导航提示) 滚动:scroll 当前:current 图标:icon 箭头:arrow 首页:homePage、home 二级页面:subPage 状态:status 常见问题:faqs、questions 关键词:keyword (三)CSS 文件名称
  • 4. 顶部:top.css 底部:bottom.css 共享 share.css 基本共用 base.css 布局,版面 layout.css 主要的 master.css 模块 module.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css 行或排:row1th,row2th,row3th,row4th... 列或纵:col1th,col2th,col3th,col4th... (四)页面图片等的遵循以下几条规范 页面图片用 gif 和 jpg,在不失真前提下,越小越好。 名称分为头尾两部分,用下划线隔开。头部分表示此图片的大类性质,例如广告、标志、菜 单、按钮等等。 一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名:banner/icon 标志性的图片我们取名为:logo 在页面上位置不固定并且带有链接的小图片我们取名为 button 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu 装饰用的照片我们取名:pic 不带链接表示标题的图片我们取名:title 依照此原则类推,尾部分用来表示图片的具体含义。 下面是几个样例,大家应该能够一眼看明白图片的意义: banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg (五)SEO 相关 1 允许全文检索的页面,为了使 Internet 上的搜索引擎能够有效检索,在频道的首页的 html 的<head></head>之间应该加入 Keywords 和 Description 元标记,例如 : <meta name=”keywords” content=”东方新干线,汽车,买车”> <meta name=”description” content=”东方新干劲线,全球中文汽车信息第一站”>. 2.添加搜索引擎引导代码: <meta name="robots" content="index, follow" /> <meta name="googlebot" content="index, follow" /> 附:雅虎优化:13 条技巧提高网页速度 网页打开速度,是网站做 SEO 的一个重要方面,包括搜索引擎本身也会对自己的网页考虑这个问 题:最近,雅虎的 Exceptional Performance 团队在其开发者网络上提出了提高网页打开速度
  • 5. 的 13 条规则,其中包括“减少 http 请求“,避免网页转向"等 具体内容如下: 1.减少 http 请求 2.减少多媒体,图片,声音的使用,传输以文字内容为先 3.用截止时间报头,由于时间是将来,对于缓存来说,可以减少部分 http 请求 4.支持 Gzip 5.把 CSS 放在网页的顶部 6.活动的脚本文件放在底部 7.避免用 CSS Expressions 8.把 JavaScript 和 CSS 单独化,与网页分离 9.减小 DNS 查表时间 10.最小化 JavaScript 11.避免网页的转向 12.删除重复的脚本