读书笔记《精通CSS高级Web标准解决方案》(第2版)-1

1.ID还是类:使用大量ID,很快就难以找到唯一名称,最后不得不创建非常长、复杂的命名约定,因此,只有在绝对确定这个元素只会出现一次的情况下,才使用ID。如果你认为以后可能需要相似的元素,就使用类。保持命名约定通用,并且使用类。

只要类名出现重复单词,如news-head和news-link或者section-head和section-foot,就应该考虑把这些元素分解为它们的组成部分。让代码更“组件”化,提高灵活性。以这种方式删除不必要的类名--简化代码、使页面更简洁。

2. div有语义,代表部分(division),可用于文档分割。但为了减少非必要标记,应该只在没有现有元素能实现区域分割时才使用div。如导航列表

<ul>

 <li><a ...>...</a><li>

....

</ul>

不需要再用div包围。

div用于块级元素分组、span用于行级元素分组。


3.html  css版本

xhtml1.1太严格:必须有正确的mime,而且一个错误可能导致整个页面无法显示。不推荐使用。

用xhtml1.0还是html4.01,有争议。

html5还在不断变化中。

doctype切换:浏览器根据doctype是否存在及DTD定义决定呈现模式(http://hsivonen.iki.fi/doctype/)。

应该在每个页面上包含完整的DOCTYPE声明,并在使用HTML时选择严格的DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

注:根据http://hixie.ch/advocacy/xhtml的说明,应避免使用xhtml


4.CSS选择器

常用选择器:类型(元素)选择器、后代选择器、ID选择器、类选择器

伪类选择器

  • a:link,a:visited(链接专用)
  • :hover,:focus,:active 理论上支持所有元素,IE6只支持锚链接的;active、:hover忽略:focus,IE7任何元素支持:hover忽略;active、:focus。

通用选择器:*,可用来对某个元素的所有后代应用样式,或跳过一级后代。

高级选择器(IE6及低版本不支持)

  • 子选择器:只选择直接后代 #nav>li { ... }

        IE7及之后支持,但IE7有bug--父元素、子元素间如果有html注释会出问题。

  • 相邻同胞选择器:定位系统父元素下某元素之后的元素 h2 + p{...}

       同样,IE7及之后支持,但IE7有bug--父元素、子元素间如果有html注释会出问题。

  • 属性选择器:根据属性是否存在或属性值寻找元素 acronym[title]{...} a[rel="nofollow"] {...} a[rel~="co-worker"] {...}

       IE7及之后支持,可作为hack--使非IE6呈现不同。

       a[rel~="co-worker"]可匹配 <a ... rel="friend met co-worker" ...>

5.层叠和特殊性

层叠次序

  • 标有!important的用户样式
  • 标有!important的作者样式
  • 作者样式
  • 用户样式
  • 浏览器/用户代理应用样式

特殊性

采用高的未指定的基数(如果一个特定选择器中的选择器数量少于10,可以取10为基数)

选择器分为4个等级(a、b、c、d):

内联样式,如: style=””,a=1。

b=ID选择器总数

c=类,伪类和属性选择器的数量

d=类型选择器和伪元素选择器的数量

以10为基数:

特殊性=a*1000+b*100+c*10+d。

特殊性相同时,后一规则优先。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值