这是我参与「第四届青训营」笔记创作活动的的第2天

CSS是什么？

CSS全称Cascading Style Sheets层叠样式表，它用来定义页面元素的样式（也就是给元素设置字体和颜色，设置位置和大小，添加动画效果）

大致结构

<!--选择器-->h1{
                color: white;<!--color为属性，white为属性值，而color:white;称为声明-->
                font-size: 14px;
              }

外链

<link rel="stylesheet" type="text/css" href="mystyle.css">

外链是通过新建一个.css文件，然后对这个css文件利用<link>标签进行引用，同时<link>标签最好写在<head>中以防止无法正常正常渲染

嵌入

<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>

嵌入是通过在.html文件中，书写<style>标签，然后在标签中编写选择器，从而使用CSS，同样地，<style>也最好写在<head>中

内联

<p style="color:red;">This is a paragraph.</p>

内联就是在标签内部进行对元素进行渲染

选择器是用来找出要渲染的元素，然后对元素进行渲染，对于选择器，有多种方式选择元素

通配选择器

* {<!--*表示选择全部html标签-->
  text-align: center;
  color: blue;
}

当想要将某种效果渲染给整个html文件的标签时，使用通配选择器会更加便利

标签选择器

p {
  text-align: center;
  color: red;
}

当想要渲染某一特定标签时，使用标签选择器

id选择器

#para1 {
  text-align: center;
  color: red;
}

id选择器是使用标签的id属性来进行渲染，所以前提是标签要有id属性，同时元素的id是唯一的，所以id选择器用于选择一个唯一的元素

类选择器

.center {
  text-align: center;
  color: red;
}

类选择器用于使用赋予了class属性名的元素

属性选择器

img[alt] {border: 5px solid red;}

属性选择器就是根据标签的属性进行选择

大致结构

div:hover {
  background-color: blue;
}

标签：伪类{}

:active伪类通常用在超链接上，当点击超链接会进行变色

:hover伪类是当鼠标悬停在hover所渲染的标签上时，会产生效果

:focus伪类通常用在输入框，鼠标点击输入框就会聚焦在输入框上从而产生效果