5 div css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
第 5 章 DIV+CSS PowerPoint Presentation
Download Presentation
第 5 章 DIV+CSS

Loading in 2 Seconds...

play fullscreen
1 / 42

第 5 章 DIV+CSS - PowerPoint PPT Presentation


  • 131 Views
  • Uploaded on

第 5 章 DIV+CSS. 知识目标. 理解 CSS 盒子模式。 熟练掌握 Div 的创建与设置方法。 掌握 CSS 规则设置方法。. 5.1 CSS 样式表概述 为什么用 CSS 样式. 如今网页排版格式越来越来复杂,如果要对多个网页的同样格式一一进行设计,那么就会给制作人员带来很多的工作量,所以解决办法是采用 CSS 样式来一次性对若干个文档的格式进行控制。. 5.1 CSS 样式表概述 什么是 CSS 样式.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '第 5 章 DIV+CSS' - brittany-peters


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide2
知识目标

理解CSS盒子模式。

熟练掌握Div的创建与设置方法。

掌握CSS规则设置方法。

5 1 css css
5.1CSS样式表概述为什么用CSS样式

如今网页排版格式越来越来复杂,如果要对多个网页的同样格式一一进行设计,那么就会给制作人员带来很多的工作量,所以解决办法是采用CSS样式来一次性对若干个文档的格式进行控制。

5 1 css css1
5.1CSS样式表概述什么是CSS样式

CSS(Cascading Style Sheet,层叠样式表 )技术是一种格式化网页的标准方式,它扩展了HTML的功能,使网页设计者能够以更有效的方式设置网页格式。

5 1 css css2
5.1CSS样式表概述什么是CSS样式

CSS样式存于样式表文件中,然后在多个网页中同时应用该样式表中的样式 ,就能确保多个网页具有一致的格式,并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新),从而大大降低了网站的开发和维护工作量。

5 1 css css3
5.1CSS样式表概述认识CSS面板

显示当前样式

显示所有样式

内部样式表

样式名称

样式及属性值

5 2 css
5.2 CSS的分类

外部链接样式表(External linking css):实际上是一个仅包含样式规则的外部文本文件,其后缀名为“CSS”,当编辑此文件时,所有与此样式表链接的文档将全被更新。

内嵌式样式表(Embedded CSS):嵌在HTML代码的<style>标记之间。

内联式样式表(Inlink CSS):直接在某一HTML标记后添加样式代码。

优先程度:内联式>内嵌式>外部链接

slide8
(1)显示“CSS 样式”面板的方式:

打开“窗口”菜单——“CSS”样式

(2)样式视图

CSS样式面板

slide9
CSS样式在网页中的三种存在方式

外部文件方式:CSS以文件的形式存在,在HTML文档头通过文件引用进行控制。

CSS文件的引用是在<head></head>标签之间写下列语句:

<link rel=“stylesheet” href=“文件名.CSS” type=“text/css”>

slide10
链接与导入的区别

(1)link属于XHTML标签,而@import完全是CSS提供

的一种方式,link标签除了可以加载CSS外,还可以做很多

其它的事情,比如定义RSS,定义rel连接属性等,@import

就只能加载CSS

(2)当一个页面被加载的时候(就是被浏览者浏览的时

候),link引用的CSS会同时被加载,而@import引用的CSS

会等到页面全部被下载完再被加载

(3)@import是CSS2.1提出的所以老的浏览器不支持,

link不存在这个问题;

所以,目前使用link链接.CSS是个不错的选择!!!

slide11
不以文件的形式存在,仅作用于本文档,直接定义在不以文件的形式存在,仅作用于本文档,直接定义在

<head></head> 之间.

<Style type=“text/css”>

<!—

P{font-family:“宋体” font-size:9pt;color:blue}

H2{font-family: “宋体” ;font-size:13pt;color:red}

-->

</style>

内嵌样式

slide12
直接插入式

只需要在每个HTML标签后书写CSS属性。作用范围只限于本标签。

<table style=“color:red;font-size:10pt”>

在统一站点风格上,用第一方式,在某个网页风格统一上,用第二种方式,而在网页内部某个标签的具体调整上,用第三种方式。

slide13
如果是新建CSS文件,有两种方法:

方法一:可以通过菜单”文件/新建/CSS样式”

方法二:通过进入CSS面板,点击右下角的”新建CSS样式”

接下来,我们来看第二种方法

创建新的 CSS 样式

slide14
创建自定义样式(也就是选择器类型中选择”类”):名称须以.开头,并且可以包含任何字母和数字组合。例如 .myhead1。如果您没有输入开头的句点,Dreamweaver 将自动为您输入。

在”定义在:”的选项中,有两个选择,第一个表示新建CSS文件,这时,你在刚才的”名称:”后面的文本框中输入的就是CSS文件名;如果你选择”仅对该文档”,则是以形如”.myhead1”方式出现在代码中.

slide15
重定义HTML标签:重定义特定 HTML 标签的默认格式。对文档中的任何标签都可以应用 CSS 样式 .
slide16
acronym从字义上理解,是取首字母的缩写词,abbr是缩写,在应用过程中,两个标签看起来差不多,但还是有区别的。acronym从字义上理解,是取首字母的缩写词,abbr是缩写,在应用过程中,两个标签看起来差不多,但还是有区别的。

<acronym title="css">Cascading Style Sheets</acronym>

<abbr title="ps">photoshop</abbr>

上面这两行代码是放在页面中的.然后再设置abbr或acronym标签

注意:IE6中可能不支持,IE7支持

slide18
选择高级:重新定义一些标签的特定组合格式。共有四种:a:link, a:visited, a:hover,a:active
  • a:link当文字作为链接时, a:visited当其链接的网页已被浏览时, a:hover表示光标移向链接文字时,a:active当超链接文字被选中时
  • 在网页中练习这四种的效果
slide19
外部:将以文件的形式存在。

仅对该文档:内嵌式样式。

slide20
CSS的属性

字体:font-family

大小:font-size

粗细:font-weight

样式:font-style

行高:line-height

修饰:text-decoration

颜色:color

slide21
CSS中的单位和值

16进制颜色

如#ffffff, #07dc0f

长度

(1)绝对单位:英寸(in)、厘米(cm)、毫米(mm)、磅(pt)、pica=12pt

(2)相对单位:

em—相对于字体的font-size

ex—相对于小写字母x的高度

px— 像素,最常用

slide22
定义层叠样式表

类型:定义 CSS 样式的基本类型设置。

背景:对 CSS 样式的背景设置进行定义,可以对网页中的任何元素应用背景属性。例如,创建一个样式,将背景颜色或背景图像添加到任何页面元素中,比如在文本、表格、页面等的后面。还可以设置背景图像的位置。

区块:精确定义整段文本中文字的字距、对齐方式等属性。

方框:可以定义特定元素的大小及其与周围元素的间距等属性。

边框面板:可以对控制元素周围边界的样式属性进行定义。

列表面板:定义列表的样式属性。

定位面板:定义层的样式属性。

扩展样式面板:主要是用来控制那些不被大多数浏览器所支持的功能。

slide23
CSS的盒模型(BOX Model)

content:主体内容

margin:边距,四个方向为margin-top,margin-right,margin-bottom,margin-left

border:边框,四个方向为border-top,border-right,border-bottom,border-left

padding:填充,四个方向为padding-top,padding-right,padding-bottom,padding-left

div css
Div+CSS —问题探究

Div与CSS相结合来进行网页布局,已成为网页设计领域一大亮点。在Dreamweaver CS3中如何实现这一设计理念呢?Div标签一般用来定义网页上的一个特定区域,将文字、图片和表格等各种网页元素放在此区域里,再用CSS对该<Div>标签定义的区域进行定位和样式的设置。CSS样式表不但是定义页面样式的良好工具,同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具,为了提高设计效率,可以事先定义好布局所需的CSS样式规则,然后在“插入Div标签”中应用。使用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器。

div css1
Div+CSS —问题探究

Div+CSS布局设计思路

用Div来定义语义结构;

用CSS来美化网页,如加入背景、线条边框、对齐属性等;

在这个CSS定义的盒子内加上内容,如文字、图片等。

div css2
Div+CSS —问题探究

典型的版面实例

该实例采用分栏结构,即页头、导航栏、内容、版权四部分组成。

Div+CSS排版结果图

div css3
Div+CSS —问题探究

Div+CSS标准的优点

符合W3C标准。微软等公司均为W3C支持者,这样可以保证您的网站不会因为将来网络应用的升级而被淘汰。

结构清晰,容易被搜索引擎搜索到,天生优化了seo ;

提高易用性,可以一次设计,随处发布。支持浏览器的向后兼容,几乎在所有的浏览器上都可以使用。

表现和内容相分离。这也用CSS布局的特色所在,网页由内容构成,而将网页设计部分剥离出来放在一个独立样式文件中,代码变得更简洁,使页面和样式的更新变得更加方便,提高了网页下载速度。

Table 中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起。而Div 更能体现样式和结构相分离,结构的重构性强。

div css4
Div+CSS —构建任务

工作流程

在站点中新建一个页面并保存。

插入一个Div并设置相关CSS规则,使之成为外部容器。

根据事先拟好的布局草图,定制四个Div标签并分别设置相关CSS规则。

在各Div窗口中插入相应页面元素。

检查整个布局效果并加以调整,保存并预览布局效果。

slide30
ID与类的区别

在CSS中,类选择符是一个半角英文句点(.)之前,而id则是半角英文井号(#)

一个id名称在一个页面里面通常是唯一定义的,因此在页面里定义css通常建议使用class,这样你可以重复使用你的css. 而把id留给最需要使用html元素的javascript等

slide31
SPAN

span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本增添视觉效果。

举例:<p>早睡早起 使人健康、富裕又聪颖。</p>

假设我们想将健康,富裕,聪颖这三个词用红色显示.我们可以用<span>标签来标记,然后,我们将这几个span设置为相同的class。这样,我们稍后就可以在样式表里针对这个class定义特定的样式。

slide32
<p>早睡早起 使人<span class="benefit">健康</span>、 <span class="benefit">富裕</span>和<span class="benefit">聪颖</span>。</p>

相应的CSS代码如下:

span.benefit { color:red; }

示例程序见d:/test/span-exe.html

span div
SPAN与DIV

span的使用局限在一个块元素内,而div可以被用来组织一个或多个块元素。

让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表:

slide34
<div id="democrats"> <ul>

<li>富兰克林·D·罗斯福</li>

<li>哈利·S·杜鲁门</li>

<li>约翰·F·肯尼迪</li>

<li>林登·B·约翰逊</li>

<li>吉米·卡特</li>

<li>比尔·克林顿</li>

</ul>

</div>

  • <div id="republicans"> <ul>

<li>德怀特·D·艾森豪威尔</li>

<li>理查德·尼克松</li>

<li>杰拉尔德·福特</li>

<li>罗纳德·里根</li>

<li>乔治·布什</li>

<li>乔治·W·布什</li>

</ul>

</div>

slide35
可以定义样式如下:

#democrats { background:blue; } #republicans { background:red; }

slide39
div+css参考网站

http://www.csscool.cn

http://www.52css.com

http://www.csszengarden.com/

slide40
本章练习题

1. 选择题

(1)CSS样式选择器的类型有( )。

A.标签、类、文本 B.类、标签、图像 

C.类、标签、高级 D.FLASH、类、ID

(2)在“页面属性”设置中,不能设置的样式为( )。

A.背景颜色 B.背景图像 C.字体大小 D.图像边框

(3)对特定ID的属性设置CSS样式时,选择器命名时,在名称前必须加( )。

A..(英文状态的句点) B.@ C.# D.?

2. 简答题

定义CSS样式有什么好处?

什么是CSS样式?分为哪几类?

如何调用CSS样式?

slide41
课堂作业

对上海凯泉生物科技有限公司主页(http://www.kaiquanbiotech.com/qyjs.htm)的CSS样式导出为独立文件。

slide42
<style type="text/css">

<!--

a:active { text-decoration: none}

a:link { text-decoration: none}

a:visited { text-decoration: none}

a:hover { text-decoration: underline overline}注:上下都有直线的效果

.myfont { font-size: 9pt; line-height: 150%}

.tenpt { font-size: 10pt; line-height: 150%}

body,table {font-size: 10pt; line-height: 150%}

tr,td{font-size:10pt}

-->

</style>