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就是背景颜色的意思。
每一个选择器的最后一条样式,后面可以写分号,也可以不写分号,其他的必须要写分号。
在浏览器中效果如下: