HTML样式的使用

zoukankan html css js c++ java

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等
```
 
```
查看全文

相关阅读:
Linux常用命令
 jq实现全选，全取消，反选
 apache httpd.conf配置文件详解
 Python Django 商城项目总结
 Python练习题（九）
Python练习题（八）
Python练习题（七）
Python练习题（六）
Python练习题（五）
Python练习题（四）

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

HTML样式的使用

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

示例

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

示例

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

示例

示例

示例

示例

rel与rev的区别

示例

示例

示例