HTML+CSS编写静态网站-03 添加css样式

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

HTML或超文本标记语言，它是形成任何网页结构的基础。但是要建立一个网站， CSS或者说层叠样式表也是必不可少的。CSS将帮助我们修改像字体，颜色，页面布局等东西。任何与视觉美学相关的事情都可以用CSS完成。我们会在后面的课程中更详细地介绍CSS，现在，我们首先来尝试一些简单的CSS，只是为了展示它的工作原理。所以来到Dreamweaver，添加一些样式。

到目前为止，我们在页面上有一个第一级标题元素。现在，我们来尝试将它改为蓝色。在标题上方，我将创建一个样式标签，像这样：

 
 
<style></style>

<h1>I Love www.oxox.work</h1>
在这些标签内，我们可以编写CSS，以后，我们将更多地了解CSS和HTML，但现在，你只需要继续跟着我做。我们首先输入一个回车。现在，在我们的style标签中，我要用Tab键来缩进我的代码。这样能让我们的代码可读性更高。并且不会影响代码的功能。

现在，我将键入h1。这是所谓的选择器。它会告诉浏览器我们想要应用我们的样式到哪个HTML元素中。更具体地说，这就是所谓的元素选择器。我们将会学习很多不同类型的CSS选择器，这个是最简单的，

接下来，我们在h1之后键入一个空格，然后跟两个花括号。然后，将光标放在两个花括号之间，然后按Enter两次。

 
 
<style>

       h1 {

       

       }

</style>
接着，我按下Tab键来重新缩进我的代码，因为我要键入的代码会嵌套在这个元素选择器的内部，这样代码会更好看。

最后，我们准备对我们的标题元素应用一些样式。所以，输入color。然后，接一个冒号，键入一个空格，接着，我们要将标题显示为蓝色，所以是bule。在这行的最后，键入一个分号。

 
 
<style>

h1 {

              color : blue;

}

</style>
冒号的左边就是所谓的属性。冒号的右边是属性对应的值。稍后我们将讨论更多CSS属性和值，但是现在，最重要的是学会使用正确的语法。

最后。确保你键入了所有内容像我的一样，然后保存文件。

现在，我们双击这个HTML文件，你会看到文本颜色已经从黑色变成了蓝色。

更改颜色可能是CSS中最简单的事情，学到后面，我们会发现，CSS非常强大，它的功能远不止简单的文本格式化。事实上，大多数CSS都很复杂，你不会想把它和你的HTML文档放在一起。大多数网站都是使用单独的HTML和CSS文档构建的。如果您认为您已经准备好了，那么在课后。可以自己尝试编写一些CSS样式。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/add-css-style/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/add-css-style/