笔记五——CSS的基本语法

CSS的基本语法

在head标签中的style部分不属于html内容，所以应该遵守CSS的语法规范。（用html的语法规范会报错，所以同样的，在html中用css语法规范也会报错）

一、CSS中的注释

/* */：注释中的内容会自动被浏览器忽略，不会显示。（在VScode中用快捷键Ctrl+/，会自动根据注释的地方显示不同的注释符号，若有的情况下按为取消注释）

二、CSS基本语法

基本框架：

（一）、选择器

通过选择器可选中页面中的指定元素
如上图所示中，p的作用就是选中页面中 所有的p元素

1、常用选择器：
（1）元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例：p{}、h1{}
但若是要改所有元素中的一个，则选用下种选择器

（2）id选择器
作用：根据元素的id属性值选中一个元素（id是元素的唯一标识，id值不可重复）
语法：#id属性值（）
例：#box（）、#red（）
注：当id重复使用时，相同的id是相同的表现效果，虽然浏览器都会显示出相同效果，但从语法角度是错误的

（3）类选择器
作用：根据元素的class属性值选中一组元素
补充：class是html标签属性，与id类似，不同的是，class可重复使用，所以用class属性来为元素分组，开发中用的较多
一个元素可以同时指定多个class属性，多class属性间用空格隔开
语法：.class属性值
例：

.blue{
      color:blue;
      }
<p class='blue'>  </p>

（4）通配选择器
作用：选中页面中的所有元素
语法：*
例：

*{
   color:red; 
 }

*{color:red;}

2、复合选择器
用法：把多个选择器合在一起用
如图所示：

（1）交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器n{}
如图，表示即要是div，又要满足red的要求
希望元素满足多个条件的时候用
注：交集选择器中若有元素选择器，则必须用元素选择器开头
例： 表示要同时满足a、b、c三个条件

（2）选择器分组（并集选择器）
作用：同时选中多个选择器对应的元素或id
用法：选择器1，选择器2，选择器n{}
例： 和 上面两图最后的表现效果相同，所以将它们的元素放在一起
满足其中一个条件即可