网站建设之如何注释掉CSS

CSS中使用注释来解释代码块或在开发过程中进行临时更改。注释的代码不执行。 WP网站建设 CSS中的单行和多行注释都以开头/*和结尾*/,并且您可以根据需要在样式表中添加任意数量的注释。例如: /* This is a single line comment*/ .group:after { content: WP网站建设

CSS中使用注释来解释代码块或在开发过程中进行临时更改。注释的代码不执行。

WordPress网站建设

WordPress网站建设

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/12055

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code