Css基础学习（一）—如何使用CSS？

来源：互联网发布：丽晶服装软件编辑：程序博客网时间：2024/05/22 02:15

现在web开发人员如果不知道CSS那就太落伍了，不过知道不等于会使用，更不等于精通。而我刚好属于那个知道CSS是干什么的，仅此而已的一员。
CSS：Cascading Style Sheet，层叠样式表，可以将网页的大部分甚至全部的表示信息从HTML文件中移出，达到表现信息和核心内容相分离，达到易于维护以及美工和程序员分工更加明确的好处。
这么好的东西是怎么应用到网页上面的呢？我们先来看看在网页上应用CSS的几种方式：

1、内联样式（inline style）：
通过Style属性应用于文档中的特定标记。内联样式的缺点很大，它将样式散步在了页面的各个角落，我们想像一下：我有一个包含100个HTML页面的网站，需要修改的时候，我将对100个页面分别进行修改，很显然这不是一个好的办法。反而对于初学者，这是使用最多的！

<p style="color:#F00">红色文字</p>

2、内嵌样式（embedded style）
内嵌样式将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。这样的方式比上面先进了一步，不过对于上面的问题仍然束手无策。

<style type="text/css">p{color:#F00}</style>

3、外部样式（external style）
外部样式仅仅包含一个规则，然后可以影响整个网站的所有网页，这好像正是我们所期待的，看看它是怎么样使用的。按照下面的引用css文件就可以达到上面方式的效果，href指向你需要的css文件的路径。

<!--external.css文件--> 
p{color:#F00}

<!--external.html文件--> 
<head><title>external文件</title> 
<link rel="stylesheet" type="text/css" href="external.css"/></head>

另外，使用倒入样式也能实现上面的功能，不过这种方式使用不多

<!--external.html文件--> 
<head><title>external文件</title> 
<style type="text/css">@import url(external.css);</style></head>

4、打印样式

<link rel="stylesheet" type="text/css" media="screen" href="screen.css"/> 
<link rel="stylesheet" type="text/css" media="print" href="print.css"/>

我们看看上面两个外部样式的区别，就在于media这个属性的值不同，那他们的区别在哪里呢？页面表现时将使用screen.css的样式，而在打印这个页面时将使用print.css这个样式，这样便能够很灵活的设置打印样式而不会影响表现的效果。

既然了解了怎么应用css到网页上，我们就来看看css最基本的语法把。

定义样式：所有的css规则都遵循简单的语法规则，由一个选择器（selector）以及一个或多个属性/值（property/value）对组成。例如：

/* =body Default styling for body*/ 
body{margin:10px；}

body就是一个选择器，margin就是一个属性，10px是这个属性的值，属性和值之间使用：分隔，最后分号完成一个属性/值的对。所有的属性/值对都使用大括号包含起来。
/*Default styling for body*/是注释，说明这个样式的作用等信息，/*中间就是注释，允许多行*/；

建议：为规则加上标志。看上面的注释，我们添加了=body字样，通过=加上选择器作为一个标志，可以很方便的在一长篇css文档里面找到我要找的选择器。很多人会说，我使用body也可以找到啊，确实如此，可是p、a这样的选择器你就很难找了吧，而这个建议将会使你很方便的找到你所要的选择器。当然前提是你要有使用注释的习惯。

建议：使用缩进可以有效地增加可读性；虽然缩进会增加css文件的大小，不过这点增量对加载速度几乎没有影响。缺少缩进的css文档对人的影响将是巨大的。