css中使用注释来解释代码块或在开发过程中进行临时更改。注释的代码不执行。
css中的单行和多行注释都以开头/*和结尾*/,并且您可以根据需要在样式表中添加任意数量的注释。例如:
/* this is a single line comment*/
.group:after {
content: ;
display: table;
clear: both;
}
/*
this is
a multi-line
comment
*/您还可以通过设置样式的方式使注释更具可读性:
/*
***
* section for h2 style
***
* a paragraph with information
* that would be useful for someone
* who didn't write the code.
* the asterisks around the paragraph
* help make it more readable.
***
*/用注释组织css在较大的项目中,css文件的大小会迅速增加,并且变得难以维护。将您的css组织成带有目录的不同部分可能会有所帮助,以使将来查找某些规则更加容易:
/*
* css table of contents
*
* 1.0 - reset
* 2.0 - fonts
* 3.0 - globals
* 4.0 - color palette
* 5.0 - header
* 6.0 - body
* 6.1 - sliders
* 6.2 - imagery
* 7.0 - footer
*/
/*** 1.0 - reset ***/
/*** 2.0 - fonts ***/
/*** 3.0 - globals ***/
/*** 4.0 - color palette ***/
/*** 5.0 - header ***/
/*** 6.0 - body ***/
h2 {
font-size: 1.2em;
font-family: ubuntu, serif;
text-transform: uppercase;
}
/*** 5.1 - sliders ***/
/*** 5.2 - imagery ***/
/*** 7.0 - footer ***/有关css的更多信息:css语法和选择器当我们谈论css的语法时,我们在谈论事物的布局。关于去哪里有规则,因此都可以一致地编写css,并且程序(如浏览器)可以解释css并将其正确地应用于页面。
编写css的主要方法有两种。
内联css内联css将样式应用于单个元素及其子元素,直到遇到另一个覆盖第一个样式的样式为止。
要应用内联css,请将“样式”属性添加到您要修改的html元素中。在引号内,包括用分号分隔的键/值对列表(每个键/值对依次由冒号分隔),以指示要设置的样式。
这是内联css的示例。单词“一个”和“第二”将具有黄色的背景色和红色的文本色。“三”一词具有替代第一个的新样式,将具有绿色的背景颜色和青色的文本颜色。在示例中,我们将样式应用于<div>标签,但是您可以将样式应用于任何html元素。
<div style=color:red; background:yellow>
one
<div>
two
</div>
<div style=color:cyan; background:green>
three
</div>
</div>内部css尽管编写内联样式是更改单个元素的快速方法,但是有一种更有效的方法可将同一样式同时应用于页面的许多元素。
内部css在<style>标记中指定了其样式,并将其嵌入在<head>标记中。
这是一个与上述“内联”示例具有相似效果的示例,不同之处在于css已被提取到其自己的区域。单词“一个”和“两个”将与div选择器匹配,并在黄色背景上为红色文本。单词“三”和“四”也将与div选择器匹配,但它们也与.nested_div应用于引用该类的任何html元素的选择器匹配。这个更具体的选择器会覆盖第一个选择器,最终它们在绿色背景上显示为青色文本。
<style type=text/css>
div { color: red; background: yellow; }
.nested_div { color: cyan; background: green; }
</style>
<div>
one
<div>
two
</div>
<div class=nested_div>
three
</div>
<div class=nested_div>
four
</div>
</div>上面显示的选择器非常简单,但是会变得非常复杂。例如,可以仅将样式应用于嵌套元素;也就是说,一个元素是另一个元素的子元素。
在下面的示例中,我们指定了一种样式,该样式仅应应用于div其他div元素的直接子元素。结果是“两个”和“三个”将在黄色背景上显示为红色文本,但“一个”和“四个”将不受影响(并且很可能在白色背景上显示为黑色文本)。
<style type=text/css>
div > div { color: red; background: yellow; }
</style>
<div>
one
<div>
two
</div>
<div>
three
</div>
</div>
<div>
four
</div>外部css所有样式都有自己的文档,该文档链接在<head>标记中。链接文件的扩展名是.css