《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
教程管理员 发布于2023-10-04 08:32 HTML教程 451
简介：
![<a href=]()
https://yqfile.alicdn.com/bb27c177cba7a0a7b553d7fcf1e3b2867ed578ce.png" >
实例说明
本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.4节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
1.4 使用CSS修饰HTML 5页面
实例说明
我们知道，CSS能够修饰传统的HTML页面。其实全新的HTML 5也可以用CSS进行修饰，这样将展现给我们一个更加绚丽的页面效果。本实例的目的是编写一段基本的HTML 5程序，然后使用CSS进行修饰。
其实在支持HTML 5新元素的浏览器中，使用CSS修饰各个新增标记元素的方法十分简单，可以对任意一个元素应用CSS（包括直接设置或引入CSS文件）。在默认情况下，CSS假设元素的“display”属性是“inline”的，因此，为了更加正确地显示设置的页面效果，需要将元素的“display”属性设置为“block”。
具体实现
使用Dreamweaver创建一个名为“004.html”的文件，具体代码如下所示：
<!DOCTYPE html >
<meta charset="utf-8" />
<title>设置新元素的样式</title>
<style type="text/css">
article{display::block}
article header p{font-size:13px}
article header h1{font-size:16px}
.p-date{font-size:11px}
</style>
<article>
<header>
<p class="p-date">日期：2012-03-01</p>
<h1>
<a>
那一剑的风情
</a>
</h1>
<p>老先生的力作之一.</p>
</header>
</article>
执行后的效果如图1-5所示。
因为有很多浏览器现在还不支持HTML 5中的新增元素，例如微软的IE。但是传统的CSS只能对IE支持的那些元素起作用。为了使新增的HTML 5元素可以应用CSS样式，可以在头部标记< head >中加入如下JavaScript代码，这样就可以应用样式了：
<script type="text/j avascript">
document .createElement('article');
document .createElement('header');
</script>
建议读者优化上述的JavaScript代码，例如，使用条件语句包含上述JavaScript代码，这样可以使浏览器只在不支持HTML 5的情况下才执行这段脚本。
相关推荐
- 03-01 一份航空信件风格的PPT模板,非常有创意,内页采用稿纸风格,还包括邮票风格图片展示页面和数据页面。
- 02-25 时尚杂志风图文排版PPT模板。一套精美的欧美杂志风PowerPoint模板,以图文排版页面为主。
- 02-20 高端企业商业计划书PPT模板。一套商业计划书幻灯片模板,图文排版页面为主,动态播放,高端大气。
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
