Web技术应用基础-d05_第1页
Web技术应用基础-d05_第2页
Web技术应用基础-d05_第3页
Web技术应用基础-d05_第4页
Web技术应用基础-d05_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第5章CSS1CSS5.1CSS简介5.1.1CSS作用

网页展现的样式从网页中独立出来集中管理

2CSS样式表的使用结构

多个网页文件共享样式文件

多个样式文件套用在一个网页文件上HTML文件1HTML文件NCSS样式文件HTMLCSS样式文件NCSS样式文件13CSS5.2定义样式格式选择器{规那么}选择器(Selector)规那么(Rule)例5.14<html><head><title>选择符的应用</title></head><styletype="text/css">/*定义样式*/<!--h2{color:green;font-family:楷体;}.redfont{font-family:华文彩云;color:red}h4.bluefont{font-family:隶书;color:blue}#id_olivefont{font-family:楷体;color:olive}h4#purplefont{font-family:仿宋体;color:purple}--></style>5<body><h2>显示楷体绿色</h2><h3class=redfont>显示华文彩云红色</h3><h4class=bluefont>显示隶书蓝色</h4><h3id=id_olivefont>显示楷体橄榄绿</h3><h4id=purplefont>显示仿宋体紫色</h4></body></html>6CSS5.3应用CSS样式的4种方式

直接定义style属性

在HTML文档内定义内部样式表

嵌入式样式单

外部(链接)样式单

75.4样式表应用案例使用用CSS样式的4种方式显示界面8CSS1.直接定义style属性例5.2<html><head><title>直接定义HTML标记中的style属性</title></head><body><h1style="color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;">用四种方式将样式表功能应用到Web页面中</h1></body></html>

例5.29CSS2.定义内部样式表<html><head><title>定义内部样式表</title><styletype="text/css">/*定义样式*/<!--h1{color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}--></style></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1></body></html>

例5.310CSS3.嵌入外部样式表

11CSS

style1.css保存文字的其它样式

h1{text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}

style2.css保存文字的颜色

h1{color:green;}12CSS<html><head><title>嵌入外部样式表</title><styletype="text/css">/*定义样式*/<!--@importurl("style1.css");@importurl("style2.css");

</style></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1></body></html>例5.413CSS4.链接外部样式表<html><head><title>链接外部样式表</title><linkrel=stylesheettype="text/css"href="style1.css"><linkrel=stylesheettype="text/css"href="style2.css"></head><body><h1>用四种方式将样式表功能应用到Web页面中</h1></body></html>

例5.514HTML5.5页面定位

position三种设定方式：•Absolute•Relative•Static15CSS

left:

Top

Width

Height

z-index

16CSS<html><head><title>定位技术的应用</title><styletype="text/css">span{font-size:28pt;font-family:"隶书"}span.level2{position:absolute;z-index:2;left:100;top:100;color:green}span.level1{position:absolute;z-index:1;left:103;top:103;color:red}span.level0{position:absolute;z-index:0;left:106;top:106;color:yellow}p.lev1{position:absolute;z-index:2;left:50;top:50;font-size:20pt;color:blue}p.lev2{position:absolute;z-index:-2;left:52;top:52;font-size:20pt;color:darkred}</style>

例5.617</head><body><spanclass="level2">Web技术应用根底</span><spanclass="leve

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论