【前端17】CSS的基本语法和常用选择器

更多:https://linexic.top/tags/前端

前言

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

基本语法

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

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

选择器or声明块

<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>

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

#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>