第15章 CSS基础知识.ppt

1、第15章 CSS基础知识,CSS是Cascading Style Sheet的缩写，翻译成中文的意思是层叠样式表单，之前所用到的样式表就是本章要学习的CSS。本章先介绍其基础知识，通过前面的认识和现在的学习，本章的内容是学习CSS时必须掌握的基本知识，但在本章中，只初步的介绍一下，更为详细的内容将会在以后的章节中介绍， 学习本章，将会更清楚了解以下内容： CSS编写环境 CSS文件链接方式 CSS在浏览器兼容性 选择符 伪元素 CSS常用单位 CSS的实例,15.1 CSS简介,对于一个网页设计者来说，对HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，

2、并且升级方便，维护轻松，那么仅仅靠HTML是不够的，CSS在这中间扮演着重要的角色。本章从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对 CSS进行初步的体验。 CSS是Cascading Style Sheet 的缩写，翻译成中文是层叠样式表单，有时简称样式表。它是控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS通常在网页制作中起重要角色，而且还可以减少网页代码量，更能提高网络访问网页的速度，而且更容易学习和实践，所以CSS越来越被更多的网页工作者采用。 CSS常常与HTML标签配合使用，通过链接方式（下一节会讲到）对HTML标签控制，使网页达

3、到更美效果。,15.2 CSS文件链接方式,CSS文件链接分成内联接、链接内部CSS和链接外部CSS三种方式，该知识点在14.2节中已详细详解，本节中不再赘述。 在现在的网站中，网页设计者都先新建一个CSS文件，然后在网页中链接此CSS文件，每控制HTML标签都在这个CSS文件中写入CSS代码，当要修改所有网页的风格时，只要对CSS样式修改即可。一个网站少则一个CSS样式，多的也有三五个，当然链入多个外部样式，则需要多个。 链接CSS样式是HTML与CSS联合的基础，做好这一步，才可以在CSS中的属性控制HTML标记，使网页表达出更好的效果。 注意：如何对CSS文件链接请查看14.2节CSS文

4、件链接。,15.3 选择符,CSS选择符就是CSS样式的名字，选择符的命名规则可以使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号，CSS选择符只能以字母开头，选择符在CSS中可分成多种，在本小节中只介绍常用的CSS选择符：HTML标签选择符、ID选择符和CLASS（类选择符）选择符。 HTML标签选择符是指在CSS中，用HTML的标记来代表网页中这些标记中的样式集合，用CSS控制这些标记，会改变标记的默认样式，如下所示： P /*设置段落的外补丁*/ Margin:0px; 在HTML标记中的，表示一个段落，当这个段落被上面的CSS样式控制时，使默认的段落间隔没有了，即段落间的间隔

5、为0（margin控制的效果）。同理，这些标记除了p外，还有div、td、tr、body等。,15.4 伪类,通过对CSS的学习，在前面实例中用到选择符如div，p等标记类型的样式设置，称为类型选择符。同理，在标记中设置ID或CLASS称之为ID选择符和CLASS选择符，除了类型选择符、ID选择符和CLASS选择符之外，CSS也允许使用伪类和伪元素选择符。 伪类选择符是基于一组预定义性质的选择符，HTML元素可以占有这些预定义性质。实际上这些性质与class属性的功能是相同的，因此在CSS术语中，它们被称作伪类。在对应这些伪类的标记中，不存在真正的class属性，相反，它们代表应用到这些元素的

6、某些方面，或者是相对于该元素的浏览器用户界面的状态。 伪选择符标识虚拟元素，即在标记中不存在，但是浏览器可以推理并应用样式的元素。在伪类中，没有对应伪元素的标记。,15.5 注解,注解在CSS中常用到，用来注释CSS代码功能等，使自己或他人以后看到某代码就知道其内容的功能等信息，使程序可读性更强，CSS注解有两种方式，第一是单行注解，第二种是多行注解。 单行注解是指在CSS代码中，只对单行做注解，浏览器解释到浏览时不会执行，只起标示作用，单行注解语法如下表示。 /*这是单行注解*/ 单行注解是用斜线与星号组成的，其中星号在内，里面所包含的文本是被注解的信息，而多行文本注解与单行文本一样，在CS

7、S中，用斜线和星号表示注解的开始，然后是注解的内容，注解结束用星号和斜线表示，在代码编辑器中，注解的文本颜色与代码不同，下面表示多行注解。 /* 这是注解第一行。 这是注解第二行。 。 */ 多行注解就是用斜线包含其注解内容，分布在多行文本中，需注意的是，这些注解符不能交叉，且不能没有结束符。,15.6 单位,长度的值由可选的正号 + 或负号 - 、接一个数字、还有标明单位的两个字母组成。在一个长度的值之中是没有空格的，例如，1.3 em就不是一个有效的长度的值，但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。 无论是相对值还是绝对值长度，CSS1都支持。相对值单位确定一个相对

8、于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是首选的。以下是有效的相对单位。 em：（em，元素的字体的高度）。 ex：（x-height，字母 x 的高度）。 px：（像素，相对于屏幕的分辨率）。 绝对长度单位视输出介质而定，所以逊色于相对单位。以下是有效的绝对单位： in：（英寸，1英寸=2.54厘米）。 cm：（厘米，1厘米=10毫米）。 mm：（毫米，1米=1000毫米）。 pt：（点，1点=1/72英寸）。 pc：（帕，1帕=12点）。,15.7 用编写CSS工具演示,编写CSS环境很多，可以在文本文件中，在文本文件编写CSS内容是外部链接CSS方式，需要注意的是在保存文

9、件时，后缀改成.css，点前面是CSS文件名；也可以在网页中与之间直接加入样式标签对，里面放内容即可。虽然在文本文件和网页本身都可以编写CSS代码，所以可利用的编写工具很多，下面介绍常用的Dreamweaver8和开源的aptana（如何安装请参照第一章）。 Dreamweaver8是常用的工具，可以直接在这里面新建CSS文件，然后直接写CSS代码即可（如果在与间插入CSS的话还要写上），为了能让初学者更好的理解编写环境，下面演示新建Dreamweaver 8中的CSS文件过程。,15.7.1 打开CSS工具软件,安装好程序后，可以在桌面打开Dreamweaver 8软件，启动程序后，将会出现

10、导航界面，如“打开最近项目”、“创建新项目”等，还可以看到菜单栏和中间位置的部分信息，如图15.1所示。,15.7.2 新建CSS文件,选择菜单栏的“文件|新建”命令，弹出 “新建文档”对话框，在“常规”选项类别中选择“基本页”，“基本页”中选择CSS，单击“创建”按钮，就进入一张CSS编辑界面，如图15.2所示。,15.7.3 保存为CSS后缀文件,新建好CSS文档后，先不急于写代码，在菜单栏中，选择“文件|保存”按钮，当第一次保存时会出现“”另存为”对话框，选择好保存路径和写好CSS文件名，单击“保存”按钮，即可保存为CSS文件，如图15.3所示。,15.7.4 打开aptana工具,首先

11、在桌面或通过“开始|程序|aptana启动”命令，打开aptana软件，将会显示aptana的环境界面，与其他工具软件一样，它也有菜单栏等其他的工具栏，笔者的aptana是英文版本，如图15.4所示。,15.7.5 在菜单栏中新建CSS文件,在菜单栏中，选择“File|new| Untitled CSS File”命令，表示新建一个未命名的CSS文件，此时打开一个CSS编辑区，这时就输入CSS代码，完成后在菜单栏中选择“File|Save”命令，这时会弹出“另存为”对话框，选择好路径和添加好文件名，单击“保存”按钮即可，如图15.5所示。,15.8 CSS与浏览器兼容性,现在浏览器市场的主流浏

12、览器主要是Internet Explorer（简称IE）和 Mozilla Firefox（简称FF），网页中的CSS因两个浏览器支持不同，所以对同一代码会显示不同的效果，那么为了达到网页的风格，有时要注意哪个浏览器要写的CSS属性支持如何。如果某一属性只有一个浏览器支持，那另一浏览器对这属性代码就不起作用。 现在浏览器对CSS的支持主要有CSS标准，有这样的标准才可以约束浏览器厂商对CSS支持度。 在aptana编写CSS代码中，会出现自动提示功能，当输入属性后系统自动出现相关内容供选择，对浏览器图标的颜色深度深浅判断，如图15.6所示。,15.9 CSS基础实例,在上面的图文中，演示了编写

13、HTML和CSS工具的使用，本小节用其中的aptana环境来演示一个实例，主要通过aptana来创建一个基本的网页。对于编写HTML或CSS的环境，可以选择aptana或Dreamweaver8，当然还可以用记事本，但最后保存的格式为.html或.htm为网页格式，如.css表示CSS文件。本实例分别新建一个网页和CSS文件来演示如何用CSS控制HTML标记。 本实例介绍如何在网页中新建网页，并链接外部CSS，然后把这个CSS文件引入到网页中，即在CSS中可以看到网页中的内容，用到的工具是aptana，以下是具体操作步骤来实现最后效果。,15.9.1 在aptana中新建网页,在aptana中

14、新建一个网页，选择好HTML file后，会出现图15.7中的界面，当保存时，会弹出“另存为”对话框，只在其中输入HTML的文件名和保存路径即可，写好标题并保存为.htm的格式后，效果如图15.7所示。,15.9.2 在aptana中新建CSS文件,新建CSS文件，并写入层的边框代码。首页先建一个CSS文件，然后写入代码后保存为.css的格式，如图15.8所示。,15.9.3 链接CSS文件到HTML页面中,在网页文件中链接新建好的CSS文件。对于外部链接，是在和之间用标签，代码15.1表示已加入外部链接的网页源码。 代码15.1 源代码第15章CSS基础.html CSS基础 这里是一个层，

15、从CSS中定义了宽、高和边框 ,15.9.4 用不同的浏览器测试页面,对浏览器兼容问题进行调整，通过编写CSS代码，再对不同浏览器浏览页面后，才能发现哪个层或哪个区别出现不正常显示现象，再找到代码中的CSS属性名称，这样对照效果图判断问题，再从CSS中得到修正，最后达到多浏览器显示一样的效果。 现在的浏览器主要以IE和FF为主，所设计的网页必需要在两种环境下运行才可以放到网上，因为有时在IE中显示正常的效果，可能在FF中就会出现不正常错误，如过分的靠左或图片与文本重叠等。 说明：CSS是HTML+CSS布局中主要部分，也是比较难掌握的，特别是在设置网页时，用到CSS来控制DIV，通过学习CSS属性后，对CSS控制DIV等标记有一定的认识，那么对DIV等对