通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。

实例:
例1:本例演示如何使用添加到 <head> 部分的样式信息对 HTML 进行格式化。
<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

例2:本例演示如何使用样式属性做一个没有下划线的链接。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body>

<a href="/example/html/lastpage.html" style="text-decoration:none">
这是一个链接!
</a>

</body>
</html>

例3:本例演示如何 <link> 标签链接到一个外部样式表。
<html>

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

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>

</html>

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:

1.外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

3.内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


标签           描述

<style>     定义样式定义。
<link>     定义资源引用。
<div>        定义文档中的节或区域(块级)。
<span>     定义文档中的行内的小块或区域。

HTML学习(四)样式的更多相关文章

  1. Expression Blend学习四控件

    原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点 ...

  2. TweenMax动画库学习(四)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  3. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. Android JNI学习(四)——JNI的常用方法的中文API

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  5. SCARA——OpenGL入门学习四(颜色)

    OpenGL入门学习[四] 本次学习的是颜色的选择.终于要走出黑白的世界了~~ OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 无论哪种颜色模式,计算机都必须为每一个像素保存一些数 ...

  6. ZigBee学习四 无线+UART通信

    ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique messag ...

  7. (转)SpringMVC学习(四)——Spring、MyBatis和SpringMVC的整合

    http://blog.csdn.net/yerenyuan_pku/article/details/72231763 之前我整合了Spring和MyBatis这两个框架,不会的可以看我的文章MyBa ...

  8. Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档

    0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...

  9. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  10. Python基础学习四

    Python基础学习四 1.内置函数 help()函数:用于查看内置函数的用途. help(abs) isinstance()函数:用于判断变量类型. isinstance(x,(int,float) ...

随机推荐

  1. navicat连接oracle时发现 ORA-12737 set CHS16GBK

    oracle安装目录下找到目录:\product\11.2.0\dbhome_1\BIN, 将箭头标注的三个文件(截图中为navicat中的目录,已经测试成功,亲们可以参考)从目录中拷贝纸navica ...

  2. C++矩阵处理库--Eigen初步使用

      项目要进行比较多的矩阵操作,特别是二维矩阵.刚开始做实验时,使用了动态二维数组,于是写了一堆Matrix函数,作矩阵的乘除加减求逆求行列式.实验做完了,开始做代码优化,发现Matrix.h文件里适 ...

  3. HDU 2579/BFS/ Dating with girls(2)

    题目链接 /* 题意是是传统的迷宫加上一个条件,墙壁在k的整倍数时刻会消失,那么求到达出口的最短时间. 关键点在于某个点最多被走k次,标记vis[x][y][time%k]即可. */ #includ ...

  4. UIWebView & javascript

    http://blog.163.com/m_note/blog/static/208197045201293015844274/ UIWebView是IOS SDK中渲染网面的控件,在显示网页的时候, ...

  5. m,mm,mmm的用法

    通过查看android源码目录下的build/envsetup.sh文件,可知: - m:       Makes from the top of the tree. - mm:      Build ...

  6. Cloudsim 3.0在myclipse下的安装过程

    (1)下载cloudsim 3.0: http://code.google.com/p/cloudsim/downloads/list (2)下载flanaga.jar包  下载地址:http://w ...

  7. 解决Android Studio Gradle Build特别慢的问题

    解决Android Studio Gradle Build 特别慢的问题 C:\Users\你的用户名\.gradle目录下新建一个文件名为gradle.properties的文件.内容为:org.g ...

  8. C# 双引号的输出

    Console.WriteLine("\"a little list.\"");

  9. Ubuntu系统如何修改主机名

    1.执行命令 hostname temp_name 这样主机名就改掉了.只不过重启后名字会恢复不一定使我们想要的.机器重启后会重新去读取/etc/hostname里面存储的主机名.所以如果想永久改掉的 ...

  10. Block 使用场景

    转载自:http://blog.csdn.net/totogo2010/article/details/7839061 代码块本质上是和其他变量类似.不同的是,代码块存储的数据是一个函数体.使用代码块 ...