div+css第二讲.ppt

1、别具光芒CSS网页布局案例剖析,软件教研室:顾海燕,第1章从基础开始,1.1(X)HTML与CSS 1.2基本CSS选择器 1.3在HTML中引入CSS的方法 1.4动手体验CSS 1.5网页使用的编辑软件 1.6CSS的复合选择器 1.7 CSS的继承特性 1.8CSS的层叠特性 1.9本章小结,1.3 在HTML中引入CSS的方法,行内样式表 内部（内嵌）样式表 外部样式表,在对CSS有了大致的了解之后，便可以使用CSS对页面进行全方位的控制。本节主要介绍如何在HTML中使用CSS。 CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制

2、定，一般按CSS代码位置分为：,1.3.1 行内样式表, 页面标题 正文内容1 正文内容2 正文内容3 ,行内样式是所有样式方法中最为直接的一种，它直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。,它是最为简单的CSS使用方法，但由于需要为每一个标记设置style属性，它的后期维护成本依然很高，而且网页容易过“胖”（宽），因此不推荐使用。,1.3. 2 内部（内嵌）样式表, 页面标题 p font-size: 25px; font-weight: bold; color: #0000FF; text-decoration: underline; ,内嵌样式表就是将CSS写

3、在与之间，并且用和标记进行声明。, 这是第1行正文内容 这是第2行正文内容 这是第3行正文内容 ,所有CSS代码部分被集中在了同一个区域，方便了后期的维护，还减小了页面的大小。 但如果一个网站拥有很多的页面，对于不同页面都希望采用同样的风格时，内部样式表就会略显麻烦，因此，仅适用于对特殊的页面设置单独的样式风格。,1.3.3 外部样式表,外部样式表是使用频率最高，也是应用最好的一种形式。它是CSS样式代码单独编写在一个独立文件之中，由网页进行调用，多个网页可以调用同一个样式文件，这样就使得网站的整体风格保持了和谐与统一，同时又实现了页面框架HTML代码与美工CSS代码的完全分离。前期制作和后期

4、维护也十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。 外部样式表包括导入式和链接式两种。 二者的区别在于引入的方式不同。,1.3.3 外部样式表导入式,p font-size: 25px; font-weight: bold; color: #0000FF; text-decoration: underline; ,例如要将上一节中的代码改为导入式，那么首先创建一个新的文本文件中，通常以.CSS为文件后缀名，例如sheet1.css。文件内容为：, 页面标题 import url(sheet1.css); 这是第1行正文内容 这是第2行正文内容 这是第3行正文内容 ,然后在HT

5、ML文件中引入这个CSS文件，写作：,1.3.3 外部样式表导入式,import url(sheet1.css); import url(“sheet1.css”); import url(sheet1.css); import sheet1.css; import “sheet1.css”; import sheet1.css;,此外，在引入CSS文件时，以下写法都是正确的，可以任选一种。,1.3.3 外部样式表链接式, 页面标题 这是第1行正文内容 这是第2行正文内容 这是第3行正文内容 ,链接式和导入式的效果是相同的，区别在于引入的方式不同。例如要将上面的导入式改为链接式引入，CSS文件

6、本身不需要修改，仅需要把至（包括它本身）的所有代码删除，然后加入一行如下代码：,可以看到这事通过标记引入的。具体文件名由href属性确定。 从效果来说，而这基本没有区别，目前使用链接式的更多一些。,1.3 在HTML中引入CSS的方法总结, 测试页 头部 主体 尾部 ,在之间加入 import url(css/style2.css); 称为：导入式样式表,实例代码:CSS按位置的分类,1.3.4 各种方式的优先级问题,CSS控制页面的四种不同方法，各种方法都有其自身的特点。这四种方法如果同时运用到同一个HTML文件的同一个标记上时，将会出现优先级的问题。如果在各种方法中设置的属性不一样，例如内

7、嵌式设置字体为宋体，行内式设置颜色为红色，那么显示结果会而这同时生效，为宋体红色字，这并不存在冲突。 但是，当不同的选择器对同一个元素设置同一个属性时，例如都设置字体的颜色，情况就会比较复杂。下面举一个例子。,1.3.4 各种方式的优先级问题,p color:red; ,首先创建两个CSS文件，其中第一个命名为red.css，其内容为：,P color:green; ,第2个命名为green.css，其内容为：,这两个CSS的作用分别将文本段落文字的颜色设置为红色和绿色。接着创建一个HTML文件如下：,1.3.4 各种方式的优先级问题, 页面标题 p color:blue; import ur

8、l(red.css); , 观察文字颜色 ,1.3.4 各种方式的优先级问题,行内、嵌入和导入这3中方式之间的优先级关系是： 行内式嵌入式导入式 而当使用了外部的样式表（包括链接式和导入式）时，情况会变得更为复杂，简单的理解可以认为： （1）行内式嵌入式外部式 （2）外部样式中，出现在后面的优先级高于出现在前面的优先级。,经验： 虽然各种CSS样式加入页面的方式有优先级，但在建设网站时，最好使用其中的12中，这样既有利于后期的维护和管理，也不会出现各种样式“冲突”的情况，便于设计者理顺设计的整体思路。,1.4 动手体验CSS,本节通过一个简单的实例，初步体验CSS是如何控制页面的，对页面从无到

9、有并使用CSS实现一些效果有个初步的了解。该例的效果图如图1.13所示。,1.4.1 从零开始, 体验CSS 畅思网络有限公司 依托于在安防领域丰富的设计的安防解决方案。 在原有网络产品和服务供应网络迅速步入行业的前沿。 ,首先建立HTML文件，构建最简单的页面框架，其内容包括标题和正文部分，每一部分有分别处于不同的模块中，代码如下所示：,1.4.1 从零开始,页面内容非常简单，现在看上去十分的单调，但页面的核心框架已经产生。,1.4.2 使用CSS设置标题, 体验CSS h1 color:white; background-color:#FF9933; font-size:30px; fon

10、t-weight:bold; text-align:center; padding:15px; 省略,使用桔黄色背景的白色文字可以是标题更醒目。另外，将标题设为水平居中，并且与正文有一定的距离。 首先在HTML的head部分加入标记，然后在它们之间加入CSS样式规则，代码如右图所示：,1.4.3 控制图片,img float:left; border:1px #9999CC dashed; margin:5px; ,首先在和标记之间加入如下代码 ：,margin属性用于控制对象的上、右、下、左四个方向的外边距。 margin：top right bottom left； margin:5px;

11、就等于margin:5px 5px 5px 5px; padding属性用于控制对象的上、右、下、左四个方向的内边距。 padding ：top right bottom left； padding :15px;就等于margin:15px 15px 15px 15px;,1.4.5 设置正文,p font-size:12px; text-indent:2em; line-height:1.5; padding:5px; ,1.4.5 设置正文,注：这里通过应用相对长度单位em，设置文本缩进为2em，不管文字大小是多少，将始终保持文本缩进为两个汉字的宽度。,1.4.5 设置整体页面,body

12、margin:0px; background-color:#CCCCFF; ,消除网页内容与浏览器窗口边界之间的空白，并设置浅色的背景色：,1.4.5 设置正文,1.4.6 对段落分别进行设置,依托于在安防领域丰富的设计的安防解决方案。 在原有网络产品和服务供应步入行业的前沿。,为两个文本段落各自设置不同的效果。首先给两个段落的标记分别设置一个id属性，代码如下：,然后在CSS部分设置如下CSS规则：,#p1 border-right:6px #008000 double; #p2 border-right:6px #0000FF double; ,1.4.7 兼容性检查,目前使用的浏览器有几

13、种，例如IE6、IE7和Firefor（火狐），同一个页面在不同的浏览器上显示，效果可能会不同，因此应该在主流浏览器中检查。例如上面的图中显示的是在Firefor中的效果，那么下面就分别用IE6、IE7打开这个页面，效果分别如图1.20和图1.21所示。 可以看到，在这两个IE浏览器中的效果和在firefor中的效果却是略有差别。这事因为不同浏览器对最上面的h1标题的默认设置有所不同。在h1的样式中增加如下代码： margin-top:15px; 或 margin-top:0px;,1.4.8 CSS的注释,/*这是有效的CSS注释内容*/ /*如果注释内容比较长，也可以写在 多行中，同样是有效的*/,编写CSS代码与编写其他的程序一样，养成良好的些注释的习惯对于提高代码的可读性、减少日后维护的成本都非常的重要。在CSS中，注释的语句都位于“/*”与“*/”之间，其内容可以是单行也可以是多行，如下都是CSS合法注释：,另外，需要注意的是，对于单行注释，每行注释的结尾都必须加上“*/”否则之后的代码会失效，例如下面的代码中的后3行代码将会被当作注释而不会发挥任何作用。,h1color:gray; /*this CSS comment is several lines h2color:silver; long,but since it is not wrapped pcolor:wh