OOCSS

  今天在網上看到一篇文章,内容不多,卻令我知道了一個新的概念:OOCSS。Object Oriented CSS 面向對象的CSS?汗~~還是第一次聽說,太落後了。可惜找不到翻譯,如果懂英文就好了-__-….

下文轉載自:http://www.qianduan.net/object-oriented-css.html

“你如何为成千上万的用户和页面提供CSS?” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会上的幻灯片中尝试回答的问题。得益于面向对象的CSS (OOCSS),这个想法从社区收集到了大量的反馈。

OOCSS显然已经不仅仅是一个工具了,它还是一种思考的方式。根据这个观念可以有很多优势,主要来说有:

  • 它可以让你写更快的、可维护的、基于标准的前端代码。
  • 它在CSS中预先加入了一些必须的元素,这样即便是初学者也可以参与写出漂亮的网站。

OOCSS 基于两个主要原理:

  1. 分离结构和表现;
  2. 分离容器和内容。

建议花些时间看一看面向对象的CSS的幻灯。总共有64页,绝对值得一看。
《Object Oriented CSS》

View more documents from Nicole Sullivan.

 
 

延伸閲讀:ppt 翻譯《CSS之繼承詳解》

View more presentations from 张 鑫旭

出現了:山寨設計師

哎。。。真的太落後了。不知道什麽出了個“山寨設計師”。
剛剛,在群中看到一個消息

山寨版 变形金刚2男主角SAM的埃及战袍
http://item.taobao.com/auction/item_detail.jhtml?item_id=220b5a8b7c38aaa2c21501890e27e336&x_id=0db2

我點了鏈接,進去看到了幾張圖和一些文字描述,然後一拖下去居然看到這麽一個詞彙:“山寨設計師”(如下圖) ……難道?就是蹲在街邊上舉牌子,傳說中Adobe全會的那個人?

copycatting Designer

[譯文]CSS水平等級

原文作者:Emil Stenstr?m
原文地址:Levels of CSS knowledge http://friendlybit.com/css/levels-of-css-knowledge/

你应该已经知道我现在非常推崇web标准。现在普遍流行的标准是:用(X)HTML来表示页面结构,用CSS来设计样式,而用Javascript来表现行为。现在很多人都已经熟悉HTML,它从web发展的初期就已经出现了,你可以到处找到它的教程。CSS正慢慢被人们所掌握,大公司们开始把它们的网站转移到css布局,网站开发者的博客圈也在影响着越来越多的人。

当你向大家推广web标准的时候,跟我们大部分人一样,你会给和很多人讨论。如果是在类似EFNET上#CSS这样的在线聊天室推广的时候你会更清楚的发现:里面的人们对CSS了解有着很多不同的级别。这篇文章就准备按等级列出这些不同级别的开发者是怎样影响着web的。现在开始:

等级0
“CSS(Counter-Strike Source:反恐精英-起源)? 不是那种多人游戏么??”

这些人可能从未制作过网页。也许他们用过纯HTML设计但他们几乎不知道他们曾经做过什么。我们在#CSS(聊天室)遇到过这么一些人,倒不是他们打算开始学习web标准而是因为他们进错了聊天室,大部分以为进入的是Counter-Strike Source(反恐精英-起源)。没有必要为这些人担心,他们这辈子可能永远也不会去做网页所以不会带来什么害处。

等级1
“哦,我有时候用它去掉链接的下划线。”
Continue reading →

No tags for this post!!

SEO工具大集合

SEO Book

《SEOBOOK》国外的一本经典之作,专业人士称之为“SEO 圣经”可想此本
著作在行业内的影响力。
下載:SEObook-ggm.co.cc.rar

内容与结构工具

搜索引擎抓取内容模拟器

可以模拟蜘蛛抓取指定网页,包括Text、Link、Keywords及Description信息等。
http://www.webconfs.com/search-engine-spider-simulator.php

页面相似度检测工具

检验两个页面的相似度(如果相似度达80%以上,将可能受到惩罚)
http://www.webconfs.com/similar-page-checker.php

Sitemap 制作工具

在线创建 Sitemap 网站地图文件

中文:http://www.xinqj.com/sitemap/sitemap.asp

英文:http://www.xml-sitemaps.com/

在线创建Sitemap可能会有一些限制,推荐使用下面的离线工具:

Google SiteMapBuilder .Net

Sitemap 网站地图文件创建软件,可以很方便XML格式、txt格式的Sitemap
http://www.seobbs.net/read.php?tid=10620

注意:此软件工作于.Net 1.1 环境,2.0下无法运行。

综合查询工具

Continue reading →

No tags for this post!!

CSS優先級簡要說明

CSS Specificity
W3C對Specificity的描述(http://www.w3.org/TR/CSS2/cascade.html#specificity):

count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)

粗略地分為a,b,c,d四級:

  • 每個元素的 style屬性(即內聯式樣),為a級1,0,0,0。
  • 每個 ID 選擇符,為b級0,1,0,0。
  • 每個 類 (class)、偽類(:hover)、屬性選擇符( [attr=” “] ),為c級0,0,1,0。
  • 每個元素(即標籤)或偽元素(如 :after),為d級0,0,0,1。
  • 其它選擇符(如 全局選擇符 * ,子選擇符 > ),為0,0,0,0。

其它規則:

  • !important 聲明的規則高於一切,如果 !important 聲明衝突,則比較優先級。
  • 如果優先級一樣,則按源碼中“後來者居上”的原則。
  • 由繼承而得到的式樣屬性不參與 specificity 的計算,低於一切其它規則(如 全局選擇符 * )。

備註:
偽類(如 :hover)值為0,0,1,0 但通常它會有個前綴,如 .class:hover值為0,0,2,0,a:hover值為0,0,1,1

參考文章:http://www.blueidea.com/tech/web/2008/5749.asp
計算權值:http://www.suzyit.com/tools/specificity.php