前言

本文基于尚硅谷Web前端基础教程发布，你也可以理解成这是一篇尚硅谷教程笔记，当然这里也有我的一些经验总结

CSS-17

基本语法

首先讲一下CSS的基本语法中的注释，之前也讲过注释的作用是方便维护或解释代码，符号为/*结束符号是*/注释中的内容会被浏览器忽略

值得注意的是这样的注释只能在CSS中使用，如果你使用了内联样式就只能在<style>使用，不能再HTML中使用，HTML的注释是

<boby>
<p>LineXic!!!</p>

<style>
p{ 
  color: red;
}
</style>
</boby>

先看一个代码例，方便我们更好解读

其中style中的p元素就是一个选择器，它的作用选择上方的<p>标签，并定义其样式

{}里的东西就是声明块了，声明块顾名思义就是通过声明丁一其中的样式元素，其结构是名值对结构，即:连接以;结尾（英文），其中最后一个值得;是可以省略的，效果都大差不差

CSS选择器

选择器

还记得之前说过的ID嘛，它定义了一个唯一标识符，除了上面那个选择器外，在介绍三个常用选择器

1).ID选择器

有的时候我们会面临一个问题：你定义了大量的行标签，这是你只想让其中一个行里面的文字改变样式，例如下面：

<p>LineXic</p>
<p>LineXic blog</p>

<style>
p{
  color: red;
}
</style>

两行变红
这样运行肯定会两行全部改变颜色，我只想让一行改变颜色就可以使用ID元素，改动如下

<p>LineXic</p>
<p id="red">LineXic blog</p>

<style>
#red{
  color: red;  
}
</style>

这样就不会两行全部变红了，语法就和上面演示的一样

1
2
3

#id属性{
   名值对
}

2).类选择器

ID选择器无法重复使用一id，那如果我是真的需要重复使用该如何做呢？使用class类选择器

<p class="red">LineXic</p>
<p class="red">LineXic blog</p>

<style>
.red{
  color: red;
}
</style>

也可以一个选择器放多个类，中间用空格隔开一定注意使用英文的引号引起来我刚刚就犯了这种错误

3).通配选择器

顾名思义九十整个页面统统更改样式，也不管你什么标签p便签也好h便签也罢，统统更改

<h1>LineXic</h1>
<p>LineXic blog</p>

<style>
* {
  color: red;
}
</style>

通配选择器