Web应用开发课件.pptVIP

TRTD width=“30%P align=centerHTML最新课堂/P/TD TD width=“70%P align=center高级应用技术/P/TD /TR /TABLE/DIV /TD/TR TR TD width=100%P align=center多层表格嵌套示例/P/TD /TR /TABLE/CENTER /DIV/BODY/HTML 样式表CSS 样式表的作用是什么？ 如何定义样式表？ 如何把样式表和HTML标记关联起来？ CSS属性定义是否和HTML标记属性一致 / CSS概念 CSS是Cascading Style Sheets 的缩写，中文的意思是层叠样式表或级联样式表。 CSS功能简介 CSS可以用来精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。 问题描述 pfont color=red我的简历/font/p pfont color=red我的爱好/font/p pfont color=red我的图片/font/p pfont color=blue我的简历/font/p pfont color=blue我的爱好/font/p pfont color=blue我的图片/font/p 改变所有字颜色为蓝色： 实现页面风格的统一控制 style type=text/css !-- .charcolor { font-family: 宋体; color: #0000FF; } -- /style pfont class=charcolor我的简历/font/p pfont class=charcolor 我的爱好/font/p pfont class=charcolor 我的图片/font/p EX.10.html 通过HTML标记定义 STYLE type=text/css !-- BODY{font-family:隶书;font-size:20pt;color:orange} -- /STYLE 使用class定义样式表 STYLE type=text/css !-- .classstyle{font-family:黑体; font-size:14pt; color:blue} -- CSS样式表的定义 设置方式 举 例 特 点 内联样式 body h1 style=font-family:宋体;font-size:12pt;color:blue在这里使用了H1标记/h1 /body 灵活，简单方便。 嵌入样式 head style type=text/css h1 {font-family:宋体;font-size:12pt;color:blue} /style /head body h1在这里使用了H1标记/h1 /body 一个样式可以在一个页面多次应用。 外部样式 head link rel=stylesheet href=h1.css type=text/css /head bodyh1在这里使用了H1标记/h1/body h1.css h1 {font-family:宋体;font-size:12pt;color:blue} 需要有一个外部的样式表文件(.css)，可以为多个网页所共同引用，即减少代码，又可以做到统一页面风格。 css语句格式如下： selector {property: value} (选择符 {属性：值}) 选择符的作用：限制样式作用的范围 p {font-size:15} 当属性的值是多个单词组成时，必须在值上加引号 h1 {font-family: Courier New} 如果需要对一个选择符指定多个属性时，使用分号隔开。 p {font-size:15;color:red} 选择符主要包括： html选择符 class选择符 id选择符 例： HTML HEAD STYLE type=text/css !-- BODY{font-family:隶书;font-size:20pt;color:orange} -- /STYLE TITLEcss实例/TITLE /HEAD BODY P align=centerCSS基础/P P align=center定义HTML标记样式表/P /BODY /HTML EX.8.html 图 使用HTML标记定义样式表 例： HTML HEAD TITLEid方法与class方法的使用与区别！/TITLE STYLE