网页设计与制作教程课件 项目2 CSS3样式基础.pptxVIP

项目2CSS3样式基础;项目描述

;项目目标;项目分析

;知识引入

;1、选择器：匹配样式将作用于页面中指定的对象。这些对象可以是某个标签、某个class名或某个id名等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果；

2、声明（规则）：声明可以是一个或多个，浏览器将根据声明来渲染选择器指定的对象。声明包括两个部分：属性和属性值。

（1）属性：属性是CSS预定义的样式选项。属性名可以是由一个单词，如width，height等。的也可以是由多个单词组成，多个单词之间用连字符-“相连，如图1中的font-size表示字体的大小，color表示字体的颜色；

（2）属性值：用来设置属性要显示效果的参数，它可以是一个数值，一个单位，或者是一个预定义的关键字。如图1中的18px，200px，#ffff00，等等；

3、样式和声明的基本格式：

?一个样式的基本格式：“选择器{声明1；声明2；…；声明n；}”；

?一个声明的基本格式：“属性：属性值；”。

;4、注释

注释的作用是便于开发人员理解代码的作用，在文档中完全看不见，只有通过查看源文件才能看见，故注释不会影响页面效果。

基本格式：HTML中的格式为“!–注释语句–”；CSS中的格式为“/*注释语句*/”。

5、CSS样式的保存

CSS样式代码必须保存在.css类型的文本文件中，或者入在网页内style标签中，或者插在网页标签的style属性中。

6、CSS四种样式

HTML与CSS是两个作用不同的语言，要让它们同时对一个网页产生作用，必须确定在HTML中引入CSS的方法，主要有以下4种。

将CSS样式表放置在HTML文件头部：内嵌样式表。

将CSS样式表放置在HTML文件主体：行内样式表。

将CSS样式表放置在HTML文件外部：链接样式表与导入样式表。

;子任务2使用行内样式

;子任务3使用内嵌式样式;子任务4使用链接样式表

;其中href属性设置外部样式表文件的地址，可以是相对地址，也可以是绝对地址。rel属性定义该标签关联的是样式表标签，type属性定义文档的类型，即为CSS文本文件。

一般在定义link标签时，应定义3个基本属性，其中href是必须设置属性。具体说明如下：

href:定义样式式表文件URL。

type:定义导入文件类型，同style元素一样。

rel:用于定义文档关联，这里表示关联样式表。

;子任务5使用导入样式表

;项目实施;步骤2：编写lianjie.css文件代码；

h3{

font-weight:normal;/*取消标题默认加粗效果*/

background-color:rosybrown;/*设置背景颜色*/

}

步骤3：编写lianjie-2.css文件代码；

p{

color:#FF3333;/*字体颜色设置*/

border-bottom:3pxdashed#009933;/*设置下加框线*/

line-height:30px;/*设置行高*/

}

;步骤4：使用link标签导入外部样式表，文件名保存为2-6.html效果如图2-9所示。

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

metaname=viewportcontent=width=device-width,initial-scale=1.0

title链接样式的拓展/title

linkhref=lianjie.csstype=text/cssrel=stylesheet

linkhref=lianjie-2.csstype=text/cssrel=stylesheet

/head

body

p我是被lianje-2.css文件控制的，楼下的你呢？/p

h3楼上的，我是lianje.css文件给我穿的花衣./h3

/body

/html图2-9使用连接接样式后的效果图

;项目总结;2、行内样式

body

HMTL标签style=“样式属性：取值；样式属性：取值；”/HTML标签

/body

3、内嵌式样式

head

styletype=“text/css”

选择器｛样式属性：取值;样式属性：取值;.....｝

选择器｛样式属性：取值;样式属性：取值;.....｝

/style

/head

;4、链接式样式

head

?link?href=样式表的地址?type