CSS Syntax

CSS Syntax (CSS语法)

CSS syntax consists of 3 parts: a selector, a property and a value

selector {
 property: value;
}

The selector is an HTML element which you want to style. This could be any tag like <h1>, <p>, etc. Each selector can have one and more properties.

The property is the style attribute of an HTML tag. All HTML attributes are converted into CSS properties (color, border, etc.). Each property has its value. (属性是HTML标记的style属性。所有HTML属性都转换为CSS属性(颜色、边框等)。每个属性都有其值。)

The value is assigned to property. For example, the value of the color property can be either red or #F1F1F1.

Example of a CSS syntax:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     a {
       color: #1c87c9;
     }
   </style>
 </head>
 <body>
   <a>The color of this link is #1c87c9.</a>
 </body>
</html>

Result

In the above example <a> tag is a selector, color is property, and #1c87c9 is the value of the property.

As you can see the property and its value are written inside the curly brackets and separated with colon. (如您所见,属性及其值写在大括号中,并用冒号分隔。)

The selector also can have more than one property, separated by semicolon. (选择器还可以有多个属性,用分号分隔。)

CSS Comments

CSS Comments (CSS注释)

You can use CSS comments to add explanations to the code. They are not displayed because browsers ignore them. (您可以使用CSS注释向代码添加说明。它们不会显示,因为浏览器会忽略它们。)

The beginning and the end of a CSS comment is specified by “/” and “/”, respectively:

/*This is some comment*/

As you see, we have written our text inside “/” and “/”, which are not displayed on browsers. So when you don’t want to show any information in your CSS, write it between “/” and “/”. (如您所见,我们将文本写在“/”和“/”中,这些文本不会在浏览器上显示。因此,当您不想在CSS中显示任何信息时,请将其写在“/”和“/”之间。)

Example of CSS comments:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     h1 {
       padding-left: 10px;
       font-size: 26px;
       line-height: 30px;
       /*color:red;*/
     }
     p {
       color: #1c87c9;
       /*font-size:25px;
       border:1px solid red;
       */
       padding: 10px;
       line-height: 30px;
     }
   </style>
 </head>
 <body>
   <h1>CSS Comments</h1>
   <p>
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
(Lorem Ipsum 是印刷和排版行业的只是虚拟文本。Lorem Ipsum 自 1500 年,当未知的打印机类型厨房取炒,使标本书一直业界标准的虚拟文本.)
   </p>
 </body>
</html>


请遵守《互联网环境法规》文明发言,欢迎讨论问题
扫码反馈

扫一扫,反馈当前页面

咨询反馈
扫码关注
返回顶部