31CSS3的基本语法和注释

CSS3的基本语法

CSS3的语法非常简单,如下图:

1先写选择器,选择器就是选择页面上的某一个元素。

2然后在选择器的后面写一个空格,也可以不写空格,但是当你格式化网页代码的时候,选择器后面的空格就会自动被添加上。

3然后再写一个大括号对,在键盘上就是字母p后面的两个键。

4大括号里面就是当前这个选择器的样式的罗列,样式的形式就是----

k:v;k:v;k:v

每一个k:v就叫一条样式。

k就是属性名,v就是属性的值。

属性名和属性值之间用英文的冒号隔开,冒号后面可以有一个空格,也可以没有空格。

每一个k:v和另一个k:v之间,必须用英文的分号隔开。

5每一个选择器的最后一条样式,是可以不写分号的。如下图:

6CSS的每一条样式,也可以不换行。比如这样写:

当然不换行的写法,也是符合CSS3的语法规范的,只是这样写显得有点凌乱。

当然在vscode编辑器里,写css的时候,冒号和分号是自动补全的,基本上也不会出现编写错误。

CSS3的注释

CSS3的注释是这样写的:

/**/

比如:

在CSS代码或CSS文件中,按Ctrl+/快捷键,可以快速形成注释。

现在我在项目文件夹中创建一个CSS3基本语法.html的文件,在里面演示CSS3语法和注释。

代码如下:

!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleCSS3基本语法/titlestyleh2,h3{color:red;/*背景颜色*/background-color:snow;}p{color:gold;/*背景颜色*/background-color:darkgrey;}li{color:green;/*背景颜色*/background-color:lightblue;}/style/headbodyh2你可以迷茫,请不要虚度。/h2h2有道无术,术尚可求,有术无道,止于术。/h2h2每个人心里都有一团火,路过的人只能看到烟。/h2p不要被岁月静好麻痹,有实力的人才能好,一无所有的人只能静。/pp有些人很奇怪,不爱你,也不放过你。有些人更奇怪,爱你,还放过你。/pp如果不是生活所困,谁愿意一身才华呢?/ph3资本只会投圈内人,不会投圈外人/h3ulliA轮投资投产品/liliB轮投资投数据/liliC轮投资投收入/liliD轮投资投利润/li/ul/body/html

我这里CSS代码用了内嵌式写法。

background-color就是背景颜色的意思。

每一个选择器的最后一条样式,后面可以写分号,也可以不写分号,其他的必须要写分号。

在浏览器中效果如下:




转载请注明:http://www.aierlanlan.com/rzfs/5170.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了