CSS基本语法及用法
2009-04-23 15:04
579 查看
学CSS的时候是两年之前，因为对基本的HTML语言有一定的了解，所以学起来也不是很吃力了，算算的话大概用了两个星期左右就全部学会了，之后还自己写了两个网站的模板，自认为写得还是很不错，从代码规范到美观都是很不错的。后来因为不经常用，差不多都忘记了，现在再去写模板的时候发现还挺吃力的，没办法就用了一天的时间来记忆以前学的东西，还好没有全部忘记，很快就学会了。现在把前两天整理的一些语法和用法贴出来，希望对大家有用，也方便自己以后查阅。下面只是介绍简单的一些方法和技巧，详细的CSS语法介绍可以查看SEO论坛的CSS 2.0 中文手册，里面涉及到了CSS的所有标签属性。
DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
一、CSS的基本语法
1.基本语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector { property: value}
（选择符 { 属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body { color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p { font-family: "sans serif"}
（定义段落字体为sans serif）
如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p { text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial）
2.选择符组
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }
3.类选择符
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right { text-align: right}
p.center { text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center { text-align: center}
（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
4.ID选择符
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
5.包含选择符
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
table a
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
6.样式表的层叠性
层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：
div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。
另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt}
p { color: blue}
……
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
7.注释
你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下：
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
二、CSS的基本用法
添加CSS样式方法：
用法一:直接在HTML文件中添加样式
<HTML> <STYLE TYPE="text/css"> <!-- P{} --></STYLE><HEAD></HEAD><BODY></BODY></HTML>
TYPE="text/css"属性和注释标签。TYPE="text/css" 设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。
(<!-- and -->)用于防止在不支持CSS的浏览器中显示样式表的代码。
用法二：连接到外部的样式表
<HTML><HEAD><LINK REL=stylesheet HREF="styles.css" TYPE="text/css"> </HEAD> <BODY> </BODY></HTML>
用法三：输入外部的样式表
<HTML> <STYLE TYPE="text/css"> <!-- @import url(company.css); P { color: orange; } --> </STYLE> <HEAD> </HEAD> <BODY> </BODY> </HTML>
用法四：在标签中添加样式
<P STYLE="color: orange; "></P>
CSS分类一：直接用标签
p { color: orange; }
<p></p>
CSS分类二：定义类
style { color: orange; }
<p class=style></p>
CSS分类三：定义ID
#top{position: absolute; }
<div id=top></div>
继承方式
.title {border:1px solid #f00}
span.title
.title a
div.title a
span.title a
样式表的串接顺序：
1.Inline styles （行内样式）
2.Embedded styles （植入样式）
3.Linked styles （链接样式）
4.Imported styles （输入样式）
5.Default browser styles（缺省浏览器样式）
div{red!important} important提升样式的优先权
三、使用CSS的一些注意事项
1.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《CSS 2.0 中文手册》，这里就不展开描述。
2.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
3.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
4.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
5.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
6.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
7.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
8.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
<div class=one two></div>
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
9.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
10.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：
background:url(images/***.gif) #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号，反而会引起一些浏览器的错误。
11.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
12.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。
13.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》
14.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
<!-- 你的布局这里开始 -->
你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
15.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
16.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
* 1.注释的方法
o (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
o (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
* 2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
<!--[if IE]>
<link rel=stylesheet type=text/css href=ie.css />
<![endif]-->
17.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
18.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
空格和换行有助与阅读。
DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
一、CSS的基本语法
1.基本语法
CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：
selector { property: value}
（选择符 { 属性：值}）
选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：
body { color: black}
选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，此例的效果是使页面中的文字为黑色。
如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：
p { font-family: "sans serif"}
（定义段落字体为sans serif）
如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开：
p { text-align: center; color: red}
（段落居中排列；并且段落中的文字为红色）
为了使你定义的样式表方便阅读，你可以采用分行的书写格式：
p
{
text-align: center;
color: black;
font-family: arial
}
（段落排列居中，段落中文字为黑色，字体是arial）
2.选择符组
你可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：
h1, h2, h3, h4, h5, h6 { color: green }
（这个组里包括所有的标题元素，每个标题元素的文字都为绿色）
p, table{ font-size: 9pt }
（段落和表格里的文字尺寸为9号字）
效果完全等效于：
p { font-size: 9pt }
table { font-size: 9pt }
3.类选择符
用类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如你想要两个不同的段落，一个段落向右对齐，一个段落居中，你可以先定义两个类：
p.right { text-align: right}
p.center { text-align: center}
然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：
<p class="right">
这个段落向右对齐的
</p>
<p class="center">
这个段落是居中排列的
</p>
注意：类的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式：
.center { text-align: center}
（定义.center的类选择符为文字居中排列）
这样的类可以被应用到任何元素上。下面我们使h1元素（标题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟随“.center”这个类选择符：
<h1 class="center">
这个标题是居中排列的
</h1>
<p class="center">
这个段落也是居中排列的
</p>
注意：这种省略HTML标记的类选择符是我们经后最常用的CSS方法，使用这种方法，我们可以很方便的在任意元素上套用预先定义好的类样式。
4.ID选择符
在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。
ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。下面这个例子，ID属性将匹配所有id="intro"的元素：
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
（字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明）
下面这个例子，ID属性只匹配id="intro"的段落元素：
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注意：ID选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。
5.包含选择符
可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如：
table a
{
font-size: 12px
}
在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。
6.样式表的层叠性
层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。例如在DIV标记中嵌套P标记：
div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的文字为红色9号字
</p>
</div>
（P元素里的内容会继承DIV定义的属性）
注意：有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例如，上边界属性值是不会继承的，直觉上，一个段落不会同文档BODY一样的上边界值。
另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：
div { color: red; font-size:9pt}
p { color: blue}
……
<div>
<p>
这个段落的文字为蓝色9号字
</p>
</div>
我们可以看到段落里的文字大小为9号字是继承div属性的，而color属性则依照最后定义的。
不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：
p { color: #FF0000!important }
.blue { color: #0000FF}
#id1 { color: #FFFF00}
我们同时对页面中的一个段落加上这三种样式，它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important，则依照优先权最高的ID选择符为黄色文字。
7.注释
你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以"/*" 开头，以"*/" 结尾，如下：
/* 定义段落样式表 */
p
{
text-align: center; /* 文本居中排列 */
color: black; /* 文字为黑色 */
font-family: arial /* 字体为arial */
}
二、CSS的基本用法
添加CSS样式方法：
用法一:直接在HTML文件中添加样式
<HTML> <STYLE TYPE="text/css"> <!-- P{} --></STYLE><HEAD></HEAD><BODY></BODY></HTML>
TYPE="text/css"属性和注释标签。TYPE="text/css" 设定采用MIME类型，这样以来，不支持CSS的浏览器可以忽略样式表。
(<!-- and -->)用于防止在不支持CSS的浏览器中显示样式表的代码。
用法二：连接到外部的样式表
<HTML><HEAD><LINK REL=stylesheet HREF="styles.css" TYPE="text/css"> </HEAD> <BODY> </BODY></HTML>
用法三：输入外部的样式表
<HTML> <STYLE TYPE="text/css"> <!-- @import url(company.css); P { color: orange; } --> </STYLE> <HEAD> </HEAD> <BODY> </BODY> </HTML>
用法四：在标签中添加样式
<P STYLE="color: orange; "></P>
CSS分类一：直接用标签
p { color: orange; }
<p></p>
CSS分类二：定义类
style { color: orange; }
<p class=style></p>
CSS分类三：定义ID
#top{position: absolute; }
<div id=top></div>
继承方式
.title {border:1px solid #f00}
span.title
.title a
div.title a
span.title a
样式表的串接顺序：
1.Inline styles （行内样式）
2.Embedded styles （植入样式）
3.Linked styles （链接样式）
4.Imported styles （输入样式）
5.Default browser styles（缺省浏览器样式）
div{red!important} important提升样式的优先权
三、使用CSS的一些注意事项
1.使用css缩写
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《CSS 2.0 中文手册》，这里就不展开描述。
2.明确定义单位，除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width: 100px width:100em。只有两个例外情况可以不定义单位：行高和0值。除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
3.区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
4.取消class和id前的元素限定
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，鴆las s可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#content { /* declarations */ }
fieldset.details { /* declarations */ }
可以写成
#content { /* declarations */ }
.details { /* declarations */ }
这样可以节省一些字节。
5.默认值
通常padding的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突，可以在样式表一开始就先定义所有元素的margin和padding值都为0，象这样：
* {
margin:0;
padding:0;
}
6.不需要重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义。但是要注意，浏览器可能用一些默认值覆盖你的定义。
7.最近优先原则
如果对同一个元素的定义有多种，以最接近(最小一级)的定义为最优先，例如有这么一段代码
Update: Lorem ipsum dolor set
在CSS文件中，你已经定义了元素p，又定义了一个classupdate
p {
margin:1em 0;
font-size:1em;
color:#333;
}
.update {
font-weight:bold;
color:#600;
}
这两个定义中，class=update将被使用，因为class比p更近。你可以查阅W3C的《 Calculating a selector’s specificity》 了解更多。
8.多重class定义
一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。
.one{width:200px;background:#666;}
.two{border:10px solid #F00;}
在页面代码中，我们可以这样调用
<div class=one two></div>
这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。
9.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：
<div id=subnav>
<ul>
<li class=subnavitem> <a href=# class=subnavitem>Item 1</a></li>>
<li class=subnavitemselected> <a href=# class=subnavitemselected> Item 1</a> </li>
<li class=subnavitem> <a href=# class=subnavitem> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：
div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码
<ul id=subnav>
<li> <a href=#> Item 1</a> </li>
<li class=sel> <a href=#> Item 1</a> </li>
<li> <a href=#> Item 1</a> </li>
</ul>
样式定义是：
#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。
10.不需要给背景图片路径加引号
为了节省字节，我建议不要给背景图片路径加引号，因为引号不是必须的。例如：
background:url(images/***.gif) #333;
可以写为
background:url(images/***.gif) #333;
如果你加了引号，反而会引起一些浏览器的错误。
11.组选择器(Group selectors)
当一些元素类型、class或者id都有共同的一些属性，你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。
例如：定义所有标题的字体、颜色和margin，你可以这样写：
h1,h2,h3,h4,h5,h6 {
font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用时，有个别元素需要定义独立样式，你可以再加上新的定义，可以覆盖老的定义，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
12.用正确的顺序指定链接的样式
当你用CSS来定义链接的多个状态样式时，要注意它们书写的顺序，正确的顺序是：:link :visited :hover :active。抽取第一个字母是LVHA，你可以记忆成LoVe HAte(喜欢讨厌)。为什么这么定义，可以参考Eric Meyer的《Link Specificity》。
如果你的用户需要用键盘来控制，需要知道当前链接的焦点，你还可以定义:focus属性。:focus属性的效果也取决与你书写的位置，如果你希望聚焦元素显示:hover效果，你就把:focus写在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。
13.清除浮动
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
通常的解决办法是在浮动层后面添加一个额外元素，例如一个div或者一个br，并且定义它的样式为clear: both。这个办法有一点牵强，幸运的是还有一个好办法可以解决，参看这篇文章《How To Clear Floats Without Structural Markup》(注：本站将尽快翻译此文)。
上面2种方法可以很好解决浮动超出的问题，但是如果当你真的需要对层或者层里的对象进行clear的时候怎么办？一种简单的方法就是用overflow属性，这个方法最初的发表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被广泛讨论。
上面那一种clear方法更适合你，要看具体的情况，这里不再展开论述。另外关于float的应用，一些优秀的文章已经说得很清楚，推荐你阅读：《Floatutorial》、《Containing Floats》和《Float Layouts》
14.横向居中(centering)
这是一个简单的技巧，但是值得再说一遍，因为我看见太多的新手问题都是问这个：CSS如何横向居中？你需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
<!-- 你的布局这里开始 -->
你可以这样定义使它横向居中：
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：用text-align属性。就象这样：
body {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个body的text-align:center; 规则定义IE5/Win中body的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
15.导入(Import)和隐藏CSS
因为老版本浏览器不支持CSS，一个通常的做法是使用@import技巧来把CSS隐藏起来。例如：
@import url(main.css);
然而，这个方法对IE4不起作用，这让我很是头疼了一阵子。后来我用这样的写法：
@import main.css;
这样就可以在IE4中也隐藏CSS了，呵呵，还节省了5个字节呢。想了解@import语法的详细说明，可以看这里《centricle’s css filter chart》
16.针对IE的优化
有些时候，你需要对IE浏览器的bug定义一些特别的规则，这里有太多的CSS技巧(hacks)，我只使用其中的两种方法，不管微软在即将发布的IE7 beta版里是否更好的支持CSS，这两种方法都是最安全的。
* 1.注释的方法
o (a)在IE中隐藏一个CSS定义，你可以使用子选择器(child selector):
html>body p {
/* 定义内容 */
}
o (b)下面这个写法只有IE浏览器可以理解(对其他浏览器都隐藏)
* html p {
/* declarations */
}
o (c)还有些时候，你希望IE/Win有效而IE/Mac隐藏，你可以使用反斜线技巧：
/* */
* html p {
declarations
}
/* */
* 2.条件注释(conditional comments)的方法
另外一种方法，我认为比CSS Hacks更加经得起考验就是采用微软的私有属性条件注释(conditional comments)。用这个方法你可以给IE单独定义一些样式，而不影响主样式表的定义。就象这样：
<!--[if IE]>
<link rel=stylesheet type=text/css href=ie.css />
<![endif]-->
17.调试技巧：层有多大？
当调试CSS发生错误，你就要象排版工人，逐行分析CSS代码。我通常在出问题的层上定义一个背景颜色，这样就能很明显看到层占据多大空间。有些人建议用 border，一般情况也是可以的，但问题是，有时候border 会增加元素的尺寸，border-top和boeder-bottom会破坏纵向margin的值，所以使用background更加安全些。
另外一个经常出问题的属性是outline。outline看起来象boeder，但不会影响元素的尺寸或者位置。只有少数浏览器支持outline属性，我所知道的只有Safari、OmniWeb、和Opera。
18.CSS代码书写样式
在写CSS代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：
selector1,
selector2 {
property:value;
}
当使用联合定义时，我通常将每个选择器单独写一行，这样方便在CSS文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值后，不要加空格。
我习惯在每个属性值后面都加分号，虽然规则上允许最后一个属性值后面可以不写分号，但是如果你要加新样式时容易忘记补上分号而产生错误，所以还是都加比较好。
最后，关闭的大括号}单独写一行。
空格和换行有助与阅读。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML学习之Css基本语法、样式表和选择器的初步认识
- html和css的基本语法1
- HTML基本用法（一） · css将文字在一行中有序排列；
- CSS基本语法
- Strust2第（十一）篇《OGNL表达式的基本语法和用法》
- css教程之样式表的基本语法(一)
- Struts2学习（第十一篇）——OGNL表达式的基本语法和用法
- Java程序员从笨鸟到菜鸟之（四十九）细谈struts2（十一）OGNL表达式的基本语法和用法
- CSS基本语法
- CSS基本用法(二)
- ExpandableListView的一些基本语法以及用法，程序员须知的基本标准
- css 中的position z-index em rem zoom 的基本用法
- css的基本语法
- IOS 高级语法与设计模式5（5.3 协议的基本概念及用法）
- CSS基础教程--基本语法笔记
- [CSS]层叠样式表CSS的基本语法和继承问题
- JAVAWEB-CSS和JS的基本用法
- Java程序员从笨鸟到菜鸟之（四十九）细谈struts2（十一）OGNL表达式的基本语法和用法
- Css基本语法和引用
- CSS-基本语法/引用/文本设置/选择器/css3属性