分类归档: Web

CSS Framework(CSS框架)

转自:http://dev.collin.cn/detail/46.html

对于如今的软件开发人员来说,各类五花八门的框架是满天飞,尤其是web开发领域,RoR、Spring、Struts、Zend等等,但要说到CSS框架,知道的人并不多,CSS也有框架吗?有,而且对web开发人员非常有帮助。

随 着Web UI Designer慢慢抛弃传统的table架构,转而纷纷采用xhtml+div+css模式,css的重要性也是与日俱增,往往会占去一个web项目中 一部分较大的工作量。而且时常会遇到各种浏览器兼容的问题,在ie上看起来很美观的页面,放到firefox下浏览却会出现错位等等这类问题。如何有效的 提高开发人员的效率,同时尽可能的解决浏览器兼容问题,于是有了CSS Framework。

什么是CSS框架

  • 框架是个概念性很强的名词,对于CSS来说,所谓的框架就是一些预先定义了全局style重置、一致style设置、form style设置的css文件,这样当启动一个新项目时,可以直接拿来就用,在这些文件的基础上做修改就可以了。
  • CSS框架没必要太复杂和庞大,一般就是以下这几个文件差不多:
    • typography.css 字体修饰
    • grid.css 表格修饰
    • layout.css页面布局修饰
    • form.css 表单修饰
    • general.css 一些常用修饰,如reset修饰等等

使用CSS框架的好处

  • 提高了生产效率并可以避免一些常见的错误。
  • 规范化CSS和HTML代码,如在类似的项目HTML元素都使用相同的IDs和class names。
  • 更加规范了项目流程,如果CSS框架整理了相应的文档,在UI上面一个Team里面的沟通会更加容易。
  • 提高了浏览器兼容性。
  • 你的代码将显得更加清晰、简单、完整以及合理的结构和可读性。

使用CSS框架的坏处

  • 你需要理解整个框架
  • 可能也会引入这个框架本身自带的bug和错误
  • 太依赖于框架,以致对CSS的本质反而不是很了解
  • 源代码相对会比较庞大,因为框架中很多代码可能是你用不到的

CSS框架推荐

Read: 573

关于css class与id的命名 比较通用的名字

转自:http://jakewljoxygen.spaces.live.com/blog/cns!9b827d074e559d7f!438.entry

常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态:status
投票:vote
合作伙伴:partner

(二)注释的写法:
/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构
容器: container
页头:header
内容:content/container
页面主体:main
页尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar

菜单:menu
子菜单:submenu
标题: title
摘要: summary

(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop

标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll

标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note

指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

(四)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 { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局,版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

———————————————————-

Gik 注:

———————————————————-

今天无意中看到的, 想起大堆页面共用一个css文件时那错综复杂的名字…..
觉得,一套易于理解切相对通用的命名规则还是很有用的

这一套感觉比较全一些 就收过来了

下面是另一套 也不错

———————————————————–

转自:http://www.j2box.com/blog/post/17.html

CSS 命名规范

CSS 命名规范

XHTML-CSS写作建议

  1. 所有的xhtml代码小写
  2. 属性的值一定要用双引号("")括起来,且一定要有值
  3. 每个标签都要有开始和结束,且要有正确的层次
  4. 空元素要有结束的tag或于开始的tag后加上"/"
  5. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  6. <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  7. 给每一个表格和表单加上一个唯一的、结构标记id
  8. 给重要的区块加上注释,如:
  9. 给图片加上alt标签
  10. 所有的标签必须进行合理的嵌套
  11. 根元素前必须有元素,宣告使用那一种DTD
  12. 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace

CSS样式表规范:

  1. id和class命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease(最新产品/new+Release)
  2. CSS样式表各区块用注释说明
  3. 尽量使用英文命名原则
  4. 不用加中杠和下划线
  5. 尽量不缩写,除非一看就明白的单词

CSS命名规范

这段时间由于工作的需要对CSS的命名做了一些研究,主要是想让作出的文档等规范,更能让人看懂和读懂。

DIV CSS名称 说明
网站公用相关
Container div #container 容器
Header or banner div #header 页头部分
Main or global navigation div #mainNav 主导航
Menu #menu 菜单
Sub Menu #submenu 子菜单
Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏
Main div #main 页面主体
Content div #content 内容部分
The main content area #contentMain 主要内容区域
Footer div #footer 页脚部分
Tag #tag 标签
Message #msg #message 提示信息
Tips #tips 小技巧
Vote #vote 投票
Friend Link #friendlink 友情连接
Title #title 标题
Summary #summary 摘要
Sub-navigation list #subNav 二级导航
Search input #searchInput 搜索输入框
Search output #searchOutput 搜索输出和搜索结果相似
Search #search 搜索
Search results #searchResults 搜索结果
Copyright information #copyright 版权信息
brand #branding 商标
branding-logo #brandingLogo LOGO
Site information #siteinfo 网站信息
Copyright information etc. #siteinfoLegal 法律声明
Designer or other credits #siteinfoCredits 信誉
Join us #joinus 加入我们
Partnership opportunities #partner 合作伙伴
Services #service 服务
Regsiter #regsiter 注册
Status #status 状态
电子贸易相关
Products .products 产品
Products prices .productsPrices 产品价格
Products description .productsDescription 产品描述
Products review .productsReview 产品评论
Editor’s review .editorReview 编辑评论
New release .newsRelease 最新产品
Publisher .publisher 生产商
Screen shot .screenshot 缩略图
FAQ .faqs 常见问题
Keyword .keyword 关键词
Blog .blog 博客
Forum .forum 论坛

Read: 862

关于web 标准的一些内容

HTML 的未来,第一部分
http://www.ibm.com/developerworks/cn/xml/x-futhtml1

HTML 的未来,第二部分
http://www.ibm.com/developerworks/cn/xml/x-futhtml2.html

Quote

这两期文章介绍了 WHATWG HTML 5 和 W3C XHTML 2.0 的主要特点。这两个计划完全不同:草根组织 WHATWG 希望渐进式地改进 HTML 4 和 XHTML 1.0而联盟支持的 XHTML 2.0 对 HTML 语言进行了彻底重构

虽 然不同,这两种方法仍然有可比性。WHATWG 规范的一些初步成果已经在浏览器中实现,WHATWG 的一些工作就是对 HTML 事实扩展的描述。其中一些重要的部分,如 XMLHttpRequest 将进入 W3C 的 Rich Client Activity 规范。WHATWG 在 Web 标准世界中还是有效的催化剂。

把目光放远一些,XHTML 2.0 方法为 Web 提供了全新的词汇表,那时候 XML 的模块化处理、CSS 和 ECMAScript 将很快成为常见的事物。嵌入设备如电话和数字电视没有必要支持杂乱无章的遗留 Web HTML,可以毫无负担地利用纯 XML 词汇表 XHTML 2.0 的优势。此外,可访问性和国际化的新特性使 XHTML 2.0 成为第一个被认为具有通用性的 XML 文档词汇表,从而成为很多基于标记的工作的坚实而经济的基础。

与过去一样,HTML 的未来也是不确定的,有人可能称之为混乱,但是我相信 XHTML 2.0 最终将得到广泛的接受和采纳。如果这是 Web 上惟一的 XML 词汇表,可能会有一些问题,但是因为浏览器准备应付 SVG、XForms 和其他技术,所以 XHTML 2.0 看起来仅仅是另一个基于 XML 的词汇表而已。

Quote

为何要创建 XHTML 2.0?

XHTML 1.0 的目的是将 HTML 转化成 XML 词汇表。它为 HTML 引入了 XML 语法约束:区分大小写、必须用引号括起来的属性值和成对的标签。这项任务完成了,XHTML 2.0 致力于解决 HTML 作为一种 Web 页面标记语言的问题。

W3C 的 Steven Pemberton 在阿姆斯特丹 XTech 2005 大会上所作的演讲中(请参阅参考资料)阐述了 XHTML 2.0 的设计目标:

1.尽可能的使用 XML:如果一种语言特性已经在 XML 中存在,就不要重复或者重新发明。
2.结构高于表示:感谢 CSS 样式表,HTML 不再需要专门的表示性标签。
3.使 HTML 更容易编写:删除 HTML 中一些无用的特征。
4.更高的可访问性、设备中立性:尽量避免假设读取文档的方式。
5.改进的国际化。
6.更好的表单:盼望已久的改进!
7.减少脚本的需要:HTML 本身包含典型的脚本用法。
8.更好的语义:使 HTML 和语义 Web 应用程序更容易集成。

多余的话我就不说了,HTML5对Web标准真的产生冲击了吗?Web标准真的是变来变去的吗?建议关心HTML5的人认真地阅读这两篇介绍HTML未来的文章。

Read: 825

!论如何覆盖#usrbar 附 百度 space.css 格式化代码

被百度这个 #usrbar 搞得有点郁闷了….

谁给出个主意?

从数据类型上看 貌似z-index最大也就65535了, 而space.css优先级又比自定义css要高
(space.css载入晚)

看这一段

html body center #usrbar{
    z-index:65535!important;                         /* 最大高度 */
    padding:4px 10px 3px 0!important;
    background:#FFFFFF!important;              /* 白色背景 */
    color:#000000!important;
    text-align:right!important;
    filter:alpha(opacity=65)!important;          /* 65% 透明度 */
    -moz-opacity:0.5!important;                     /* mozilla浏览器 50% 透明度 */
     width:auto!important
}

貌似已经覆盖不了他了…..
不知道哪位高人能想点其他办法出来? 前提是能支持 firefox && IE

html body center,
html body center #usrbar,
html body center #ft,
html body center #usrbar nobr,
html body center #usrbar strong,
html body center #usrbar a,
html body center #usrbar a:link,
html body center #usrbar a:visited,
html body center #ft a,
html body center #ft a:link,
html body center #ft a:visited{
max-width:none!important;
min-width:none!important;
layout-flow:horizontal!important;
text-transform:none!important;
direction:inherit!important;
vertical-align:baseline!important;
word-spacing:normal!important;
font-variant:normal!impo    rtant;
text-decoration:none!important;
font-size-adjust:none!important;
font-family:Arial!important;
font-size:12px!important;
line-height:normal!important;
border:none!important;
background:none!important;
background-image:none!important;
overflow:visible!important;
width:auto!important;
clear:both!important;
float:none!important;
margin:0!important;
position:static!important;
visibility:visible!important;
letter-spacing:normal!important;
font-size:12px!important;
font-family:Arial!important;
zoom:1!important;
filter:none!important;
-moz-opacity:1!important
}

html body center #usrbar,
html body center #ft,
html body center #usrbar nobr{
display:block!important;
    height:19px!important;
line-height:19px!important;
}

html body center #usrbar strong,
html body center #usrbar a,
html body center #usrbar a:link,
html body center #usrbar a:visited,
html body center #ft a,
html body center #ft a:link,
html body center #ft a:visited{
display:inline!important;
    height:auto!important;
text-decoration:underline!important;
}

html body center #usrbar strong{
text-align:left!important;
    color:#000000!important;
text-decoration:none!important;
}

html body center{
display:block!important;
}

html body center #main,
html body center #usrbar,
html body center #ft{
position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
right:auto!important;
}

html body center #usrbar nobr{
text-align:right!important;
color:#000000!important;
}

html body center #usrbar{
    z-index:65535!important;
    padding:4px 10px 3px 0!important;
    background:#FFFFFF!important;
    color:#000000!important;
    text-align:right!important;
    filter:alpha(opacity=65)!important;
    -moz-opacity:0.5!important;
width:auto!important
}

html body center #usrbar a,
html body center #usrbar a:link,
html body center #usrbar a:visited{
color:#0000CC!important;
}

html body center #ft{
z-index:65534!important;
    color:#666666!important;
text-align:center!important;
}

html body center #ft a,
html body center #ft a:link,
html body center #ft a:visited{
color:#7777CC!important;
}

html body center #main{
z-index:10000!important;
    padding:0 10px 0 10px;
    min-width:756px;
max-width:1000px;
}

Read: 795

[转] 各种浏览器CSS hack方法

转自:http://xinple.org/?p=208

         现在浏览器多了,做web页面还是比较痛苦的,当然,如果你不在乎自己做的页面在有些浏览器上面惨不忍睹那也是种不错的心态(至少少了点头痛的机会),可是你老板或者上司或者你的用户同意吗?-__!

         下面我就介绍我知道的hack方法吧。我现在比较常用的,并且感觉用的不动脑子的方法是:

  1. #yourId/.yourClass {/*normal*/}
  2. * html #yourId/.yourClass {/*IE6 and below*/}
  3. *+html #yourId/.yourClass {/*IE7 only*/}
  4. @media all and (min-width:0px){
  5. #yourId/.yourClass { /*opera*/ }
  6. }

用法:直接写CSS,用firefox作为第一浏览器看效果,然后IE6下不一样,就用* HTML重写那个ID容器或者类;如果IE 7不一样,就用*+HTML重写,如果opera下面不一样,就用@media那个,当然这写重写的需要放在原来的后面。呵呵,就这么简单。这个方法用了之后可能会上瘾,可是会有诸如增加CSS文件容量等不爽,甚至有时候还会出现直接用这个写几段不同的。所以还是建议能熟悉了解个浏览器具体是在什么属性上支持不一样(例如border宽度IE6认为是不能算在width里面的,但是firefox是认为算width一起的),先尽力写几个浏览器通用的CSS,不到必不得已不用这个hack方法。

原理:firefox认为是CSS语法错误,所以忽略。但是不同IE版本识别不同,不忽略,所以能实现hack,并且*+HTML还能通过W3C验证,呵呵,爽吧。opera那个就不多说了,也是类似原理,但是看起来比较崩溃,要说明的是,firefox下没问题的话,opera基本也没什么问题的,所以不太会用到这个hack。

还需要其他浏览器hack方法?抱歉,我就知道这么多,因为我电脑上只有这么几个浏览器,呵呵,公司要求或者我自己想要把握的用户群够了。

         ————————————-

另外就是!important这个方法了(firefox遇到这个优先级就最高,但是IE6不认,所以下面重新定义可以覆盖),不过这个貌似是以前甚至现在都很多人在用的,但是我个人感觉不是很爽,不能像上面的那样明确的搞定某个浏览器。比如现在IE7对规范CSS支持已经比IE6好了不知道多少,但是还是会有和firefox有的差异,所以用important的方式,控制起来并不像上面的那么一目了然。

Read: 669