网站工具- 3的第1部分-“照片堆栈”-一个按钮SEO准备登陆页面CSS模板

步骤8 -理解CSS及其工作原理< / div >< p >层叠样式表或简称CSS看起来有点复杂，但它一点也不糟糕。事实上，它只是一个文档，其中包含了您希望某些html元素的外观以及放置位置的描述。在大多数情况下，CSS文件非常直观和可读。但是，这里有一个关于CSS的小速成课程，让你开始编辑你的登录页面(关于所有不同属性和样式的更详细信息，W3学校是一个很好的免费CSS学习资源)。

i. CSS适用于HTML标签CSS的工作原理是简单地定义被分配给HTML标签的样式属性。例如，如果你在任何文本或代码编辑器中打开并查看splashcss.css文件，你会注意到每个CSS属性都有以下格式:

名字{

属性:价值;

属性:价值;

}

“名称”只是您希望影响的HTML标记的名称(适当地称为“选择器”)。例如，在文件的第54行Body {}它为HTML中的所有东西分配样式身体身体< > < / >标签。在声明名称之后，以表示开始的{开始，以表示“name”选择器样式化结束的}结束。然后应用于“name”标记的所有属性都将位于{和}之间。每个样式属性被称为一个属性，后面跟着它的给定值。

在第59行你会看到P {}哪个为段落内的文本指定样式< p > < / p >标签

在第48行你会看到* {}星号表示您希望将这些样式属性分配给由*表示的整个文档

如果我们想要所有的文本都在身体< >标签默认为Times New Roman，高度为10px。你可以在CSS中输入以下内容:

身体{

font-family: " Times New Roman ";

字体大小:10 px;

}

的所有文本身体身体< > < / >HTML中的标签将默认为10px Times New Roman。你可以看到CSS是多么强大，因为我们不需要在整个HTML文件中多次更改字体/大小和其他属性的描述，我们可以在CSS文档中只做一次，并将其应用到整个网站的每个页面!

2为什么级联?那么级联样式表中的级联是什么意思呢?好吧，这是CSS中最难理解的概念，并且高兴，因为它真的没有那么难。级联仅仅意味着每个样式在HTML中从父样式向下滚动到子样式。换句话说，上面我们更改了位于身体< >标签到10px Times New Roman。类中包含的每个元素身体身体< > < / >标签也会应用相同的默认样式。所以身体< >是“父”，里面的东西是“子”。子元素也被认为是父元素，不管它们包含什么元素。

因此，任何应用于父对象的东西都适用于子对象。如果你想要改变Child的样式，那么你需要创建另一个CSS样式属性来应用于Child。

重要注意:应用于子元素的样式会覆盖从父元素向下延伸的任何样式。

为了帮助澄清，这里有一段HTML代码:

身体< >

< div id = " text " >

这是我们的测试段落

< / div >

身体< >

在解释之前，我先说明一下a< div >只是HTML中某些东西的容器。在这个例子中身体< >的父节点是< div >命名为“文本”和< div >是段落元素的父元素< p >。这是什么意思?这意味着任何适用的东西身体< >适用于< div >称为“text”，也称为段落元素< p >;任何适用于< div >元素应用于段落元素< p >以及应用于段落元素的任何东西< p >只适用于自身。

那么，如果我想要大部分文本在身体< >要用新罗马字体，除了文本里面的那一小部分< div >容器。好吧，我会写以下在我的CSS:

身体{

font-family: " Times New Roman ";

}

#{文本

字体类型:“天线”;

}

现在，文档中的所有文本都将是Times New Roman，除了“text”内的内容< div >由CSS代码#text指定。现在不要太担心语法。现在的目标是简单地理解CSS，并能够编辑它，而不是自己创建它。

好了，现在你应该对CSS元素如何从父元素“级联”到子元素有了基本的了解。您还可以开始看到这种样式形式是多么有效和强大。

3研究splashcss.css:现在，让我们回顾一下CSS文件splashcss。CSS。您将注意到，我将用户可能想要更改的项的属性放在了文档的最顶部。其余的属性位于下面，从第44行开始一直到整个文档。所以，快速解释一下前几项来帮助你开始。

的* {}在第8行应用站点范围的样式(用*表示)来将字体设置为第一个Arial，如果Arial不可用，那么它将选择Helvetica，如果Helvetica不可用，它将选择任何无衬线字体。

的一个{}第18行对每个锚标记(URL)应用站点范围的样式< a href = " " > < / >更改链接文字的装饰、重量、颜色和大小。

的A:hover {}在第32行中，当鼠标悬停时，将站点范围样式应用到每个锚标记(URL)。因此，当鼠标悬停时，网站上的所有链接都将加下划线。