对于这个教程，我建议你只使用最简单的工具。例如：Notepad（在windows里），TextEdit（在Mac上）或是KEdit（在KDE里）就可以了。一旦你了解这个原理，你就会想要切换到更高级的工具，甚至是商业程序，如Style Master，Dreamweaver或GoLive。但对于你的第一个CSS样式表，最好不要因为使用太多的高级功能而分心。
不要使用文字处理器，如Microsoft Word或OpenOffice。它们通常制作出网络浏览器不能读取文件。对于HTML和CSS，我们需要简单的纯文本文件.
第一步打开你的文本编辑器（Notepad，TextEdit，KEdit，或是任何你喜欢的文本编辑器），在一个空的窗口开始，输入以下的内容：
<！DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一个样式页面</title>
</head>
<body>
<！--目录-->
<ul class=“navbar”>
<li><a href=“index.html”>首页</a>
<li><a href=“musings.html”>连接1</a>
<li><a href=“town.html”>连接2</a>
<li><a href=“links.html”>连接3</a>
</ul>
<！--主要内容-->
<h1>我的第一个样式页面</h1>
<p>欢迎来到我的样式页面！
<p>这里没有图片，但至少有CSS样式.有连接，但只是为了举例和演示，并不能带你到任何地方…
<p>这只是个例子，好像没什么好写.
<！--签名和日期-->
<address>2004年4月5日制作</address>
</body>
</html>
事实上，你不需要输入它：你可以从这个网页复制并粘贴进编辑器。
（如果你在Mac上使用TextEdit，不要忘记告诉TextEdit文本确实是纯文本，通过转到格式菜单并选择“Make plain text”。）
Alert！Advanced:上面HTML文件的第一行告诉浏览器HTML的类型（DOCTYPE意思是文档类型）。在这个案例中，它是HTML 4.01版本。
在<和>里的单词叫标签，像你看能到的，这文档包含<html>和</html>标签。

在<head>和</head>间有一个位置是给没有显示在屏幕上各个种类的信息的。目前为止，它包含文档的标题，但之后我们也会在这里加上CSS样式表。
<body>是实际文档文本所在之处。原则上，除了在<！--和-->里作为对它们本身注释的内容不会显示，这里的所有内容都会被显示。浏览器会忽略它。
在该示例中的标签，<ul>介绍了一个“无次序列表”，例如：条目没有编号的列表。<li>是“列表条目”的开始。<p>是“段”。还有<a>是创建超链接的“锚点”。
the HTML source shown inside KEdit
编辑器展示了HTML源。
Alert！Advanced:如果你想知道在<…>里的名字是什么意思，一个好的开始地方是着手从HTML开始。但是只有一些关于我们示例HTML页面的单词。
“ul”是一个每个条目都有一个超链接的列表。这会作为我们的“站点导航菜单”连接到我们（超链接）网站的其它页面。想必，我们网站的所有页面都有一个类似的菜单。
“h1”和“p”元素形成这个页面独特的内容，而底部的签名（“address”）也是和网站上所有的页面是类似的。
注意，我没有关闭“li”和“p”元素。在HTML里（但不是在XHTML里），允许忽略</li>和</p>标签，这就是我在这里做的，为了使得文本稍微容易读一点。但是你可以加上它们，如果你喜欢的话。
让我们假设这是要成为一个有许多类似页面的网站上的一个页面。对当前网页来说很普通，此页面有一个菜单，在超链接站点，一些独特的内容和签名上炼接到其它页面上去。
现在从文件菜单里标明“另存为……”，导入你想把它放入的一个目录/文件夹里（桌面也可以），再把文件存为“mypage.html”。先不要关掉编辑器，我们还会需要它。
（如果你在Mac OS X 10.4前的版本上使用TextEdit，你会看到一个选项“不要附加保存.txt扩展名”的存档对话框。标明那个选项，因为名字“mypage.html”已经包含了一个扩展名。更新的版本的TextEdit会让.html自动扩展。）
接下来，在浏览器里打开文件。你可以按照下面的做：用你的文件管理器（Windows Explorer，Finder或Konqueror）找到文件，再点击或双击“mypage.html”文件。它就会在你默认的网络浏览器里打开。（如果不可以，就打开你的浏览器，把文件拖进来。）
像你看到的那样，页面看起来非常沉闷……
第二步，添加一些颜色
你可能看到一些白色背景里的黑色文本，但它是取决于浏览器如何配置的。所以，我们能做的让页面更加时新的一件简单的事情就是添加一些颜色。（让浏览器开着，我们之后会再用到它。）
我们从嵌在HTML文件里的样式表开始。然后，我们会把HTML和CSS放进单独的文件里。单独的文件很好，因为相对于复合的HTML文件，它让相同的样
第二步，添加一些颜色
你可能看到一些白色背景里的黑色文本，但它是取决于浏览器如何配置的。所以，我们能做的让页面更加时新的一件简单的事情就是添加一些颜色。（让浏览器开着，我们之后会再用到它。）
我们从嵌在HTML文件里的样式表开始。然后，我们会把HTML和CSS放进单独的文件里。单独的文件很好，因为相对于复合的HTML文件，它让相同的样式表使用起来更简单：你只需要编写样式表一遍。但是对于该步骤，我们仅仅保持所有的内容在一个文件里。

我们需要添加一个<style>元素到HTML文件中。样式表会在此元素里。所以回到编辑器窗口，再在HTML文件的抬头部分添加下面的五行。要添加的行用红色的显示出来了。
<！DOCTYPE html PUBLIC“-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>我的第一个样式页面</title>
<style type=“text/css”>
body {
color: purple；
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
第一行说的是，这是一个样式表，并且它是用CSS（“text/css”）编写的。第二行说的是，我们为“body”元素添加了样式。第三行设定了文本的颜色是紫色，还有接下来一行设定了背景是一种泛绿的黄色。
Alert！Advanced:CSS里的样式表是由规则组成。每条规则有三个部分：
选择器（在示例里：“body”），告诉浏览器文档的哪个部分受规则影响了；
属性（在示例里：'color''和'background-color'都是属性），规定了布局的什么方面被设置了；
还有值（'purple'和'#d8da3d'）给出了样式属性的值。
我们要设置两个属性，因此我们要做两个单独的规则：
body { color: purple }
body { background-color: #d8da3d }
但是因为两个规则都都会影响主体，我们只要输入一次“body”，再把属性和值放在一起。更多的选项，请看第2章Lie & Bos。
主体元素的背景也就是整个文档的背景。我们没有把任何明确的背景给任何其它的元素（p，li，address……），所以默认它们会没有（或，会是透明的）。'color '属性设置body元素文本的颜色，但是主体内的其它元素都要沿袭那种颜色，除非明确的覆盖。（我们之后会添加其它颜色。）
现在保存文件（从菜单里选用“保存”）再回到浏览窗口。如果你按“刷新”键，显示就会从“沉闷”的页面变成有色彩（虽然还是相当沉闷）的页面。除了顶端的连接列表，文本应该是带有泛绿的黄色背景的紫色文本。
Screenshot of the colored page in Konqueror

一个浏览器在添加了一些颜色后是如何显示页面的。
Alert！Advanced:在CSS里颜色有多种方法来规定。此示例展示了它们的两种方法：通过名称（“purple”）和通过十六进制代码（“#d8da3d”）。颜色的名称大约有140种，而十六进制代码有超过16，000，000种颜色。添加一种样式表解释了更多关于代码的详情。
第三步：添加字体
另外一件容易做的事情是，为页面多种元素的字体制造一些区别。因此让我们设置文本为“Georgia”字体，但除了h1标题，我们会用“Helvetica”。
在网上，你不能确定你的读者电脑上用的是什么字体，所以，我们也添加一些替代方案：如果没有Georgia，Times New Roman或Times也可以，如果所有的都不行，浏览器会使用任何衬线字体。如果Helvetica缺失，Geneva，Arial和sunSans-Regular在形状上是很相似的，又如果没有这些运作，浏览器会选择任何其它无衬线的字体。

html运用以及工具的更多相关文章

  1. Unity3d入门 - 关于unity工具的熟悉

    上周由于工作内容较多,花在unity上学习的时间不多,但总归还是学习了一些东西,内容如下: .1 根据相关的教程在mac上安装了unity. .2 学习了unity的主要的工具分布和对应工具的相关的功 ...

  2. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  3. 应用工具 .NET Portability Analyzer 分析迁移dotnet core

    大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易.如果您创建与 .NET Core 兼容的.NET 标准库,那么现在比以往任何时候 ...

  4. .NetCore中的日志（2）集成第三方日志工具

    .NetCore中的日志(2)集成第三方日志工具 0x00 在.NetCore的Logging组件中集成NLog 上一篇讨论了.NetCore中日志框架的结构,这一篇讨论一下.NetCore的Logg ...

  5. dll文件32位64位检测工具以及Windows文件夹SysWow64的坑

    自从操作系统升级到64位以后,就要不断的需要面对32位.64位的问题.相信有很多人并不是很清楚32位程序与64位程序的区别,以及Program Files (x86),Program Files的区别 ...

  6. Java基础Map接口+Collections工具类

    1.Map中我们主要讲两个接口 HashMap  与   LinkedHashMap (1)其中LinkedHashMap是有序的  怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...

  7. 渗透测试工具BurpSuite做网站的安全测试（基础版）

    渗透测试工具BurpSuite做网站的安全测试(基础版) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习网址: https://t0data.gitbooks.io/burpsuite/c ...

  8. CorelDRAW X8 如何破解激活（附国际版安装包+激活工具） 2016-12-15

    之前有位搞平面的好友“小瘦”说CDR X8无法破解,只能用X7.呃……呃……呃……好像是的 其实CDR8难激活主要在于一个点“没有离线激活了,只可以在线激活”,逆天不是专供逆向的,当然没能力去破解,这 ...

  9. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  10. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

随机推荐

  1. vue入门 vue与react和Angular的关系和区别

    一.为什么学习vue.js vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/ ...

  2. MBProgressHUD各种样式用法

    demo 来源: https://github.com/jdg/MBProgressHUD/ p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px ...

  3. 关于vue-clidown到本地后，拷贝文件库到另外一台电脑上npm run dev编译报错的处理

    这些天自己在用vue-cli项目,在家里的电脑下下来后写了一些demo,拿到公司继续开发的时候发现删除node_modules文件,运行npm install和npm run 百度,搜狗了好久都没有找 ...

  4. 学习ASP.NET MVC(十一)——分页

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList. ...

  5. 【转】Django HTTP请求的处理流程

    Django 和其他 Web 框架的 HTTP 处理的流程大致相同,Django 处理一个 Request 的过程是首先通过中间件,然后再通过默认的 URL 方式进行的.我们可以在 Middlewar ...

  6. Python的.py文件打包成exe可执行文件

    前几天做了几个简单的爬虫python程序,于是就想做个窗口看看效果. 首先是,窗口的话,以前没怎么接触过,就先考虑用Qt制作简单的ui.这里用前面sinanews的爬虫脚本为例,制作一个获取当天sin ...

  7. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  8. 用PHPExcel类读取excel文件的内容

    这里对PHPExcel类不做介绍,有兴趣的朋友可以自己查阅资料 在classes文件夹下有个PHPExcel.php文件,这个文件是这个类库的主要入口文件,在用之前,要引入这个类 其他的类,在此类中会 ...

  9. 【Yii系列】Yii2.0基础框架

    缘起 因为一个月的短暂停留,我在给朋友搞事情,所以Yii系列的文章耽搁了很长时间,现在又重拾当时的知识,给大伙好好撸下这一系列的博客 提起Yii,虽然是国外的开发者搞的,但是它的作者是华人,这才是让我 ...

  10. 修改mysql root账号密码

    一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password "test123"E ...