第15章 CSS基础知识
CSS是Cascading Style Sheet的缩写，翻译成的中文意思是层叠样式表单。
15.1CSS简介
CSS是控制网页样式并允许将样式信息与见网页内容分离的一种标记性语言。CSS通常在网页制作中
起重要作用，而且速成可以减少网页代码量，更能提高网络访问网页的速度，页且更容易学习和实践。
15.2CSS文件链接方式
CSS文件链接分成内联接、链接内部CSS文件和链外部CSS三种方式，该知识点在14.2节中已详细详解
15.3选择符
选择符的命名规则可以使用英文字母的大写与小写，数字，连字号，下划线，冒号，句号，CSS选择
符只能以字母开头，选择符在CSS中可分成多种，介绍常用CSS选择符：HTML，ID，CLASS选择符。
HTML（类型选择符）选择符是指在CSS中，用HTML的标记来代表网页中这些标记中的样式集合，用CSS
控制这些标记，会改变标的默记样式，如下所示：
p
{
/*设置段落的外补丁*/
Margin:0px;
}
HTML标记中的<p></p>，表示一个段落，当这个段落被上面的CSS样式控制时，默认的段落产隔就没有
了，即段落间的间隔为0（margin控制的效果),同理,这些标记除了P外，还有div,td,tr,和body等。
ID选择符，是惟一性选择符，例如#dreamdured{color:red;},就是在名字前增加了一个#,ID选择答在
一个页中只能出现一次,在整个网站中也最好出现一次(这样有利程序员控制此元素)。
ID选择符在HTML代码中，以ID符只引用一次，如果多次引用，只有第一个有效，其他的没有效果，一
外部样式文件定义一个ID样式，可以在多个网页中使用，但不能在同一页面使用两次或两次以上，下面是
用代码来表示ID选择符的用法。
#mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
属性和属性值由冒号(:)间隔开，多个属性定义用分号(;)分开.
CSS是控制网页样式并允许将样式信息与见网页内容分离的一种标记性语言。CSS通常在网页制作中
起重要作用，而且速成可以减少网页代码量，更能提高网络访问网页的速度，页且更容易学习和实践。
15.2CSS文件链接方式
CSS文件链接分成内联接、链接内部CSS文件和链外部CSS三种方式，该知识点在14.2节中已详细详解
15.3选择符
选择符的命名规则可以使用英文字母的大写与小写，数字，连字号，下划线，冒号，句号，CSS选择
符只能以字母开头，选择符在CSS中可分成多种，介绍常用CSS选择符：HTML，ID，CLASS选择符。
HTML（类型选择符）选择符是指在CSS中，用HTML的标记来代表网页中这些标记中的样式集合，用CSS
控制这些标记，会改变标的默记样式，如下所示：
p
{
/*设置段落的外补丁*/
Margin:0px;
}
HTML标记中的<p></p>，表示一个段落，当这个段落被上面的CSS样式控制时，默认的段落产隔就没有
了，即段落间的间隔为0（margin控制的效果),同理,这些标记除了P外，还有div,td,tr,和body等。
ID选择符，是惟一性选择符，例如#dreamdured{color:red;},就是在名字前增加了一个#,ID选择答在
一个页中只能出现一次,在整个网站中也最好出现一次(这样有利程序员控制此元素)。
ID选择符在HTML代码中，以ID符只引用一次，如果多次引用，只有第一个有效，其他的没有效果，一
外部样式文件定义一个ID样式，可以在多个网页中使用，但不能在同一页面使用两次或两次以上，下面是
用代码来表示ID选择符的用法。
#mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
属性和属性值由冒号(:)间隔开，多个属性定义用分号(;)分开.
CLASS选择符，是多重选择符，例如.dreamdured{color:red;}，就是在名字前增加一个"."，CLASS选择
符在一个页面中可能出现多次。下面是CSS选择语法的完整代码：
.mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
符在一个页面中可能出现多次。下面是CSS选择语法的完整代码：
.mydiv
{
width:200px;
height:100px;
border:2px solid red;
}
15.4 伪类
除上面的选择符外，CSS也允许使用伪类和伪元素选择符。
伪选择符标识虚拟元素，即在标记中不存在，但是流浏器可以推于并应用样式的元素。在伪类中，没有
对应伪元素的标记。
以下是四个可以安全使用的能用在链接上伪类。
link:用在对象处于的链接状态上。
visited:用在已经访问过的链接上。
active:用于获得焦点(比如被单击)的链接上.
hover:用于鼠标光标置于其上的链接上.
15.5注解
CSS注解有两种方式，第一种是单行注解，第二种是多行注解。
单行：/*这是单行注解*/
多行：/*
这是注解第一行
这是注解第二行
*/
15.6 单位
长度的值由可选的正号“+”或负号“-“接一个数字及标明单位的两个字母组成，在一个长度的值中是
没有空格的，例如：1.3 em就不是一个有效的长度的值，1.3em才有效。一个为零的长度不需要两个字母的单
位声明。
以下是有效的相对单位：
em:元素的字体的高度。
ex:x-height，字母"x"的高度
px:像素，相对于屏幕的分辨率
绝对长度单位视输出介质而定，所以逊于相对对单位，以下是有效的绝对单位
in:英寸（1英寸=2.54厘米）
cm:厘米
mm:毫米
pt:点(1点=1/72英寸)
pc:帕(1帕=12点)
一个百分比值由可选的正号“+“或负号”-“接一个数字和百分号”%“组成，在一个百分比值中是
没有空格的。
百分比值相对开其他数值，同样可以用于定义每个属性。
颜色值是一个关键字或一个RGB格式的数字，Windows VGA（视图像阵列）形成了16个关键字：aqua,
black,blue,fuchsia,gray,green,line,maroom,navy,olive,purple,red,silver,teal,white,and yellow.
RGB颜色可以有四种形式。
#rrggbb(如，#00cc00)
#rgb(如，#0c0)
#Rgb(x,x,x)x是一个介乎0-255之间的整数，如rgb(0,204,0).
#Rgb(y%,y%,y%)y是一个介乎0.0～100.0之间的数，如rgb(0%,80%,0%)
CSS注解有两种方式，第一种是单行注解，第二种是多行注解。
单行：/*这是单行注解*/
多行：/*
这是注解第一行
这是注解第二行
*/
15.6 单位
长度的值由可选的正号“+”或负号“-“接一个数字及标明单位的两个字母组成，在一个长度的值中是
没有空格的，例如：1.3 em就不是一个有效的长度的值，1.3em才有效。一个为零的长度不需要两个字母的单
位声明。
以下是有效的相对单位：
em:元素的字体的高度。
ex:x-height，字母"x"的高度
px:像素，相对于屏幕的分辨率
绝对长度单位视输出介质而定，所以逊于相对对单位，以下是有效的绝对单位
in:英寸（1英寸=2.54厘米）
cm:厘米
mm:毫米
pt:点(1点=1/72英寸)
pc:帕(1帕=12点)
一个百分比值由可选的正号“+“或负号”-“接一个数字和百分号”%“组成，在一个百分比值中是
没有空格的。
百分比值相对开其他数值，同样可以用于定义每个属性。
颜色值是一个关键字或一个RGB格式的数字，Windows VGA（视图像阵列）形成了16个关键字：aqua,
black,blue,fuchsia,gray,green,line,maroom,navy,olive,purple,red,silver,teal,white,and yellow.
RGB颜色可以有四种形式。
#rrggbb(如，#00cc00)
#rgb(如，#0c0)
#Rgb(x,x,x)x是一个介乎0-255之间的整数，如rgb(0,204,0).
#Rgb(y%,y%,y%)y是一个介乎0.0～100.0之间的数，如rgb(0%,80%,0%)
15.7CSS基础实例
实例：链接CSS文件到HTML页面中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS基础</title>
<link type"text/css" rel="styllesheet" href="style4.css">
</head>
实例：链接CSS文件到HTML页面中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS基础</title>
<link type"text/css" rel="styllesheet" href="style4.css">
</head>
<body>
<div class="mydiv">这里是一个层，从CSS中定义了宽，高和边框</div>
</body>
</html>
<div class="mydiv">这里是一个层，从CSS中定义了宽，高和边框</div>
</body>
</html>
在aptana软件中
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
以上代码是iso-8859-1的，对于中文字出现的则是乱码，所以要设置charset为utf-8
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
以上代码是iso-8859-1的，对于中文字出现的则是乱码，所以要设置charset为utf-8