静态页面制作:4HTML的样式简介

 

　　　　现在我们来说说样式，在上小节的最后我们看到了element.style这么一个东西。它其实就是设置元素样式的地方。

 

 

　　　　现在呢，我们需要在element.style的花括号中点击一下鼠标左键，你会发现出现一个输入框，可以输入东西了。

 

 

　　　　在这里我需要强调一个细节，那就是我在源代码的区域中是选中了"HomeWork Helper"" 标签，然后右侧就会显示与之对应的元素样式。

 

　　　　也就是说你点击不同的元素，就会有与之对应的元素样式设置，并不要误解这个元素样式设置是所有设置样式的地方。

 

　　　　现在设置样式的地方已经找到了，接下来我们就来看看如何设置样式。

 

 

　　　　框红框的一共有三个部分，我们首先来看一下右下方的element.style这部分，

 

　　　　在其中我们写了两行代码，分别是font-size和color。

 

 

　　　　font-size不难理解，通过字面我们也不难看出，这是设置字体大小的。

 

　　　　那么我们需要简单的说一下12px; px的全拼是pixel，即像素。

 

　　　　它不是自然界的长度单位。px是就是一张图片中最小的点，一张位图就是由这些点构成的。

 

　　　　1024px就是1024像素，最简单的你可以在windows桌面属性里的“设置”看到，

 

　　　　如果是1024×768，也就是说水平方向上有1024个点，垂直方向上有768个点。

 

　　　　谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。

 

　　　　如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。

 

　　　　所以，像素的大小是会“变”的，也称为“相对长度”。另外还需要强调的是“;”，

 

　　　　这个分好一定要写，而且必须是英文的分好，否则你是看不到任何效果的。

 

　　　　color：这里的color不是背景颜色，而是设置文字的颜色。

 

　　　　后面我们使用的颜色是采用16进制的颜色，如果大家使用过ps的话，就肯定能理解。

 

　　　　这里的颜色同样你也可以直接写对应的英文。例如color:red;

 

 

　　　　我们在来看一下上面的正文部分，我们发现HomeWork Helper的字体大小和颜色已经发生了变化。

 

　　　　这个变化就是因为我们在element.style中添加了东西导致的。

　　　　

　　　　最后我们在说一下，左下方的源代码区，我们发现在p标签中多出来很多代码，而且跟我们所设置的样式是一样的。

 

　　　　也就说我们我们在元素样式中的设置，就会影响代码的变化，代码的变化就会影响网页的变化。

 

　　　　而且我们发现这个书写格式跟我们之前学过的meta charset =“utf-8”标签设置属性是如出一辙。

 

 

　　　　但这里需要强调的一点是，我们的网页变化是一种假象。

 

　　　　为什么说是假象呢，就是因为如果你刷新网页，你就会发现网页并没有更新，而是恢复到最初没有样式的样子。

 

　　　　所以这里我们要清楚一件事，那就是我们刚刚在浏览器面板中的element.style中所设置的，

 

　　　　其实只是为了方便，为了让我们可以更直观的看到页面的变化所经常采用的方式。

 

　　　　但如果真正的想要改变网页，就需要我们回到sublime中填写刚刚的那段代码。

 

　　　　在回到sublime填写代码之前，我们先来说说样式。

 

　　　　对于样式而言，也是属性的一种，既然是属性，那它肯定也有属性名称，属性名称就是style（样式），

 

　　　　属性值当然就是各种样式了。我们来举个例子：

　　　　

　　　　上图是一个p标签，如果要为p标签添加样式的话，有两种方法，我们先说第一种方法。

 

 

　　　　第一种方法就是将style样式写在标签内部，在p标签的首标签中写上style=“各种样式”。

 

　　　　现在我们在说一下样式该怎么写。

　　　　

　　　　对于样式的书写，我们在上面已经做了解释。

 

　　　　这里还需要提醒大家一点的是，就是当我们使用16进制颜色的时候，一定不要忘了那个#。

 

　　　　接下来我们在回到Chrome，我们直接给我们的“课后帮”进行设置。

 

 

　　　　首先我们选中了h1标签，在右侧同样有一个element.style，并且设置了样式。

 

　　　　一个是字体大小，我给了20px,另一个是字体颜色，我给定的是#f14e42。

 

　　　　正文部分显示的是我们的效果。 现在看来已经和我们最终效果接近一些了。

 

　　　　但现在还有一个问题就是，在开发者工具的面板中所设置的东西，都是假象。

 

　　　　我们需要将代码写到sublime中，那么现在我们就将代码写入sublime中。

 

 

　　　　这是我们添加了样式之后的效果，已经在往最终效果的方向去发展了。

 

　　　　我们现在来对比一下最终效果。

 

 

　　　　通过对比我们发现现在我们虽然在字体颜色上一样了，但是位置仍然是有很大差距的，

 

　　　　最终效果达到的是HomeWork Helper在课后帮的右上角，但是我们现在的效果是在两行。

 

　　　　其实想要达到这个效果并不难，我们通过下节内容的分享，来解决这个问题。