手机版

通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第11章网页样式表CSS

发布时间：2024-11-28 来源：未知

小中大

字号：

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

第11章网页样式表CSS在前面的章节中学习了基本的网页元素,及其对应的 HTML标签的语法.但对于网页设计者来说,仅学会这些是不够的.在Web 2.0标准中,HTML语言只用于定义网页的结构.要制作出漂亮且符合规范的网页,还需要使用CSS样式表来表现网页的外观.本章将介绍CSS的基本概念,以及通过CSS控制网页元素,如文字外观,背景设置和元素定位等.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.1 CSS基础

11.1.1 CSS基本概念 11.1.2 CSS功能介绍

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.1.1 CSS基本概念CSS是Cascading Style Sheets的缩写,中文译为层叠样式表,用于控制或增强网页外观样式,并且可以与网页的内容相分离.CSS 1.0是W3C工业合作组织首次发布于1997年,用于对HTML语言功能的补充.1998年又推出了CSS 2,进一步增强了HTML的语言功能.但由于浏览器之间的差异,对CSS的支持并不完全兼容.本书讲解的CSS主要针对IE用户.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.1.2 CSS功能介绍在Web早期,网页一般用于技术交流,HTML只用于描述结构和内容.但随着Web的流行与发展,漂亮的外观变得格外重要.随着网页越来越复杂,HTML代码变得越来越繁杂,大量的标签堆积起来变得难以阅读和理解. 此时CSS的出现为这种状况提供了解决之道.CSS还原了 HTML语言原本的描述结构功能,不仅实现了美化页面, 还使页面结构变得简洁合理且清晰可读.简单了解CSS 用于表现网页,控制或增强网页的外观.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.1.2 CSS功能介绍Adobe网站首页效果

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.2 引用CSS既然CSS有如此强大的功能,那么在网页中如何进行引用?一般有下列4种方法: 将外部样式表链接到HTML文件上. 将外部样式表导入到HTML文件中. 将样式表内嵌HTML文件中. 将样式表内联到HTML文件行中.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.2.1 外联样式表外联样式表就是把外部的样式表文件链接到网页上,从而在网页中使用样式表.此方法通过<link>标签实现,关于<link>标签在前面的章节中有详细的介绍.将<link>标签加入到<head>标签之间,具体格式如下: <head> <link rel=stylesheet href="style.css" type="text/css"> … </head>

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.2.2 内嵌样式表内嵌样式表是把CSS样式定义直接放在<style>…</style>标签之间, 然后插入到网页的头部.具体使用格式如下:

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.2.3 导入样式表导入样式表与导入外联样式表的方式相似,也是将外部定义好的 CSS文件引入到网页中,从而在网页中进行应用.但是导入的CSS使用@import在内嵌样式表中导入,导入方式可以与其他方式进行结合.

导入样式表预览效果

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.2.4 内联样式表前面介绍了样式表的使用是与表现的内容标签相分离的. 内联样式表是把样式直接定义在内容标签内部,不需要把代码放在外部文件或网页头部.内联样式表通过 style属性把CSS样式表应用在内容上.其使用格式如下: <p style="color:FF0000;font-size:16">…</p>

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3 CSS基本语法前面介绍了CSS如何在网页中引用,那么CSS到底是如何来定义网页的外观的?其定义的网页外观由一系列规则组成,包括构成,选择符和继承.接下来将分别进行介绍.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3.1 构成CSS的定义由三部分构成:选择符(selector),属性 (properties)和属性的取值(value).基本格式如下: selector {property: value} (选择符 {属性:值})

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3.2 选择符CSS的选择符可以分为4种基本类型:标签选择符,ID选择符,类选择符和特殊选择符.除了基本类型外,还可以把基本类型的选择符组合使用.这些类型选择符的使用规则如下. 1.标签选择符 2.ID选择符 3.类选择符 4.选择符组 5.包含选择符

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3.3 继承性继承性也称层叠性.样式表的继承规则是,外部的元素样式会保留下来继承给这个元素所包含的其他元素.事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值.有时,把很多层嵌套的样式叠加在一起.

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3.4 特殊选择符 —— 伪类伪类可看做是一种特殊的类选择符,是能被支持CSS的浏览器自动识别的特殊选择符.其最大的用处是,可以对链接在不同状态下的内容定义不同的样式效果. 1.语法 2.锚的伪类——动态连接 3.锚的伪类——类选择符动态链接

Web前台设计大系丛书-网站设计指南：通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT

建网站 http//http://

11.3.5 其他伪类CSS 2定义了首字和首行(first-letter和first-line) 的伪类,可以对元素的首字或首行设定不同的样式.下面的实例中在段落标记里定义文本首字尺寸为默认大小的3倍,源码如下所示: <style type="text/css"> p:first-letter {font-size: 300%} </style>

通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第11章网页样式表CSS.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

上一篇：能产生方波,三角波,正弦波的信号发生器(用741)

下一篇：浅谈数据中心空调系统节能

×

二维码

相

关

文

章