网络基础模拟题综合单元6_任务4.pptx

任务4运用高级技术单元6设计制作网页

任务4运用高级技术任务背景知识准备任务实施知识拓展任务拓展讨论与学习巩固与提高习题

到目前为止，小明已经建立好几个网页了，但是他发现自己建立的网页并不美观。他查询了HTML词典后发现，使用CSS可以控制这些网页显示的字体、背景、线型，同样的外观设计，还可以复用；使用DIV可以更加灵活、精确地对网页进行布局，借助于CCS样式能设计出复杂美观的网页。

任务4运用高级技术任务背景知识准备任务实施知识拓展任务拓展讨论与学习巩固与提高习题

CSS样式表CSS基本语法在网页中插入CSSCSS样式的应用知识准备

CSS样式表CSS层叠样式表直接由浏览器解释执行不需要编译用于定义网页各元素的样式CSS样式通常存储在样式表中?CSS:用于增强控制网页显示样式并能将样式信息与网页内容分离的一种标记性语言。

CSS基本语法选择器属性属性值1.指定CSS作用于页面的对象，分为标记选择器、类选择器（以“.”作为前缀标识符）和ID选择器（以“#”作为前缀标识符）。2.多个选择器之间用逗号分隔。属性是CSS预定的样式项属性值设置属性应显示的效果。CSS语法：选择器{属性:属性值}。CSS由三个部分构成：选择器、属性和属性值。

CSS样式表CSS语法属性和属性值构成样式的声明，多条声明之间用分号隔开，选择器的最后一条声明的分号可省略。CSS中的注释文本放在“/*”和“*/”之间。使用ID选择器和类选择器能把同种样式作用于页面不同元素，同等条件下，ID选择器的优先级高于类选择器。

在网页中插入CSS内嵌样式表链接到外部样式表导入外部样式表内部样式表

在网页中插入CSS1.内嵌样式表内嵌样式表是直接在HTML标记的style属性中来定义样式。2.内部样式表内部样式表是把样式定义在HTML文件头部的style标记内。语法：styletype=”text/css”样式声明/style必须放在head…/head之内3.链接到外部样式表语法：linkrel=”stylesheet”type=”text/css”href=”外部样式表URL地址”link标记要放在head…/head之内

在网页中插入CSS1.导入外部样式表语法一：styletype=”text/css”@importurl(“外部样式表URL地址”);/style语法二：styletype=”text/css”@import“外部样式表URL地址”;/style在插入外部样式表的两种方式中：link是HTML标记，@import是CSS提供的，一般情况下推荐使用link标记来链接到外部样式表。

CSS样式的应用：使用CSS设置字体与文本样式样式属性属性值设置字体类型font-family字体名称，如“黑体”设置字体大小font-size数值，单位一般为px（像素）、em（相对父元素字体的大小）和百分比，也可以去掉单位设置字体颜色color颜色值，如“red”、“#FF000000”设置字体加粗font-weight取值为bold表示加粗；normal表示普通字体设置字体倾斜效果font-style取值为italic表示斜体；oblique表示倾斜（只在拉丁字符中有效）；normal表示普通字体设置文本水平对齐text-align取值为left表示左对齐（默认值）；center表示居中对齐；right表示右对齐；justify表示两端对齐设置行高line-height取值为一具体的数值或百分比，单位一般为px、em或百分比；为normal表示默认值；设置文本装饰text-decoration取值为underline表示下划线；overline表示顶划线；line-through表示删除线；blink表示闪烁线；none表示无装饰常见的字体与文本样式

CSS样式表CSS样式的应用：使用CSS设置背景1.设置背景颜色使用background-color属性设置背景颜色，属性值为颜色值。如：body{background-color:#C0C0C0}。2.设置背景图片使用background-image属性设置背景图片，属性值为url(“图像的URL地址”)。如：body{background-image:url(“pic.jpg”)}。

CSS样式表CSS样式的应用：使用CSS设置图像样式样式属性属性值设置图像边框颜色border-color颜色值，如“red”、“#FF000000”设置图像边框样式border-style常用取值为solid表示实线；dotted表示点线;dashed表示虚线；none表示无样式设置图像边框宽度border-width取值为数值，单位为像