HTML样式的使用

CSS:Cascading Style Sheets(层叠样式表)

有三种方式可以在XHTML页面中嵌入CSS.参见CSS教程.

在head标签中加载一个CSS文件

示例

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

此例使用了link标签.

abbr 
{
	font-size:12px;
}
.text10pxwhite 
{
	font-size:10px;
	color: #FFFFFF;
}

style.css的内容

直接把CSS内容写在HTML文件的head标签中

示例

<head>
    <style type="text/css">
    abbr
    {
        font-size: 12px;
    }
    .text10pxwhite
    {
        font-size: 10px;
        color: #FFFFFF;
    }
    </style>
</head>

此例使用了style标签.

两种方法是殊途同归的(但是推荐使用第一种方法,在CSS教程中我将告诉你为什么).

使用style属性对标签加载样式

示例

<p style="font-size: 12px;color: #000;">使用css</p>



HTML style 标签

style 标签 -- 在文档中声明样式时使用此标签
  • style标签是成对出现的,以<style>开始,以</style>结束
  • 属性
    • media -- 媒体类型,参见CSS高级教程
    • type -- 包含内容的类型,一般使用type="text/css"

示例

<head>
    <style type="text/css">
    abbr
    {
        font-size: 12px;
    }
    .text10pxwhite
    {
        font-size: 10px;
        color: #FFFFFF;
    }
    </style>
</head>

HTML link 标签

link 标签 -- 当在文档中声明使用外接资源(比如CSS)时使用此标签
  • link标签是单独出现的
  • 属性
    • href -- 指定需要加载的资源(CSS文件)的地址URI
    • media -- 媒体类型
    • rel -- 指定链接类型
    • rev -- 指定链接类型
    • title -- 指定元素名称
    • type -- 包含内容的类型,一般使用type="text/css"

示例

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

HTML rel  rev属性

rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系.
rev 属性 -- rev属性,描述了href所指定文档与当前页面的关系.
  • rel，rev属性通常出现在a,link标签中
  • 属性值
    • alternate -- 定义交替出现的链接
    • appendix -- 定义文档的附加信息
    • bookmark -- 书签
    • canonical -- 规范网页是一组内容高度相似的网页的首选版本
    • chapter -- 当前文档的章节
    • contents
    • copyright -- 当前文档的版权
    • glossary -- 词汇
    • help -- 链接帮助信息
    • index -- 当前文档的索引
    • next -- 记录文档的下一页.(浏览器可以提前加载此页)
    • nofollow -- 不被用于计算PageRank
    • prev -- 记录文档的上一页.(定义浏览器的后退键)
    • section -- 作为文档的一部分
    • start -- 通知搜索引擎,文档的开始
    • stylesheet -- 定义一个外部加载的样式表
    • subsection -- 作为文档的一小部分
  • rel是relationship的英文缩写

rel与rev属性相同,它们都是属于LinkTypes属性.

示例

<link rel="stylesheet" href="http://www.dreamdu.com/style.css" type="text/css">

rel与rev的区别

rel与rev具有互补的作用,rel指定了向前链接的关系,rev指定了反向链接的关系.

 

HTML alternate 属性值

alternate 属性值 -- alternate是LinkTypes的一个值,网页设计者可以通过此值,设计交替出现的链接
  • alternate属性值通常在,rel,rev属性中出现
  • alternate：中文"备用、代替"的意思

示例

定义两种不同的样式,用户可以通过浏览器选择样式(ie不支持此属性)

<link rel="stylesheet" type="text/css" title="blue" href="dreamdublue.css" />
<link rel="alternate stylesheet" type="text/css" title="red" href="dreamdured.css" />

可以通过http://www.dreamdu.com/feed/读取http://www.dreamdu.com/的内容

<link rel="alternate" type="application/rss+xml" href="http://www.dreamdu.com/feed/" />

HTML start next prev 属性值

start next prev 属性值 -- start next prev,全部属于LinkTypes,此值通常可以提示浏览器文章的开始,下一篇,上一篇的url
  • start next prev属性值通常在,rel,rev属性中出现

示例

<link rel="start" type="text/html" href="http://www.dreamdu.com/xhtml/" />
<link rel="prev" type="text/html" href="http://www.dreamdu.com/xhtml/alternate/" />
<link rel="next" type="text/html" href="http://www.dreamdu.com/xhtml/attribute_rel/" />

HTML rel canonical 属性值

rel canonical 属性值 -- rel="canonical"属性让搜索引擎知道当前网站中的重复或相似网页中，哪一个页面才是站长想让其抓取与收录的
  • canonical属性值通常在，rel属性中出现
  • 引用网址:http://www.dreamdu.com/xhtml/rel_canonical/
  • canonical从功能上来讲，可理解为301永久重定向的辅助功能
  • canonical可以与相对链接或绝对链接一起使用，但是建议使用绝对链接
  • Google对canonical的定义是：规范网页是一组内容高度相似的网页的首选版本
  • canonical：中文"典范"的意思

示例

<link rel="canonical" href="http://dreamdu.com/" />

指定网页http://www.dreamdu.com/为搜索引擎应收录的链接（规范链接）。可以将上述代码复制到所有非规范网址的head部分，例如网址www.dreamdu.com、www.dreamdu.com/default.html、www.dreamdu.com/index.html等

 
posted @ 2016-06-20 17:00  逝意遨游  阅读(610)  评论(0)  编辑  收藏  举报