码迷,mamicode.com
首页 > Web开发 > 详细

CSS基础知识

时间:2014-07-19 19:03:27      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   strong   

为元素命名:

在分配ID和类名的时候,一定要尽可能的保持名称与表现方式无关!

因此,应该根据“他们是什么”来为元素命名,而不应该根据“他们的外观如何”来命名。在书写类名和ID的时候要注意大小写。我们建议采用完全小写的类名和ID,多个旦夕之间用连字符分隔,例如,andy-budd比andyBudd清楚得多。

 

选择ID还是类:

一般原则是,类应该应用于该面上相似的元素,这些元素可以出现在同一个页面上多个位置,而ID应该应用于不同的唯一的元素。其实一般来说,应用类的机会大很多,只有在目标元素非常独特,绝对不会对网站上的其他地方的别的东西使用这个名称是才会使用ID。换句话说,就是在绝对确定这个元素只会出现一次的情况下才会使用ID。如果你认为以后会使用相似的元素那么你就使用类。但是也不可陷入“多类症”,应该类名和层叠结合使用来达到目的。

 

DIV和span

许多人误认为DIV没有语义,但是,DIV实际上代表部分(division),他可以将文档分为几个有意义的区域。

DIV可以对会计元素进行分组,而span可以用来对行内元素进行分组或标识。

 

HTML的不同版本:

HTML4.01在1999年成为推荐标准,这是大多数人现在使用的HTML版本。2000年1月,W3C发布了HTML4.01的XML版本,并命名为XHTML1.0。它HTML4.01的主要差异是它遵循XML编码约定,这意味着与常规的HTML不同,所有的XHTML属性必须包含引号,所有的元素必须封闭。

 

文档类型(DTD),DOCTYPE切换和浏览器模式:

DTD

DTD是一组机器可读的规则,他们定义了XML或HTML的特定版本中允许有什么不允许有什么。在解析网页的时候,浏览器将使用这些规则检查网页的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,由此知道要使用HTML的哪个版本。

 

DOCTYPE

DOCTYPE是指在HTML文档开头处的一行或两行代码,他描述使用哪个DTD,如下面的示例描述的是使用XHTML 1.0 Strict的DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE通常--但不总是--包含指定DTD文件的DTD。例如HTML5就不需要URL,浏览器一般不读取这些文件(.dtd文件),而是只识别常见的DOCTYPE声明。

DOCTYPE当前有两种风格:严格(strict)和过渡(transitional)。顾名思义,过渡DOCTYPE的目的是帮助开发人员从老版本迁移到新版本。因此,HTML4.01和XHTML1.0的过渡版本仍然允许使用废弃的元素,比如font元素。但这些语言的严格版本禁止使用废弃的元素。

 

浏览器模式:

当年浏览器厂商创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点他们创建了两种呈现模式:标准模式和混杂模式。在标准模式下,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老师浏览器的行为以防止老式站点无法工作。

一个比较典型的例子就是盒模型。

具体内容参见我的博客:http://www.cnblogs.com/ttcc/p/3849515.html

 

DOCTYPE切换:

浏览器根据DOCTYPE的存在与否以及使用的哪种DTD来选择要使用什么呈现方式。

如果XHTML文档包含形式完整的DOCTYPE,那么它一般使用标准模式呈现。

对于HTML4.01文档,包含严格(strict)DTD的DOCTYPE常常导致页面以标准模式呈现。

包含过渡(transitional)DTD和URL的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD但是没有URL的会导致页面以混在模式呈现。

DOCTYPE不存在或者形式不正确的会导致HTML和XHTML以混杂模式呈现。

根据DOCTYPE是否存在选择呈现模式,被称为DOCTYPE切换或DOCTYPE侦测。并非所有的浏览器都采取这些规则,但是这些规则很好地说明了DOCTYPE切换的工作方式。更具体的内容参见:http://hsivonen.iki.fi/doctype

而且要注意,在IE6中如果DOCTYPE不是页面中的第一个元素,那么会自动切换为混杂模式,IE7已经做了纠正,但是除非将页面作为XML文档,否则最好避免使用XML声明:<?xml version=”1.0” encoding = “utf-8”?>

 

 

 

为样式找到应用目标

伪类:

表单元素或链接元素

:link和:visited称为链接伪类,只能应用于锚元素。:hover, :active和:focus称为动态伪类,理论上可以应用于任何元素。但是IE6只注意应用于锚链接的:hover, :active选择器,完全忽略:focus。IE7在任何元素上都支持:hover,但是忽略:active和:focus。

 

高级选择器:

IE6和更低版本不支持

如果浏览器不理解某个选择器,那么他会忽略整个规则。但是要注意,对于站点布局很重要的任何元素上,要避免使用这些高级选择器。

 

子选择器和相邻同胞选择器:

子选择器(“>”)只选择元素的直接后代,即子元素。IE7和更高版本的浏览器支持子选择器。相邻同胞选择器(“+”)用于定位同一个父元素下某个元素之后的元素。

但是,IE7中这两类选择器有一个小BUG,如果父元素和子元素之间有HTML注释,就会出问题。

 

属性选择器:

“[attr]” or ”[attr=val]”,IE6不支持。

 

层叠和特殊性:

层叠:

即使不太复杂的样式表中,寻找同一个元素可能有两个或更多的规则。CSS通过一个成为层叠(cascade)的过程处理这种冲突。层叠为每个规则分配一个重要度。如下:

优先级由上至下依次增高

user agent stylesheet

user declarations (normal)

author declarations (normal)

author declarations (!important)(例如:h1{color: blue !important;})

user declarations (!important)

(关于用户样式的解释见我的博客)。

然后根据选择器的特殊性决定规则的顺序,特殊性介绍如下。

 

特殊性:

选择器的特殊性分为4个成分等级:a,b,c和d。

如果样式是行内样式,a=1;

b等于ID选择器的总数;

c等于类,伪类和属性选择器的数量;

d等于伪元素选择器和元素选择器的数量。

PS:CSS2伪元素选择器如下:

:before

在元素之前添加内容。

2

:after

在元素之后添加内容。

2

 

有点晕,但是一般来说,用style属性(行内样式)编写的规则总是比任何其他规则特殊,具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择器的规则比只有类型选择器的规则特殊。最后如果两个规则的特殊性相同,那么后定义的规则优先。

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择其中添加他的一个父元素ID,从而提高它的特殊性。

(还可以参考链接:http://www.iinterest.net/2010/05/08/css-specificity/)

为了尽量避免过分混乱,我们尽量保持一般性样式非常一般,特殊性样式尽可能特殊,这样就不需要覆盖特殊样式了。如果发现不得不多次覆盖一般样式,那么从更一般的规则中删除需要覆盖的样式,并且将他显示的应用于需要它的每个元素,这样可能比较简单。

 

继承:

不要跟层叠混淆。

应用样式的元素的后代会继承样式的某些属性,比如颜色和字号。

注意继承而来的样式特殊性为空。所以直接应用于元素的任何样式总会覆盖继承而来的样式。

 

对文档应用样式:

  1. 放在<style>…</style>标签中;
  2. 链接式,链接外部文件<link rel=”stylesheet” type=”text/css” href=”…”>;
  3. 导入样式表 @import url(…).

导入样式表比链接样式表慢。

再使用多个css文件时,还有两个与速度相关的问题,多个文件会导致从服务器发送更多的数据包,这些数据包的数量会影响下载时间。另外,浏览器只能从同一个域同时下载数量有限的文件(一般来说,老式浏览器为2个,现代浏览器为8个)。由于这些原因,结构良好的单一的CSS文件可以显著提高下载速度。

建议使用单一的CSS文件而不是多个小文件,当然应该根据实际站点情况作出决定,没有硬性要求。

 

<CSS Mastery>读书笔记。

For my Lover, CC !

 

 

 

 

 

CSS基础知识,布布扣,bubuko.com

CSS基础知识

标签:style   blog   http   color   使用   strong   

原文地址:http://www.cnblogs.com/ttcc/p/3853718.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!