整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

小白H5成长之路4：还需要学习什么备用知识？

小白H5成长之路4：还需要学习什么备用知识？

“小白，HTML标签看完了么？文档对象模型看了么？”

“看了，我终于知道你昨天问我的那个关于网页结构的问题了，原来根据文档对象模型，网页就是一个对象嵌套的结构，最外层是html标签，里面是head和body标签，head和body里面又有各自的子标签，可以一直嵌套。”

“嗯，大概就是这个意思，好了现在你打开WebStorm软件，新建一个项目，项目的位置你看着设定就可以了，创建好项目以后我告你第一步怎么做。”

“我创建了一个mylearn项目，现在我该怎么做呢？”

“在mylearn上面点右键，新建一个html页面”

“创建好以后，看一下HTML文档的结构，是不是跟你之前看的DOM模型一致？”

“这里面的几个标签你应该都认识吧？”，老朱说到。

“认识，head是网页的头部对象，body是网页的主体部分。title是网页的标题。”

“好了，给title设定一个标题吧！比如‘我的H5第一课’，设定好标题以后在当前页面里面放一个div层上去，并且给他一个id号main”。

“好嘞，马上去办~”，小白兴奋的开始了他的第一次动手学习。

小白做完以后找到老朱，“朱哥，做好了！”

老朱看完以后对小白说：“我说的要求你已经实现了，可是你有没有注意在你创建的页面中，默认的meta和title标签都跟他们的父标签有一定的缩进？在我们写标签的时候一定要注意这个问题，每个级别的标签缩进距离都要有区分。你把光标移到div前面，点一下Tab键就可以了。”

“好了，在你的html页面上点右键，选择浏览器中查看，然后选择chrome浏览器，看看效果吧！”

“网页打开了，除了网页标题是我的H5第一课，整个网页都是空的！”

“好的，今天就这样吧！”

小白很惊讶，“怎么今天就让我做了一个空的页面啊，我感觉什么都没干啊~”

“小白，你今天已经学不少东西了，你用WebStorm创建了项目、在项目中创建了Html页面、了解了HTML标签的缩进、还在浏览器中查看了这个页面，看上去没有什么技术含量，可这些都是你以后会经常碰到的事情，我希望你能把今天学的这点东西好好练习一下，另外下午有时间把CSS看一下，不用记住CSS每个属性怎么写，你了解一下CSS能控制什么样式，可以用在页面中什么地方就可以了。”

想学H5的朋友可以关注老炉，您的关注是我持续更新《小白H5成长之路》的动力！

译自： https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar

译者： MjSeven

在一个美好的夜晚，你的肚子拒绝消化你在晚餐吃的大块披萨，所以你不得不在睡梦中冲进洗手间。

在浴室里，当你在思考为什么会发生这种情况时，你听到一个来自通风口的低沉声音：“嘿，我是蝙蝠侠。”

这时，你会怎么做呢？

在你恐慌并处于关键时刻之前，蝙蝠侠说：“我需要你的帮助。我是一个超级极客，但我不懂 HTML。我需要用 HTML 写一封情书，你愿意帮助我吗？”

谁会拒绝蝙蝠侠的请求呢，对吧？所以让我们用 HTML 来写一封蝙蝠侠的情书。

你的第一个 HTML 文件

HTML 网页与你电脑上的其它文件一样。就同一个 .doc 文件以 MS Word 打开，.jpg 文件在图像查看器中打开一样，一个 .html 文件在浏览器中打开。

那么，让我们来创建一个 .html 文件。你可以在 Notepad 或其它任何编辑器中完成此任务，但我建议使用 VS Code。 在这里下载并安装 VS Code 。它是免费的，也是我唯一喜欢的微软产品。

在系统中创建一个目录，将其命名为 “HTML Practice”（不带引号）。在这个目录中，再创建一个名为 “Batman’s Love Letter”（不带引号）的目录，这将是我们的项目根目录。这意味着我们所有与这个项目相关的文件都会在这里。

打开 VS Code，按下 ctrl+n 创建一个新文件，按下 ctrl+s 保存文件。切换到 “Batman’s Love Letter” 文件夹并将其命名为 “loveletter.html”，然后单击保存。

现在，如果你在文件资源管理器中双击它，它将在你的默认浏览器中打开。我建议使用 Firefox 来进行 web 开发，但 Chrome 也可以。

让我们将这个过程与我们已经熟悉的东西联系起来。还记得你第一次拿到电脑吗？我做的第一件事是打开 MS Paint 并绘制一些东西。你在 Paint 中绘制一些东西并将其另存为图像，然后你可以在图像查看器中查看该图像。之后，如果要再次编辑该图像，你在 Paint 中重新打开它，编辑并保存它。

我们目前的流程非常相似。正如我们使用 Paint 创建和编辑图像一样，我们使用 VS Code 来创建和编辑 HTML 文件。就像我们使用图像查看器查看图像一样，我们使用浏览器来查看我们的 HTML 页面。

HTML 中的段落

我们有一个空的 HTML 文件，以下是蝙蝠侠想在他的情书中写的第一段。

“After all the battles we fought together, after all the difficult times we saw together, and after all the good and bad moments we’ve been through, I think it’s time I let you know how I feel about you.”

复制这些到 VS Code 中的 loveletter.html。单击 “View -> Toggle Word Wrap (alt+z)” 自动换行。

保存并在浏览器中打开它。如果它已经打开，单击浏览器中的刷新按钮。

瞧！那是你的第一个网页！

我们的第一段已准备就绪，但这不是在 HTML 中编写段落的推荐方法。我们有一种特定的方法让浏览器知道一个文本是一个段落。

如果你用 <p> 和 </p> 来包裹文本，那么浏览器将识别 <p> 和 </p> 中的文本是一个段落。我们这样做：

<p>After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.</p>

通过在 <p> 和 </p>中编写段落，你创建了一个 HTML 元素。一个网页就是 HTML 元素的集合。

让我们首先来认识一些术语：<p> 是开始标签，</p> 是结束标签，“p” 是标签名称。元素开始和结束标签之间的文本是元素的内容。

“style” 属性

在上面，你将看到文本覆盖屏幕的整个宽度。

我们不希望这样。没有人想要阅读这么长的行。让我们设定段落宽度为 550px。

我们可以通过使用元素的 style 属性来实现。你可以在其 style 属性中定义元素的样式（例如，在我们的示例中为宽度）。以下行将在 p 元素上创建一个空样式属性：

<p style="">...</p>

你看到那个空的 "" 了吗？这就是我们定义元素外观的地方。现在我们要将宽度设置为 550px。我们这样做：

<p style="width:550px;">

After all the battles we fought together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

我们将 width 属性设置为 550px，用冒号 : 分隔，以分号 ; 结束。

另外，注意我们如何将 <p> 和 </p> 放在单独的行中，文本内容用一个制表符缩进。像这样设置代码使其更具可读性。

HTML 中的列表

接下来，蝙蝠侠希望列出他所钦佩的人的一些优点，例如：

You complete my darkness with your light. I love:

- the way you see good in the worst things

- the way you handle emotionally difficult situations

- the way you look at Justice

I have learned a lot from you. You have occupied a special place in my heart over time.

这看起来很简单。

让我们继续，在 </p> 下面复制所需的文本：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

- the way you see good in the worse

- the way you handle emotionally difficult situations

- the way you look at Justice

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新浏览器。



哇！这里发生了什么，我们的列表在哪里？

如果你仔细观察，你会发现没有显示换行符。在代码中我们在新的一行中编写列表项，但这些项在浏览器中显示在一行中。

如果你想在 HTML（新行）中插入换行符，你必须使用 <br>。让我们来使用 <br>，看看它长什么样：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love: <br>

- the way you see good in the worse <br>

- the way you handle emotionally difficult situations <br>

- the way you look at Justice <br>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新：



好的，现在它看起来就像我们想要的那样！

另外，注意我们没有写一个 </br>。有些标签不需要结束标签（它们被称为自闭合标签）。

还有一件事：我们没有在两个段落之间使用 <br>，但第二个段落仍然是从一个新行开始，这是因为 <p> 元素会自动插入换行符。

我们使用纯文本编写列表，但是有两个标签可以供我们使用来达到相同的目的：<ul> and <li>。

让我们解释一下名字的意思：ul 代表 无序列表(Unordered List)，li 代表 列表项目(List Item)。让我们使用它们来展示我们的列表：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

在复制代码之前，注意差异部分：

  • 我们删除了所有的 <br>，因为每个 <li> 会自动显示在新行中
  • 我们将每个列表项包含在 <li> 和 </li> 之间
  • 我们将所有列表项的集合包裹在 <ul> 和 </ul> 之间
  • 我们没有像 <p> 元素那样定义 <ul> 元素的宽度。这是因为 <ul> 是 <p> 的子节点，<p> 已经被约束到 550px，所以 <ul> 不会超出这个范围。

让我们保存文件并刷新浏览器以查看结果：



你会立即注意到在每个列表项之前显示了重点标志。我们现在不需要在每个列表项之前写 “-”。

经过仔细检查，你会注意到最后一行超出 550px 宽度。这是为什么？因为 HTML 不允许 <ul> 元素出现在 <p> 元素中。让我们将第一行和最后一行放在单独的 <p> 元素中：

<p style="width:550px;">

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p style="width:550px;">

You complete my darkness with your light. I love:

</p>

<ul style="width:550px;">

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p style="width:550px;">

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

保存并刷新。

注意，这次我们还定义了 <ul> 元素的宽度。那是因为我们现在已经将 <ul> 元素放在了 <p> 元素之外。

定义情书中所有元素的宽度会变得很麻烦。我们有一个特定的元素用于此目的：<div> 元素。一个 <div> 元素就是一个通用容器，用于对内容进行分组，以便轻松设置样式。

让我们用 <div> 元素包装整个情书，并为其赋予宽度：550px 。

<div style="width:550px;">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

棒极了，我们的代码现在看起来简洁多了。

HTML 中的标题

到目前为止，蝙蝠侠对结果很高兴，他希望在情书上标题。他想写一个标题： “Bat Letter”。当然，你已经看到这个名字了，不是吗？:D

你可以使用 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6> 标签来添加标题，<h1> 是最大的标题和最主要的标题，<h6> 是最小的标题。



让我们在第二段之前使用 <h1> 做主标题和一个副标题：

<div style="width:550px;">

<h1>Bat Letter</h1>

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

保存，刷新。



HTML 中的图像

我们的情书尚未完成，但在继续之前，缺少一件大事：蝙蝠侠标志。你见过是蝙蝠侠的东西但没有蝙蝠侠的标志吗？

并没有。

所以，让我们在情书中添加一个蝙蝠侠标志。

在 HTML 中包含图像就像在一个 Word 文件中包含图像一样。在 MS Word 中，你到 “菜单 -> 插入 -> 图像 -> 然后导航到图像位置为止 -> 选择图像 -> 单击插入”。

在 HTML 中，我们使用 <img> 标签让浏览器知道我们需要加载的图像，而不是单击菜单。我们在 src 属性中写入文件的位置和名称。如果图像在项目根目录中，我们可以简单地在 src 属性中写入图像文件的名称。

在我们深入编码之前，从 这里 下载蝙蝠侠标志。你可能希望裁剪图像中的额外空白区域。复制项目根目录中的图像并将其重命名为 “bat-logo.jpeg”。

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

我们在第 3 行包含了 <img> 标签。这个标签也是一个自闭合的标签，所以我们不需要写 </img>。在 src 属性中，我们给出了图像文件的名称。这个名称应与图像名称完全相同，包括扩展名（.jpeg）及其大小写。

保存并刷新，查看结果。



该死的！刚刚发生了什么？

当使用 <img> 标签包含图像时，默认情况下，图像将以其原始分辨率显示。在我们的例子中，图像比 550px 宽得多。让我们使用 style 属性定义它的宽度：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

</div>

你会注意到，这次我们定义宽度使用了 “%” 而不是 “px”。当我们在 “%” 中定义宽度时，它将占据父元素宽度的百分比。因此，100% 的 550px 将为我们提供 550px。

保存并刷新，查看结果。



太棒了！这让蝙蝠侠的脸露出了羞涩的微笑 :)。

HTML 中的粗体和斜体

现在蝙蝠侠想在最后几段中承认他的爱。他有以下文本供你用 HTML 编写：

“I have a confession to make

It feels like my chest does have a heart. You make my heart beat. Your smile brings a smile to my face, your pain brings pain to my heart.

I don’t show my emotions, but I think this man behind the mask is falling for you.”

当阅读到这里时，你会问蝙蝠侠：“等等，这是给谁的？”蝙蝠侠说：

“这是给超人的。”



你说：哦！我还以为是给神奇女侠的呢。

蝙蝠侠说：不，这是给超人的，请在最后写上 “I love you Superman.”。

好的，我们来写：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest does have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p>I love you Superman.</p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

这封信差不多完成了，蝙蝠侠另外想再做两次改变。蝙蝠侠希望在最后段落的第一句中的 “does” 一词是斜体，而 “I love you Superman” 这句话是粗体的。

我们使用 <em> 和 <strong> 以斜体和粗体显示文本。让我们来更新这些更改：

<div style="width:550px;">

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg" style="width:100%">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>



HTML 中的样式

你可以通过三种方式设置样式或定义 HTML 元素的外观：

  • 内联样式：我们使用元素的 style 属性来编写样式。这是我们迄今为止使用的，但这不是一个好的实践。
  • 嵌入式样式：我们在由 <style> 和 </style> 包裹的 “style” 元素中编写所有样式。
  • 链接样式表：我们在具有 .css 扩展名的单独文件中编写所有元素的样式。此文件称为样式表。

让我们来看看如何定义 <div> 的内联样式：

<div style="width:550px;">

我们可以在 <style> 和 </style> 里面写同样的样式：

div{

width:550px;

}

在嵌入式样式中，我们编写的样式是与元素分开的。所以我们需要一种方法来关联元素及其样式。第一个单词 “div” 就做了这样的活。它让浏览器知道花括号 {...} 里面的所有样式都属于 “div” 元素。由于这种语法确定要应用样式的元素，因此它称为一个选择器。

我们编写样式的方式保持不变：属性（width）和值（550px）用冒号（:）分隔，以分号（;）结束。

让我们从 <div> 和 <img> 元素中删除内联样式，将其写入 <style> 元素：

<style>

div{

width:550px;

}

img{

width:100%;

}

</style>

<div>

<h1>Bat Letter</h1>

<img src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

保存并刷新，结果应保持不变。

但是有一个大问题，如果我们的 HTML 文件中有多个 <div> 和 <img> 元素该怎么办？这样我们在 <style> 元素中为 div 和 img 定义的样式就会应用于页面上的每个 div 和 img。

如果你在以后的代码中添加另一个 div，那么该 div 也将变为 550px 宽。我们并不希望这样。

我们想要将我们的样式应用于现在正在使用的特定 div 和 img。为此，我们需要为 div 和 img 元素提供唯一的 id。以下是使用 id 属性为元素赋予 id 的方法：

<div id="letter-container">

以下是如何在嵌入式样式中将此 id 用作选择器：

#letter-container{

...

}

注意 # 符号。它表示它是一个 id，{...} 中的样式应该只应用于具有该特定 id 的元素。

让我们来应用它：

<style>

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

</style>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

HTML 已经准备好了嵌入式样式。

但是，你可以看到，随着我们包含越来越多的样式，<style></style> 将变得很大。这可能很快会混乱我们的主 HTML 文件。

因此，让我们更进一步，通过将 <style> 标签内的内容复制到一个新文件来使用链接样式。

在项目根目录中创建一个新文件，将其另存为 “style.css”：

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

我们不需要在 CSS 文件中写 <style> 和 </style>。

我们需要使用 HTML 文件中的 <link> 标签来将新创建的 CSS 文件链接到 HTML 文件。以下是我们如何做到这一点：

<link rel="stylesheet" type="text/css" href="style.css">

我们使用 <link> 元素在 HTML 文档中包含外部资源，它主要用于链接样式表。我们使用的三个属性是：

  • rel：关系。链接文件与文档的关系。具有 .css 扩展名的文件称为样式表，因此我们保留 rel=“stylesheet”。
  • type：链接文件的类型；对于一个 CSS 文件来说它是 “text/css”。
  • href：超文本参考。链接文件的位置。

link 元素的结尾没有 </link>。因此，<link> 也是一个自闭合的标签。

<link rel="gf" type="cute" href="girl.next.door">

如果只是得到一个女朋友，那么很容易：D

可惜没有那么简单，让我们继续前进。

这是我们 “loveletter.html” 的内容：

<link rel="stylesheet" type="text/css" href="style.css">

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

“style.css” 内容：

#letter-container{

width:550px;

}

#header-bat-logo{

width:100%;

}

保存文件并刷新，浏览器中的输出应保持不变。

一些手续

我们的情书已经准备好给蝙蝠侠，但还有一些正式的片段。

与其他任何编程语言一样，HTML 自出生以来（1990 年）经历过许多版本，当前版本是 HTML5。

那么，浏览器如何知道你使用哪个版本的 HTML 来编写页面呢？要告诉浏览器你正在使用 HTML5，你需要在页面顶部包含 <!DOCTYPE html>。对于旧版本的 HTML，这行不同，但你不需要了解它们，因为我们不再使用它们了。

此外，在之前的 HTML 版本中，我们曾经将整个文档封装在 <html></html> 标签内。整个文件分为两个主要部分：头部在 <head></head> 里面，主体在 <body></body> 里面。这在 HTML5 中不是必须的，但由于兼容性原因，我们仍然这样做。让我们用 <Doctype>, <html>、 <head> 和 <body> 更新我们的代码：

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

</body>

</html>

主要内容在 <body> 里面，元信息在 <head> 里面。所以我们把 <div> 保存在 <body> 里面并加载 <head> 里面的样式表。

保存并刷新，你的 HTML 页面应显示与之前相同的内容。

HTML 的标题

我发誓，这是最后一次改变。

你可能已经注意到选项卡的标题正在显示 HTML 文件的路径：



我们可以使用 <title> 标签来定义 HTML 文件的标题。标题标签也像链接标签一样在 <head> 内部。让我们我们在标题中加上 “Bat Letter”：

<!DOCTYPE html>

<html>

<head>

<title>Bat Letter</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div id="letter-container">

<h1>Bat Letter</h1>

<img id="header-bat-logo" src="bat-logo.jpeg">

<p>

After all the battles we faught together, after all the difficult times we saw together, after all the good and bad moments we've been through, I think it's time I let you know how I feel about you.

</p>

<h2>You are the light of my life</h2>

<p>

You complete my darkness with your light. I love:

</p>

<ul>

<li>the way you see good in the worse</li>

<li>the way you handle emotionally difficult situations</li>

<li>the way you look at Justice</li>

</ul>

<p>

I have learned a lot from you. You have occupied a special place in my heart over the time.

</p>

<h2>I have a confession to make</h2>

<p>

It feels like my chest <em>does</em> have a heart. You make my heart beat. Your smile brings smile on my face, your pain brings pain to my heart.

</p>

<p>

I don't show my emotions, but I think this man behind the mask is falling for you.

</p>

<p><strong>I love you Superman.</strong></p>

<p>

Your not-so-secret-lover, <br>

Batman

</p>

</div>

</body>

</html>

保存并刷新，你将看到在选项卡上显示的是 “Bat Letter” 而不是文件路径。

蝙蝠侠的情书现在已经完成。

恭喜！你用 HTML 制作了蝙蝠侠的情书。



我们学到了什么

我们学习了以下新概念：

  • 一个 HTML 文档的结构
  • 在 HTML 中如何写元素（<p></p>）
  • 如何使用 style 属性在元素内编写样式（这称为内联样式，尽可能避免这种情况）
  • 如何在 <style>...</style> 中编写元素的样式（这称为嵌入式样式）
  • 在 HTML 中如何使用 <link> 在单独的文件中编写样式并链接它（这称为链接样式表）
  • 什么是标签名称，属性，开始标签和结束标签
  • 如何使用 id 属性为一个元素赋予 id
  • CSS 中的标签选择器和 id 选择器

我们学习了以下 HTML 标签：

  • <p>：用于段落
  • <br>：用于换行
  • <ul>、<li>：显示列表
  • <div>：用于分组我们信件的元素
  • <h1>、<h2>：用于标题和子标题
  • <img>：用于插入图像
  • <strong>、<em>：用于粗体和斜体文字样式
  • <style>：用于嵌入式样式
  • <link>：用于包含外部样式表
  • <html>：用于包裹整个 HTML 文档
  • <!DOCTYPE html>：让浏览器知道我们正在使用 HTML5
  • <head>：包裹元信息，如 <link> 和 <title>
  • <body>：用于实际显示的 HTML 页面的主体
  • <title>：用于 HTML 页面的标题

我们学习了以下 CSS 属性：

  • width：用于定义元素的宽度
  • CSS 单位：“px” 和 “%”

朋友们，这就是今天的全部了，下一个教程中见。

作者简介：开发者 + 作者 | supersarkar.com | twitter.com/supersarkar

via: https://medium.freecodecamp.org/for-your-first-html-code-lets-help-batman-write-a-love-letter-64c203b9360b

作者： Kunal Sarkar 译者： MjSeven 校对： wxy

本文由 LCTT 原创编译， Linux中国 荣誉推出

点击“了解更多”可访问文内链接

介

CSS 是什么？

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。

属性和属性值用冒号隔开，以分号结尾。

CSS 四种引入方式：

1.行内式

行内式是在标签的style属性中设定CSS样式。

<div style="..."></div>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。

<head>

    ...

    <style type="text/css">

        ...此处写CSS样式

    </style>

</head>

3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。

导入式会在整个网页装载完后再装载CSS文件。

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此处注意.css文件的路径

    </style>

</head>

4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。

链接式会以网页文件主体装载前装载CSS文件。

<head>

    ...

    <link href="My.css" rel="stylesheet" type="text/css">

</head>

样式应用顺序：

  • 行内样式优先级最高
  • 针对相同的样式属性，不同的样式属性将以合并的方式呈现
  • 相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
  • !important 指定样式规则应用最优先
.nick {
    color: yellow !important;
}

选择器（Selector）

基本选择器：

1.通用元素选择器

* 表示应用到所有的标签。

* {color: yellow}

2.标签选择器

匹配所有使用 div 标签的元素（可以匹配所有标签）

div {color: yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。

语法：#ID名{样式}（ID名不能以数字开头）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

组合选择器：

1.多元素选择器

同时匹配h3,h4标签，之间用逗号分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔。

    div p {color: yellow;}
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素选择器

匹配所有div标签里嵌套的子P标签，之间用>分隔。

    div > p {color: yellow;}
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。

    div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>

属性选择器：

1.[title] & P[title]

设置所有具有title属性的标签元素；

设置所有具有title属性的P标签元素。

    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]

设置所有title属性等于“Nick”的标签元素。

    [title="Nick"]
    {
        color: yellow;
    }
<p title="Nick">Nick</p>

3.[title~=Nick]

设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

    [title~="Nick"]
    {
        color: yellow;
    }
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"Nick"开头的标签元素。

例：lang属性："en"、"en-us"、"en-gb"等等

    [title|="Nick"]
    {
        color: yellow;
    }
 <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

设置属性值以指定值开头的每个标签元素。

    [title^="Nick"]
    {
        color: yellow;
    }
<p title="NickJenny">Nick</p>

6.[title$=Nick]

设置属性值以指定值结尾的每个标签元素。

    [title$="Nick"]
    {
        color: yellow;
    }
<p title="JennyNick">Nick</p>

7.[title*=Nick]

设置属性值中包含指定值的每个元素

[title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

伪类选择器：

1. link、hover、active、visited

  • a:link（未访问的链接状态）,用于定义了常规的链接状态。
  • a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
  • a:active（在链接上按下鼠标时的状态）。
  • a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
    a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red} 
<a href="#">Nick</a>

2. before、after

  • P:before 在每个<p>元素的内容之前插入内容;
  • P:after 在每个<p>元素的内容之后插入内容。
    p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
 <p> Nick </p>　　

常用属性

1. 颜色属性：

color

  • HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
  • RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
  • RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
  • HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
  • HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）

transparent

  • 全透明，使用方式：color: transparent;

opacity

  • 元素的透明度，语法：opacity: 0.5;
  • 属性值在0.0到1.0范围内，0表示透明，1表示不透明。
  • filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。

2. 字体属性:

font-style: 用于规定斜体文本

  • normal 文本正常显示
  • italic 文本斜体显示
  • oblique 文本倾斜显示

font-weight: 设置文本的粗细

  • normal（默认）
  • bold（加粗）
  • bolder（相当于<strong>和<b>标签）
  • lighter （常规）
  • 100 ~ 900 整百（400=normal，700=bold）

font-size: 设置字体的大小

  • 默认值：medium
  • <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
  • <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
  • <percentage>百分比指定文字大小。
  • <length>用长度值指定文字大小，不允许负值。

font-family：字体名称

  • 使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

  • 语法：font：字体大小/行高 字体;（字体要在最后）

3. 文本属性:

white-space: 设置元素中空白的处理方式

  • normal：默认处理方式。
  • pre：保留空格，当文字超出边界时不换行
  • nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
  • pre-wrap：保留空格，当文字碰到边界时换行
  • pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行

direction: 规定文本的方向

  • ltr 默认，文本方向从左到右。
  • rtl 文本方向从右到左。

text-align: 文本的水平对齐方式

  • left
  • center
  • right

line-height: 文本行高

  • normal 默认

vertical-align: 文本所在行高的垂直对齐方式

  • baseline 默认
  • sub 垂直对齐文本的下标，和<sub>标签一样的效果
  • super 垂直对齐文本的上标，和<sup>标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本缩进

letter-spacing: 添加字母之间的空白

word-spacing: 添加每个单词之间的空白

text-transform: 属性控制文本的大小写

  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。

text-overflow: 文本溢出样式

  • clip 修剪文本。
  • ellipsis 显示省略符号...来代表被修剪的文本。
  • string 使用给定的字符串来代表被修剪的文本。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        div {
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁 索宁</div>
</body>
</html>

text-decoration: 文本的装饰

  • none 默认。
  • underline 下划线。
  • overline 上划线。
  • line-through 中线。

text-shadow：文本阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • text-shadow: 5px 5px 5px #888;

word-wrap：自动换行

  • word-wrap: break-word;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 150px;
            height: 160px;
            background-color: #FFA500;
            /*边框阴影*/
            box-shadow: 10px 10px 5px #888;
            /*自动换行*/
            word-wrap: break-word;
        }
        h1 {
            text-shadow: 5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <p>
        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
    </p>
    <h1>索宁</h1>
</body>
</html>　　　　

a {
    text-decoration: none;
    /*去除a标签下划线*/
}

4. 背景属性

background-color: 背景颜色

background-image 设置图像为背景

  • url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 图片地址
  • background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

background-position 设置背景图像的位置坐标

  • background-position: center center; 图片置中，x轴center，y轴center
  • 1px -195px 截取图片某部分，分别代表坐标x，y轴

background-repeat 设置背景图像不重复平铺

  • no-repeat 设置图像不重复，常用
  • round 自动缩放直到适应并填充满整个容器
  • space 以相同的间距平铺且填充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

  • background: url("o_ns.png") no-repeat 0 -196px;
  • background: url("o_ns.png") no-repeat center bottom 15px;
  • background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表属性

list-style-type: 列表项标志的类型

  • none 去除标志
  • decimal-leading-zero; 02.
  • square; 方框
  • circle; 空心圆
  • upper-alph; & disc; 实心圆

list-style-image：将图象设置为列表项标志

list-style-position：列表项标志的位置

  • inside
  • outside

list-style：缩写

页面布局

1. 边框

border-style：边框样式

  • solid 默认，实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

border-color：边框颜色

border-width：边框宽度

border-radius：圆角

  • 1个参数：四个角度应用
  • 2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上
  • 3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下
  • 4个参数：左上、右上、右下、左下（顺时针）

border: 简写

  • border: 2px yellow solid;

box-shadow：边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border:2px solid;
            border-radius:25px;
            width: 140px;
        }
    </style>
</head>
<body>
    <div>
         点赞哦！dear. 
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
    </div>
</body>
</html>

边框实现各种三角符号：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }
 
        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

2.★ 盒子模型

一个标准的盒子模型：

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

一个参数，应用于四边。

　 两个参数，第一个用于上、下，第二个用于左、右。

　 三个参数，第一个用于上，第二个用于左、右，第三个用于下。

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。

解决方法：
body {
    margin: 0;
}

3.★ display

  • none 不显示。
  • block 显示为块级元素。
  • inline 显示为内联元素。
  • inline-block 行内块元素（会保持块元素的高宽）。
  • list-item 显示为列表元素。

4. visibility

  • visible 元素可见
  • hidden 元素不可见
  • collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

5.★ float 浮动

让一行显示两个块级标签，会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

clear 清除浮动：

  • none : 默认值。允许两边都可以有浮动对象
  • left : 不允许左边有浮动对象
  • right : 不允许右边有浮动对象
  • both : 不允许两边有浮动对象

6. clip 剪裁图像

rect 剪裁定位元素：

  • auto 默认值，无剪切
  • 上-右-下-左（顺时针）的顺序提供四个偏移值
  • 区域外的部分是透明的
  • 必须指定 position:absolute;
  • 例：clip:rect(0px,60px,200px,0px);

7. overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

  • visible 默认值，内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

8.★ position 规定元素的定位类型

  • 通过以下四种属性进行定位：
  • left
  • top
  • right
  • bottom
  • z-index

9. z-index 元素层叠顺序

  • z-index 仅在定位元素上有效（例：position:absolute;）
  • 可以指定负数属性值（例：-1;）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
        .z-index2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
</body>
</html>

10. outline 边框轮廓

  • outline-width 轮廓宽度
  • outline-color 轮廓颜色
  • outline-style 轮廓样式

11. zoom 缩放比例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1">Nick 100%</div>
    <div class="zoom2">Nick 200%</div>
    <div class="zoom3">Nick 300%</div>
</body>
</html>

12. cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

url: 自定义光标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

Auto: 默认
Default: 默认
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

13. transform、transition 动画效果

transform 转换，变形

  • origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。
  • rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
  • skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
  • scale 缩放 transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。
  • translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 30px;
            width: 30px;
            background-color: yellow;
 
            /*transform-origin: 50px 50px;*/
            transform-origin: left;
            transform: rotate(50deg);
            /*transform: skew(50deg,50deg);*/
            /*transform: translate(50px,50px);*/
            /*transform: scale(2);*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


Transition 平滑过渡

  • transition-property： 变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
  • transition-duration： 变换持续时间
  • transition-timing-function： 变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
  • transition-delay： 变换延迟时间
  • transition： 缩写
#property 指定属性对应类型

1、color： 通过红、绿、蓝和透明度组件变换（每个数值单独处理），如：background-color，border-color，color，outline-color等CSS属性；

2、length：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等属性；

3、percentage：真实的数字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等属性；

4、integer 离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生，如：outline-offset，z-index等属性；

5、number真实的（浮点型）数值，如：zoom，opacity，font-weight等属性；

6、transform list。

7、rectangle：通过x、 y、 width和height（转为数值）变换，如：crop；

8、visibility：离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）属性，如：text-shadow；

10、gradient：通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画，如：background-image；

11、paint server (SVG)：只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似；

12、space-separated list of above：如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化；

13、a shorthand property：如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化。
#支持执行transition效果的属性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer


鼠标放在以下图片上，There will be a miracle：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .img-see-2016-7-2 {
            background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
            background-size: 660px;
            background-repeat: no-repeat;
            height: 300px;
            width: 600px;

            transition-duration: 30s;
            transition-timing-function: ease;
            transition-property: background-size;
        }
        .img-see-2016-7-2:hover {
            background-size: 2000px;
        }
    </style>
</head>
<body>
    <div class="img-see-2016-7-2"></div>
</body>
</html>

作者：suoning

原文链接：https://www.cnblogs.com/suoning/p/5625582.html


在线咨询
上一篇：聊聊视频会议系统中web端与客户端通信的关键技术设计
下一篇：CSS制作的优雅漂亮的圆形时钟

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 偃师市 宣化区 安龙县 新密市 紫金县 桑日县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服