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等

时间： 2024-10-09 18:35:38

HTML样式的使用的相关文章

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

css样式表

样式表主要分为三类:内联式.内嵌式和外部样式表. 内联式样式表是跟html联合显示,写在body标签里边,属于控制精确,但是可用性差.在三种样式中会优先显示作用. 内嵌式是作为独立区域写在head标签里边.body标签中有对应的标签:<div id/name/class=" "></div>. 外部样式表是新建一个css文件,用来放样式表,在html中用link链接. <link type="text/css" rel="s

自定义input[type="checkbox"]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现

一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式: 简单忙碌状态控件BusyBox: Win8/win10效果忙碌状态控件ProgressRing: 弹出异步等待框WaitingBox: 二．简单忙碌状态控件BusyBox 效果图: 通过属性"IsActive"控制控件是否启用,后台C#代码: /// <summary> /

Endnote 中文参考文献样式修改版

http://blog.yuelong.info/post/endnote-gbt7714-2005.html 很多人不知道 EndNote 是自带中文参考文献引用样式的,即符合<文后参考文献著录规则>(GB/T 7714-2005)规范的样式,这也是目前绝大多数中文科技期刊所要求使用的参考文献引用样式.EndNote 中的样式有两个,分别叫:「Chinese Std GBT7714(author-year)」和「Chinese Std GBT7714(numeric)」,分别对应「著者-出版

clang format 自定义样式常用参数说明

常用的格式设置: #如果为真(true),分析格式化过的文件中最常见的&和*的对齐方式.然后指针对齐仅作为回退 DerivePointerAlignment: false #缩进宽度 IndentWidth: 4 #@[]里面两边空格,原true SpacesInContainerLiterals: false #OC中,在@property之后添加空格, 例如:使用 \@property (readonly) 而不是 \@property(readonly). ObjCSpaceAfterPr

网站开发综合技术第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "

（11）网页样式综合案列---灵活的电子相册 {上}

本篇学习资料讲解: 通过css对电子相册进行排版和侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片(或者某段文字)时,相应的文字(或者相应的某张图片)会以特殊样式显示} 以上部分的介绍将出现在(12)网页样式综合案列---灵活的电子相册 {下},这里只是提前感受. 1.搭建基本框架搭建框架主要应考虑在实际页面中相册的具体结构和形式,包括照片整体排列的方法,用户可能的浏览情况,照片是否需要自动调整,等等.

Android--listView的divider分割线样式和边距

1.建立一个drawable文件list_divider.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:left="16dp" android:right="16dp"

css002 创建样式和样式表

创建样式和样式表一个样式表包含多个样式样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style> (该标签是html的标签,不是css的) h1{color: red} </style> </head> 2.外部样式表 Html5 <link rel=”stylesheet” href=”style.css”> Html4.01 <link rel=”stylesh