HTML+CSS编写静态网站-15 什么是CSS

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015我相信大家已经很想写CSS样式了。但是，要想更容易学会如何使用CSS，我们还得了解一点背景。CSS翻译过来是层叠样式表的意思。它只是指描述网页的视觉外观的文档。CSS有个特性，就是每个CSS规则都有可能覆盖以前的规则。让我们来看一个简单的例子。现在，我要为我们的HTML添加一些样式。这里缩写的代码知识用于演示，稍后我们将会删除这些代码，然后使用外部样式表来代替。这里只是为了举个例子。所以，在head中，在normalize.css的这个外部样式表的后面，我打开一个style标签。在里面，我要输入元素选择器footer，打开一个花括号，在里面我要键入color属性，后面是它的值：绿色。              <link rel="stylesheet" href="css/normalize.css">              <style>                     footer{                            color : green;                     }              </style></head>现在，你只需要知道的是，这一块CSS代码将使footer文本的颜色变为绿色。所以，让我们保存。打开index.html来看看效果，我们将向下滚动到底部。你看，页脚中的文本现在是绿色的。现在，让我们回到我们的代码的正下方。我们添加另一个CSS规则。我们重复做同样的事情，但是这一次，我们将文本颜色设置为橙色。              <style>footer{color : green;}</style>              <style>                     footer{                            color : orange;                     }              </style>现在，我们有两个CSS规则。第一个将段落文本更改为绿色，第二个将段落更改为橙色。那么文本会是什么颜色呢？让我们刷新页面。你看，我们的页脚文本现在是橙色。这是因为第二个规则已经覆盖了第一个规则。也许你一眼就可以看的出来，但是当我们编写了大量的CSS代码时，保持这个基本的层叠规则集是非常重要的。有时它可能导致很难解决的奇怪的问题。但是如果你非常小心地理解CSS层叠，那么就会变得很容易。现在我要删除第二个规则，现在我们来讲解这个规则的语法。在这整段代码中，有元素选择器，属性，值，花括号。所有这一切被称为规则。我们将在我们的项目中创建许多CSS规则。              <style>footer{color : green;}</style><style>footer{color : orange;}</style>这个规则的第一部分被称为选择器，因为它告诉浏览器页面上我们想要应用我们的样式到哪个元素上。这个特定的选择器被称为元素选择器，因为它基于元素的名称进行选择。在这种情况下，我们的元素命名为footer。还有许多其他类型的选择器。我们将在编写这个网站的整个过程中了解各种选择器。接下来是大括号，它封装了我们想要应用于在选择器中选择的任何元素的样式。在我们的花括号里面，我们有一行CSS代码。这一整行被称为声明。 CSS规则可以包括多个声明。但在这种情况下，我们只有一个，声明的第一部分，这里称为属性。在这种情况下，我们使用了color属性，该属性用于改变文本的颜色，在属性的冒号之后，是属性值，后跟一个结束声明的分号。这里的值为绿色。所以让我们回顾一下。我们有一个包含属性和值的一个声明。然后，在这个花括号里面,我们可以有多个这样的声明。花括号封装了应用于选择器的声明。所有这些东西在一起被称为规则。让我们再试几个例子。这里我想将背景颜色更改为橙色。这与文本颜色不同，我们将使用另一个CSS属性，所以。我要使用background-color属性。接着，我要将我们的背景颜色更改为橙色。然后我要将文本颜色更改为白色：              <style>footer{color : white;                            background-color:orange;}</style>现在，让我们保存并刷新网页：在底部，您可以看到，我们现在有一个橙色的背景颜色占满整个页脚，它跨越了页面的整个宽度。然后文本颜色现在是白色的。假如现在，如果我想将这个规则应用到导航元素而不是页脚元素呢？我们只需要将选择器从footer改为nav，                     nav{color : white;background-color:orange;}因为我们已经有nav元素。所以，让我们保存，刷新页面，接着滚动到顶部：你可以看到，这种样式已经应用到我们的导航中了。并已从我们的footer中删除。现在，背景颜色是橙色。但是，注意到，链接仍然是浏览器应用的默认颜色。我们知道，任何已经点击的链接都是紫色的，任何未点击的链接都是蓝色的。那么为什么这个文本不会变成白色呢？这是一个问题，我们把它称为选择器特异性。实际上，在这种规则下，我们只是说我们想要应用选择器到导航元素，并没有说应用选择器到anchor元素。所以浏览器不会更改链接的文本颜色。也就是说，这里的选择器并没有应用到anchor选择器。所以，如果我们想要链接也被应用到，应该怎么办呢？让我们继续回到我们的代码。这里我们只需要在导航选择器后面键入a，现在这是一个新的选择器，它将选择在我们的导航元素中的anchor元素：              <style>nav a{color : white;background-color:orange;}</style>所以让我们继续保存页面。并刷新看看这是什么样子：正如你所看到的，我们的样式已经应用于我们导航中的单个链接。所以，不再是在这里的nav元素的所有的样式了，我们实际上是选择特定的anchor元素。所以，导航背景已经默认回白色了。但我们的导航链接现在有橙色的背景和白色文字的颜色。现在我们已经做了足够的练习。让我们准备好开始CSS编码吧。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/css/ | 虚幻大学

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