《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.4节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4 使用CSS修饰HTML 5页面


<a href=https://yqfile.alicdn.com/bb27c177cba7a0a7b553d7fcf1e3b2867ed578ce.png" >

实例说明

我们知道,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所示。


d5701f3b32dc85eec6759317ba9e1b4cd4478e24

因为有很多浏览器现在还不支持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的情况下才执行这段脚本。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章