CSS学习笔记

CSS学习笔记_01

使用ID名标识页面上的单独元素（比如站点导航），ID必须是惟一的。

在整个站点上，ID名应该应用于概念上相似的元素以避免混淆。从技术上说，如果联系人表单和联系人详细信息在不同的页面上，那么可以给它们分配同样的ID名contact。但是，如果以后需要根据每个元素的上下文环境设置它们的样式，那么就会遇到问题。所以，使用不用ID名（比如contactForm和contactDetails）就会简单得多。

ID名和类名一定要尽可能保持名称有意义并与表现方式无关。例如，可以给导航元素分配ID rightHandNav，如果以后将它的位置改到左边，那么CSS和HTML就会不同步。所以，将这个元素命名为subNav或secondaryNav更合适。

根据“它们是什么”来为元素命名，而不应该根据“它们的外观如何”来命名。

需要注意区分大小写。CSS大体上是不区分大小写的语言。但是，在标记中实体（比如类名和ID名）是否区分大小写取决于标记语言是否区分大小写。如果是XHTML，那么就要区分大小写的。

确定这个元素只会出现一次的情况下，应该使用ID。如果以后可能需要相似的元素，就使用类。

为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。

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

元素选择器或简单选择器

p{color:red;}

h1{font-weight:bold;}

后代选择器：两选择器间用空格隔开

Blockquote p{padding-left:2em;}

ID选择器

#intro{ font-weight:bold;}

类选择器

. intro{ font-weight:bold;}

伪类

a:link{color:blue;}

a:visited{color:green;}

a:hover, a:focus, a:active {background-color:red;}

tr:hover{ background-color:red;}

input:focus { background-color:yellow}

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

通用选择器

*{padding:0; margin:0;}

高级选择器

CSS2.1和CSS3有其他许多有用的选择器。虽然大多数现代浏览器支持这些高级选择器，但是IE6和更低版本不支持。如果浏览器不理解某个选择器，那么它会忽略整个规则。但要记住，在对于站点功能或布局很重要的任何元素上，都应该避免使用这些高级选择器。

后代选择器选择一个元素的所有后代，而子选择器只选择元素的直接后代，即子元素。

IE7和更高版本都支持子选择器。但是，在IE7中有一个小bug，如果父元素和子元素之间有HTML注释，就会出问题。

在IE6和更低版本中，可以使用通用选择器模拟子选择器的效果。为此，先在所有后代上应用你希望子元素具有的样式。然后，使得通用选择器覆盖子元素的后代上的样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#nav>li{
	background:url(./image/pmto.gif) no-repeat left top;
	padding-left:20px;
	list-style: none outside none;
}

/** 
IE6或更低版本
#nav li{
	background:url(./image/pmto.gif) no-repeat left top;
	padding-left:20px;
	list-style: none outside none;
}
#nav li *{
	background:none;
	padding-left:0;
	list-style: none outside none;
}
**/
</style>
</head>

<body>
<ul id="nav">
	<li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    	<ul>
        	<li><a href="">Design</a></li>
            <li><a href="">Development</a></li>
            <li><a href="">comsultancy</a></li>
        </ul>
    <li><a href="#">Contact us</a></li>
</ul>
</body>
</html>

相邻同胞选择器：用于定位同一个父元素下某个元素之后的元素。

h2 + p {}

<h2>aaaaaa</h2>

<p>bbbbbb</p>

与子选择器一样，如果在目标元素之间有注释，在IE7中会出问题。

属性选择器

如title属性

1. 在样式表中使用特殊性

p{color:black;}

p.intro{color:grey}

2. 在主体标签上添加类或ID

body.news{/*do some stuff*/}

body#archive{/*do some defferent stuff*/}

</body>

继承

如果主体的字号设置为1.4em，那么页面上的所有内容应该会继承这个字号。但IE和Netscape在继承表格中的字号方面有问题。为解决这个问题，必须指定表格应该继承字号，或在表格上单独设置字号。

链接样式表：<link href=”/css/basic.css” rel=”stylesheet” type=”text/css”>

导入样式表：@import url(“/css/advanced.css”);

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

在使用多个CSS文件时，有两个与速度相关的问题。首先，多个文件会导致从服务器发送更多数据包，这些数据包的数量（而不是内容）会影响下载时间。另外，浏览器只能从同一个域同时下载数量有限的文件。对于老式的浏览器，这个限制常常只是两个文件，现代浏览器把这个限制提到了8个。因此，如果有3个样式表，那么在老式浏览中必须等下载完前两个文件，才能开始下载第3个。由于这些原因，使用结构良好的单一CSS文件可以显著提高下载速度。

小技巧：如果CSS文件非常长，那么寻找特定的样式会很困难。一种改进方法是在每个注释头中添加一个标志。这个标志仅仅是头文本前面的一个额外字符，如/* @group typography */