关于如何正确安排一些CSS,请稍等一些初学者的建议。
我有一个基本的3页网站。每个页面都会在底部显示一个页脚。 页脚将保持每个页面的主要样式相同(宽度,高度等),但我想根据我所在的页面(背景颜色,字体颜色)更改其他样式。我知道这可以做到,但我正在寻找一些关于使用正确语法的技巧,所以不要学习使用坏习惯,除非这已经是正确的了吗?
我在CSS中拥有的是:
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
#footer_page1
{
background-color: red;
font-color: white;
}
#footer_page2
{
background-color: blue;
font-color: white;
}
#footer_page3
{
background-color: white;
font-color: black;
}
...并在我拥有的HTML中调用它:
<div class="footer" ID="footer_page1">
Some text here
</div>
这样可以,还是应该以更好的方式完成?
非常感谢。
答案 0 :(得分:4)
你应该使用id #footer
和class .page1, .page2, .page3
等 - 这是一个更好的尝试,因为你仍然有相同的页脚(所以ID应该是相同的),你只是想改变一些东西(这可以使用不同的类来完成)
编辑:以及我的快速提示:请注意设置width: 100%
和border: 1px solid black
,因为除非您设置{{1},否则不会在项目的宽度中计算边框属性
我的意思是,如果你有一个1024px宽的屏幕,你提供的css页脚宽度为1026px,右侧有2px裁剪
答案 1 :(得分:1)
根本不建议在CSS中使用ID,尽管它有时很有用。事实上,我建议不要使用除类和伪类之外的任何东西,偶尔使用属性选择器(尽管我个人主要使用ID和元素选择器,主要是出于懒惰)。这样做的原因是你只需要在级联中使用一个级别,这样可以在样式表中简化很多事情,特别是如果它们变得非常大。
.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }
<div class="footer page1">
Some text here
</div>
您还可以将该类添加到整个页面的容器或其他内容中,这可能更有意义。这样您就可以同时操作页眉和页脚规则集:
.footer {}
.header {}
.page1 .footer {}
.page1 .header {}
答案 2 :(得分:1)
当您在css中引用ID或类时,您必须使用您选择的类或ID的全名。例如,如果要引用具有div
的{{1}}元素,则必须在样式表中编写id="someid"
以引用此ID。
无论如何,你正在考虑它,但你的语法有点偏。以下是您可能正在寻找的内容:
#someid {
在同一行中使用两个选择器称为selector chaining。在这种情况下,您希望使用类选择器链接一个id选择器。
查看您的代码,可以发现明显的“坏习惯”是ID /* common footer code goes here */
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
/* code specific for each page goes here */
#page1.footer
{
background-color: red;
font-color: white;
}
#page2.footer
{
background-color: blue;
font-color: white;
}
#page3.footer
{
background-color: white;
font-color: black;
}
,page1
和page2
都在页脚page3
中这些页面有点令人困惑,因为“页面”并不完全唯一地定义页脚。
确保在任何页面上只使用一个同名的id,如果你使用id,它应该唯一地描述该元素。
正如其他人所说,应该注意的是,最近避免使用id(javascript功能除外)已成为一种好习惯。尽可能只使用类现在是标准。知道如何预先形成选择器链接是很好的,当然正确的语法总是很重要。
答案 3 :(得分:0)
您需要<div class="footer" ID="page1">
选择.footer#page1
。
我建议使用class for page#,因为ID在一个页面中应该是唯一的,但ID =“page1”可能会经常使用。
最后结果可以是
.footer
{
width: 100%;
height: 100px;
border: 1px solid black;
text-align: center;
}
.footer.page1
{
background-color: red;
font-color: white;
}
.footer.page2
{
background-color: blue;
font-color: white;
}
.footer.page3
{
background-color: white;
font-color: black;
}
与
<div class="footer page1">
Some text here
</div>