第6章 使用CSS修饰常见的网页元素 经济管理学院.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
项目2 字符格式和段落编排 2017年3月7日6时54分.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
数据访问页.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
UI 软件 设计 网页基本元素设计(二).
CSS简介 WEB前端三剑客之二.
Web前端开发技术与实践 第12章 布局 阮晓龙 /
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第 13 章 用CSS 設定 文字顏色與背景.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
CSS樣式 靜宜大學 資管系 楊子青.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
CHAPTER 18 CSS樣式表的動態效果.
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
CSS样式.
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
网页制作基础 CNIC 王桦.
PRESENTED BY OfficePLUS
網頁程式設計 本章投影片錄自HTML5、CSS3、RWD、jQuery Mobile跨裝網頁設計 陳惠貞 著 碁峰資訊股份有限公司出版
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
武汉纺织大学传媒学院 cm.wtu.edu.cn
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
PRESENTED BY OfficePLUS
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
布局大师——表格.
互联网行业 公司年终总结 PRESENTED BY OfficePLUS
POWERPOINT TEMPLATE PRESENTED BY YPPPT.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
第6章 使用CSS修饰常见的网页元素 主讲人:刘泰然 经济管理学院.
第7章 使用CSS设置链接与导航菜单 经济管理学院.
CSS樣式 靜宜大學 資管系 楊子青.
Dreamweaver 進階網頁製作 B 許天彰.
武汉纺织大学传媒学院 cm.wtu.edu.cn
網路商店裝修之二 CSS樣式編輯.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
武汉纺织大学传媒学院 cm.wtu.edu.cn
PRESENTED BY OfficePLUS
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
CSS 一起來美化網頁吧!!.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

第6章 使用CSS修饰常见的网页元素 经济管理学院

内 容 概 览 设置文字的样式 设置段落的样式 设置图片样式 设置背景样式 图文混排

6.1 设置文字的样式 6.1.1 设置文字的字体 在HTML中,设置文字的字体需要通过<font>标记的face属性。而在CSS中,则使用font-family属性。 语法:font-family : 字体名称 【演练 6-1】字体设置,本例页面6-1.html的显示效果如图6-1所示。

6.1 设置文字的样式 6.1.2 设置字体的大小 在设计页面时,通常使用不同大小的字体来突出要表现的主题,在CSS样式中使用font-size属性设置字体的大小。 语法:font-size : 绝对尺寸 | 相对尺寸 | 百分数 【演练 6-2】字体大小设置,本例页面6-2.html的显示效果如图6-2所示。

6.1 设置文字的样式 6.1.3 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。 6.1 设置文字的样式 6.1.3 设置字体的粗细 CSS样式中使用font-weight属性设置字体的粗细。 语法:font-weight : bold | number | normal 【演练 6-3】字体粗细设置,本例页面6-3.html的显示效果如图6-3所示。

6.1 设置文字的样式 6.1.4 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。 6.1 设置文字的样式 6.1.4 设置字体的倾斜 CSS中的font-style属性用来设置字体的倾斜。 语法:font-style : normal || italic || oblique 【演练 6-4】字体倾斜设置,本例页面6-4.html的显示效果如图6-4所示。

6.1 设置文字的样式 6.1.5 设置字体的修饰 使用CSS样式可以对文本进行简单的修饰,例如给文字添加下划线、顶划线和删除线,它是通过text-decoration属性来实现这些效果的。 语法:text-decoration : underline || blink || overline || line-through | none 【演练 6-5】字体修饰设置,本例页面6-5.html的显示效果如图6-5所示。

6.1 设置文字的样式 6.1.6 设置文本的颜色 在CSS样式中,对文字增加颜色修饰十分简单,只需添加color属性即可。color属性的语法格式: color:颜色值; 【演练6-6】文本颜色设置,本例页面6-6.html的显示效果如图6-6所示。

6.2 设置段落的样式 6.2.1 设置文字的对齐方式 使用CSS样式可以设置文字的对齐方式,它是通过text-align属性来实现这些效果的。 语法:text-align : left | right | center | justify

6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 6.2 设置段落的样式 6.2.2 设置首行缩进 在CSS样式中text-indent属性可以方便地实现文本缩进。 语法:text-indent : length 【演练6-7】设置首行缩进,本例页面6-7.html的显示效果如图6-8所示。

6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 6.2 设置段落的样式 6.2.3 设置首字下沉 在CSS样式中伪对象:first-letter可以实现对象内第一个字符的样式控制。 【演练6-8】设置首字下沉,本例页面6-8.html的显示效果如图6-9所示。

6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中,使用line-height属性控制行与行之间的垂直间距。 6.2 设置段落的样式 6.2.4 设置行高 在CSS样式中,使用line-height属性控制行与行之间的垂直间距。 语法:line-height : length | normal 【演练6-9】设置行高,本例页面6-9.html的显示效果如图6-10所示。

6.2 设置段落的样式 6.2.5 设置字间距 在CSS样式中,使用word-spacing属性设置字(单词)之间的间距。 6.2 设置段落的样式 6.2.5 设置字间距 在CSS样式中,使用word-spacing属性设置字(单词)之间的间距。 语法:word-spacing :length | normal 【演练6-10】设置字间距,本例页面6-10.html的显示效果如图6-11所示。

6.2 设置段落的样式 6.2.6 设置字符间距 在CSS样式中,使用letter-spacing属性设置字符或字母之间的间距。 6.2 设置段落的样式 6.2.6 设置字符间距 在CSS样式中,使用letter-spacing属性设置字符或字母之间的间距。 语法:letter-spacing :length | normal 【演练6-11】设置字符间距,本例页面6-11.html的显示效果如图6-12所示。

6.2 设置段落的样式 6.2.7 设置文本的大小写 在CSS样式中,使用text-transform属性设置文本的大小写。 6.2 设置段落的样式 6.2.7 设置文本的大小写 在CSS样式中,使用text-transform属性设置文本的大小写。 语法:text-transform :none | capitalize | uppercase | lowercase 【演练6-12】设置文本的大小写,本例页面6-12.html的显示效果如图6-13所示。

6.3 设置图片样式 6.3.1 图片的边框 在HTML中可以直接通过<img>标记的border属性值为图片添加边框,属性值为边框的粗细,以像素为单位,从而控制边框的粗细。当设置border属性值为0时,则显示为没有边框。 【演练 6-13】设置图片边框,本例页面6-13.html的显示效果如图6-15所示。

6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小,可以通过width和height两个属性来实现。 6.3 设置图片样式 6.3.2 图片的缩放 使用CSS样式控制图片的大小,可以通过width和height两个属性来实现。 【演练 6-14】设置图片缩放,本例页面6-14.html的显示效果如图6-16所示。

6.4 设置背景 6.4.1 设置背景颜色 在CSS中,网页元素的背景颜色使用background-color属性来设置,属性值为某种颜色。 6.4 设置背景 6.4.1 设置背景颜色 在CSS中,网页元素的背景颜色使用background-color属性来设置,属性值为某种颜色。 语法:background-color : color | transparent 【演练 6-15】设置背景颜色,本例页面6-15.html的显示效果如图6-19所示。

6.4 设置背景 6.4.2 设置背景图像 在CSS样式中,使用background-image属性设置背景图像来美化网页。 6.4 设置背景 6.4.2 设置背景图像 在CSS样式中,使用background-image属性设置背景图像来美化网页。 语法:background-image : url(url) | none 【演练 6-16】设置背景图像,本例页面6-16.html的显示效果如图6-20所示。

6.4 设置背景 6.4.3 设置背景重复 在默认情况下,图像会自动向水平和竖直两个方向平铺。可以使用background-repeat属性来控制。 语法:background-repeat : repeat | no-repeat | repeat-x | repeat-y 【演练 6-17】设置背景重复,本例页面6-17.html的显示效果如图6-21所示。

6.4 设置背景 6.4.4 设置背景定位 当在网页中插入背景图片时,每一次插入的位置,都是位于网页的左上角,可以通过background-position属性来改变图片的插入位置。 语法:background-position : length || length background-position : position || position 【演练 6-18】使用关键字进行背景定位,本例页面6-18.html的显示效果如图6-22所示。

6.4 设置背景 6.4.5 设置背景大小 background-size是CSS3提供的一个新特性,它可以让用户随心所欲的控制背景图的尺寸大小。 语法:background-size :[ length | percentage | auto ]{1,2} | cover | contain 需要说明的是,IE 不支持该属性,下面是Opera浏览器中显示的效果,如图6-25所示。

6.4 设置背景 6.4.6 案例——制作购物车统计信息 【演练6-21】制作购物车统计信息,本例页面6-21.html的显示效果如图6-26所示。

6.5 图文混排 图文混排就是将文字与图片混合排列,在网页设计与制作中具有实际意义。 6.5 图文混排 图文混排就是将文字与图片混合排列,在网页设计与制作中具有实际意义。 【演练6-22】使用CSS样式结合HTML代码实现网络鞋城商品展示局部信息的图文混排,为后续章节讲解图文信息列表打下基础。本例页面6-22.html的显示效果如图6-27所示。