HTML学习(四)样式
通过使用 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学习(四)样式的更多相关文章
- Expression Blend学习四控件
原文:Expression Blend学习四控件 Expression Blend制作自定义按钮 1.从Blend工具箱中添加一个Button,按住shift,将尺寸调整为125*125; 2.右键点 ...
- TweenMax动画库学习(四)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- SVG 学习<四> 基础API
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Android JNI学习(四)——JNI的常用方法的中文API
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- SCARA——OpenGL入门学习四(颜色)
OpenGL入门学习[四] 本次学习的是颜色的选择.终于要走出黑白的世界了~~ OpenGL支持两种颜色模式:一种是RGBA,一种是颜色索引模式. 无论哪种颜色模式,计算机都必须为每一个像素保存一些数 ...
- ZigBee学习四 无线+UART通信
ZigBee学习四 无线+UART通信 1) 协调器编程 修改coordinator.c文件 byte GenericApp_TransID; // This is the unique messag ...
- (转)SpringMVC学习(四)——Spring、MyBatis和SpringMVC的整合
http://blog.csdn.net/yerenyuan_pku/article/details/72231763 之前我整合了Spring和MyBatis这两个框架,不会的可以看我的文章MyBa ...
- Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档
0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- Python基础学习四
Python基础学习四 1.内置函数 help()函数:用于查看内置函数的用途. help(abs) isinstance()函数:用于判断变量类型. isinstance(x,(int,float) ...
随机推荐
- 如何使用Android中的OpenGL ES媒体效果
引自:http://www.2cto.com/kf/201506/404366.html Android的媒体效果框架允许开发者可以很容易的应用多种令人印象深刻的视觉效果到照片或视频之上.作为这个媒体 ...
- Ubuntu + Django + Nginx + uwsgi
环境 Ubuntu 14.04 Python 2.7 Django 1.8.4 1 安装Nginx sudo apt-get install nginx 测试 sudo /etc/init. ...
- POJ - 3062 Borg Maze
题目链接:http://poj.org/problem?id=3026 Svenskt Masterskap我程序员/ Norgesmesterskapet 2001 Description The ...
- 转:LoadRunner常用函数列表
Web相关函数 函 数 功 能 描 述 web_custom_request 用户可以通过该函数自行创建一个HTTP请求的函数 web_image 模拟用户单击图片操作的函数 web_link ...
- PHP递归算法的一个实例 帮助理解
递归函数为自调用函数,在函数体内直接或间接自己调用自己,但需要设置自调用的条件,若满足条件,则调用函数本身,若不满足则终止本函数的自调用,然后把目前流程的主控权交回给上一层函数来执行,可能这样给大家讲 ...
- hdu_2546_饭卡(01背包)
题目连接:hdu_2546_饭卡 题意:中文,不解释 题解:先拿5元来买最贵的,最后就是一个01背包,这里也算用到贪心的思想 #include<bits/stdc++.h> #define ...
- sphinx分域搜索【不】需要在conf文件中使用sql_field_string
请看sql_field_string的文档说明: # combined field plus attribute declaration (from a single column) # stores ...
- POJ 1821 单调队列+dp
题目大意:有K个工人,有n个墙,现在要给墙涂色.然后每个工人坐在Si上,他能刷的最大范围是Li,且必须是一个连续子区间,而且必须过Si,他刷完后能获得Pi钱 思路:定义dp[i][j]表示前i个人,涂 ...
- psy & obv
PSY和OBV 1,PSY心理线是投资者对股市涨跌产生心理波动的情绪指标.相反,当PSY曲线向下跌破PSYMA曲线后,为卖出时机..当PSY曲线向上突破PSYMA曲线后,开始向下回调至PSYMA曲线, ...
- myeclipse连接hadoop集群编程及问题解决
原以为搭建一个本地编程测试hadoop程序的环境很简单,没想到还是做得焦头烂额,在此分享步骤和遇到的问题,希望大家顺利. 一.要实现连接hadoop集群并能够编码的目的需要做如下准备: 1.远程had ...