一、CSS简介
CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。
HTML是网页的结构,CSS是网页的外观,而JavaScript是页面的行为。
在网页初期,是没有CSS这回事的。那个时候的网页仅仅是用HTML标签来制作,这样可想而知是怎样的了?或者你可以这样理解,CSS的出现就是为了改造HTML标签在浏览器展示的外观,使其变得更加好看。如果没有CSS的出现,就不可能有现在“色彩缤纷”的页面。CSS的出现可以说就是为了改变表现单调、色彩惨淡的网页
二、CSS和CSS3
CSS3是CSS的升级版本。CSS是从CSS1.0、CSS2.0、CSS2.1和CSS3.0这几个版本一直升级而来,其中CSS2.1是CSS2.0的修订版,CSS3.0是CSS的最新版本。
CSS3.0相对于CSS2.0来说,新增了很多属性和方法,最典型的就是你可以直接为文字设置阴影和为标签设置圆角。在CSS2.0中,为标签设置圆角是一件很头疼的事情。
三、在HTML中引入CSS共有3种方式:
(1)外部样式表;
(2)内部样式表;
(3)内联样式表;
1、CSS的3种引用方式
(1)外部样式表
外部样式表是最理想的CSS引用方式,在实际开发当中,为了提升网站的性能和维护性,一般都是使用外部样式表。所谓的“外部样式表”,就是把CSS代码和HTML代码都单独放在不同文件中,然后在HTML文档中使用link标签来引用CSS样式表。
当样式需要被应用到多个页面时,外部样式表是最理想的选择。使用样式表,你就可以通过更改一个CSS文件来改变整个网站的外观。
外部样式表在单独文件中定义,并且在<head></head>标签对中使用link标签来引用。
举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
</body>
<html>
</pre>
(2)内部样式表
内部样式,指的就是把CSS代码和HTML代码放在同一个文件中,其中CSS代码放在<style></style>标签对内,并且<style></style>标签对是放在<head></head>标签对内的。
举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#div{color:Green;}
</style>
</head>
<body>
<div></div>
</body>
</html></pre>
(3)内联样式表
内联样式表,也是把CSS代码和HTML代码放在同一个文件中,但是跟内部样式表不同,CSS样式不是在<style></style>标签对中定义,而是在标签的style属性中定义。
举例:
<pre><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p style="color:Green; ">内联样式表</p>
<p style="color:Green; ">内联样式表</p>
<p style="color:Green; ">内联样式表</p>
</body>
</html>
</pre>
内联样式表和内部样式表中的例子,其实这两段代码实现的是同一个效果。三个p元素都定义了color属性,那么如果采用以下内部样式表,样式只需要写一遍;如果采用内联样式表,则三个p元素都要单独写一遍。对于网站来说,冗余代码很多,而且由于冗余代码多,每次改动CSS样式都要到具体的标签内修改,这样使得网站的维护性也非常差。
(4)CSS引用方式用途
在实际开发中,我们一般使用外部样式表,而在在线代码测试工具和CSS入门的过程中,我们使用的是内部样式表,因为代码量不是很多,HTML代码和CSS代码放在同一个文件,这样也方便我们修改和测试。不管是在测试或者实际开发中,我们都不建议使用内联样式表。不过呢,我们可以使用内联样式表进行细节的微调。