样式单CSS.pptVIP

样式单CSS 主要内容 HTML复习 CSS简介 HTML＋CSS CSS基本属性 CSS滤镜 HTML块元素 p.../p br hn.../hn blockquote.../blockquote hr i.../i b.../b big.../big small.../small sub.../sub sup.../sup img src= alt= a href= .../a HTML列表元素 Unordered lists无序列表 ul li.../li /ul Ordered lists有序列表 ol li.../li /ol Definition lists定义列表 dl dt.../dt dd.../dd ... dt.../dt dd.../dd /dl HTML表格元素 table caption.../caption tr th.../th td.../td ... /tr /table align colspan rowspan valign border cellspacing cellpadding Frameset和frame !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN /TR/html4/frameset.dtd html headtitle Frames /title/head frameset cols = 20%, * frame src=contents.html” / frame src=fruits.html name =descr” / /frameset /html HTML表单元素 form action= method= … input type=text name= / input type=checkbox name= / input type=radio name= / input type=submit name= value= / input type=reset / select name= option value= … /option… /select textarea name= …/textarea /form 样式单的出现 1995晚期，由W3C提出，包括 CSS1（1996） 大部分浏览器都支持 CSS2（1998） 个别浏览器支持 CSS3（2000） 1 层叠样式表的特点 弥补HTML对网页格式化功能的不足 排版定位 把网页上的内容结构和格式控制相分离 简化了网页的格式代码 修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，同一个样式单可应用于多个文档 使文档适合很多设备，而不只是桌面系统 文档可更快的下载（各种样式字体，不用GIF图像） 2 CSS样式单如何加入HTML 输入式样式单：@import url(URL) 外联式样式单：link标记 内联式样式单：style标记 嵌入式样式单：style属性 2.1 嵌入式样式表：Style属性 直接在标签内定义 p style=”color: blue; font-size: 10pt”CSS实例/p 特点:使用简单、显示直观，但是无法发挥样式表的优势 举例 2.2 内联式样式表：style标记 添加在HTML的head里： head style type=text/css !-- 标记{特性:特性值;} …… 标记{特性:特性值;} -- /style /head 标记{特性:特性值;} p {font-size: 12pt; font-style: italic; color: green;} 例子：css 2.3 外联式样式表：link标记 特点：适合大型网站的CSS样式定义 head link rel=stylesheet href=“xxx.css / /head 举例 mystyle.css 2.4 输入式样式表：@import url(URL) head style type=text/css !-- @import url(/xxx.css); @import url(xxx1.css); 标记{特性:特性值;} …… -- /style /head 样式单实施的优先级 嵌入式 style属性 内联式 style标记 外联式 link 输入式 @import url(URL) html head link href=“my