|
第一天 初步认识Css 通过前面的HTML语言学习，我们已经对标识有了一定的认识。在实际操作的过程中，你就会发现一个问题将十分突出，直接影响到你的工作效率，那就是排版与文字的控制，事实上当你面对成千上百个页面的时候，你将花上极大的耐心和时间去一个个的处理，这个时候，我们就需要CSS来简化你的工作了。
CSS（Cascading Style Sheets）层叠式样表，我们简称为式样表.它可以说是html的一个插件，但在当前网页设计中，是一个必不可少的插件.我们可以通过它把格式与网页分隔开来，充分的弥补了HTML的不足，简化了网页的源代码，也避免了重复劳动，减轻你的工作量。可以说CSS在现代网页设计中，是必不可少的工具之一。
如何建立一个CSS文件，又如何使用css文件,就是今天的重点。
和HTML文件一样，我们可以在一个文本文件中直接输入源代码，然后把后缀名改为.css就可以创建一个CSS文件了。因为他是HTML插件，所以我们不必输入如<html>之类文件声明代码，而是直接编辑CSS参数声明。
基本的CSS声明通过下面的格式来实现：
标识{属性:值}
标识既为HTML标识，你可以参考前面的html教程。这里我们举个例子来说明。
body{color:#000000}
这就可以对正本区内的元素颜色进行控制。 当我们想对一个标识进行多属性控制，或者对多标识进行单属性或多属性控制的时候，我们就可以扩充上面的格式。
标识{属性1，值1；属性2，值2；……}
标识1，标识2……{属性:值}
标识1，标识2……{属性1，值1；属性2，值2……}
标识1 标识2……{属性1，值1；属性2，值2……}
这里需要说明的是第四组声明格式，与前面的声明对比，我们会发现标识1和标识2中间少了一个逗号，它也就是设置标识1和标识2的交集部分，换句话说，标识2的内容同时包含在标识1中的时候，所设置的属性才会起作用。
对于通一个标识，我们还可以把它分解开设置。
标识{属性1，值1}
标识{属性2，值2}
……
这样子的声明方式并不会互相抵触，因为所声明的属性是不同的。如果对同样一个属性作了重复的声明，则只有後来声明的设定值才会发生作用。
CSS声明同样不记大小写，换行，空白，要是格式对了就会接受。
在CSS声明的基础上，我们产生了类的概念，通过创建类，我们可以让单一或数个元素使用同组样式规则的方法.这样也可以避免一个页面中元素的风格千篇一律。
我们同过下面的格式创建一个类：
标识.类别名{属性：值}
例如
P.sc{color:#ffffff}
这就可以对换行进行色彩控制。需要注意的是类别名可以自己拟定，这样也增加了运用类的灵活性.
当要让相同的标识套用不同属性值时，我们可以用
标识.类别名1{属性1：值1}
标识.类别名2{属性1：值2}
同过类我们可以实现对同一个页面中的同一个标识进行不同的设置，但类的缺点在一个标识下的属性只属于这个标识，无法被其他标识套用，那么我们想对其他标识进行同样的控制，就必须再创建一个类，这样就增加了工作量.为了解决这个问题，就出现了伪类，它可以被所有的标识套用。
.伪类名1{属性：值}
事实上把类中的标识部分去掉就形成了伪类，所以我们也可以自己拟定伪类名。
另外还有一种声明方式，和伪类比较相似。但不同的是它具有唯一性，也就是说在同一个页面中，它只能出现一次。而的这种唯一性正是让javascript或 ??槬??y最????ā?t拠?慰? VBScript能够对元素进行控制的关键。它的格式如下:
#ID名称{属性:值}
例如：#se{color:#00FF00}
关于ID我们在这里只简单的提一下，目前就不再深入研究。
了解了如何创建CSS，那么我们怎么把CSS导入一个页面中去呢？
一般我们通过下面四种方法：
1.使用<style>的参数.例如：
<p style=”color: blue; font-size: 10pt”>H.S WORKSHOP</p>
这种方法可以很灵活的控制元素的属性，但缺乏统一性，一般我们不提倡使用。
2。使用<style>标识。例如
<STYLE TYPE="text/css">
<!--
样式规则表
-->
</STYLE>
一般来说，这个标识可以存在于任何位置，都不会影响到效果，但为了方便管理我们经常性的添加在<head>...</head>中。其中TYPE="text/css"是为了，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表.
3.同过<LINK>标识
<link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
同样的我们也把这个标识添加在<head>...</head>中，它和<style>不同的是，它是导入外部的CSS文件，从某种角度来说，我们同过这个标识实现了真正意义上的文件与格式分离.
其中Rel属性表示样式表将以何种方式与HTML文档结合。它有两个可选值
Stylesheet：指定一个外部的样式表;
Alternate stylesheet：指定使用一个交互样式表.
href=""
指出CSS文件的位置.
Media=""
表示使用样式表的网页将用什么媒体输出。它有以下这些可选值:
Screen（默认）：输出到电脑屏幕
Print：输出到打印机
TV：输出到电视机
Projection：输出到投影仪
Aural：输出到扬声器
Braille：输出到凸字触觉感知设备
Tty：输出到电传打字机
All：输出到以上所有设备
如果要输出到多种媒体，可以用逗号分隔取值表。
4.使用@import引入：
<STYLE TYPE="text/css">
<!--
@import url(引入的样式表的位址、路径与档名);
-->
</STYLE>
跟LINK用法很像，但必需放在<STYLE>...</STYLE> 中，要注意的是，行末的分号是绝对不可少的！这种方法是在网络中直接引用别人的式样表。
一般来说我们常用2,3两种方法添加CSS文件。
在加入CSS文件之后，我们如何灵活控制元素的式样呢？
前面提到了类。当你导入了一个式样表，我们就可以用class这个参数来控制元素。
一般的格式如下:
<标识 class="类别名">
<标识 class="伪类名">
<标识 ID="ID名">
本章最后我想说一点与本章没有太大关系的内容，但绝对实用。
还记得在HTML的基本语法，在BODY标签中可 以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗？现在亦可用CSS去控制这些性质，称为拟似类别(pseudo class)。拟似类别以冒号来声明。
A:link { 属性:值 }用以设定未参观连结的样式规则。
A:active { 属性:值 }用以设定作用中连结的样式规则。
A:visited { 属性:值 }用以设定已参观连结的样式规则。
A:hover { 属性:值 }用以设定滑鼠移到连结之上时的样式规则。
虽然样式表可以套用在任何标签之上，但是DIV和SPAN标识的使用更是大大地扩展了HTML的应用层面。DIV和SPAN这两个标识在应用上十分类似，不同之处在于：DIV定义为区块（block），在 <DIV>...</DIV>之间是一个很完整的段落区块。 而SPAN标识则是定义为同轴（in-line），<SPAN>...< /SPAN>应用于于小范围内的设定。两者可以彼此混合，夹杂使用，因为彼此是相互独立的。也因此，您可以利用这两个元素，配合其它性质，灵活地调整您的网页显示的内容.
|
