HTML样式的使用

时间：2016-06-20 17:14:19 阅读：251 评论：0 收藏：0 [点我收藏+]

标签：

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等

HTML样式的使用

标签：

原文地址：http://www.cnblogs.com/JSWBK/p/5601093.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行