这是我参与「第四届青训营 」笔记创作活动的第2天
本节课主要对CSS进行概述，并对有关用法，属性进行介绍，并让我们更好的了解CSS
CSS是什么？
JavaScript(行为)，CSS(样式)，HTML(内容)
CSS为Cascading Style Sheets 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
在页面中使用CSS有三种方法
第一种方式(内联样式，行内样式)
在标签内部通过style属性来设置元素的样式 问题 使用内联样式，样式只能对一个标签生效 如果希望影响到多个元素必须在每一个元素中都复制一遍 并且当样式发生变化时，我们必须一个一个修改，不方便维护
第二种方式
将样式编写到head中的style标签里 然后通过css的选择器来选中元素 可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用 内部样式表更加方便对样式进行复用
问题：我们的内部样式表只能对一个网页起作用，它里面的样式不能跨页面复用
第三种方式(外部样式表)
可以将css样式编写到外部的css文件中，然后通过link标签来引入外部的css文件 外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其引用 使样式可以在不同页面之间进行复用，将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页加载速度，提高用户体验。
<link rel="stylesheet" href="./css/style01.css" />
CSS选择器
选择器分为
元素选择器(标签选择器)
作用：根据标签名来选中指定的元素 语法：标签名()
p{} h1{} div{} p{ color: red; } h1 { color: green; }
.类选择器（如：class="head",class="head_logo"）
作用：根据元素的class属性值选中一组元素 语法：.class属性值,class是一个标签的属 性，它和id类似 不同的是，class可以重复使用,我们可以通过class属性来为元素分组 可以同时为一个元素指定多个class
.blue { color: blue; } .abc { font-size:30px; }
ID选择器（如：id="name",id="name_txt"）
作用：根据元素id属性值选中一个元素 语法：#id属性值{}
#box{} #red{} #red { color: red; }
全局选择器（如：号）
作用：选择页面中所有元素
语法：*
*{}
还有一系列的复合选择器，关系选择器，字符串匹配的属性选择器，伪类选择器，a元素(超链接)的伪类，伪元素选择器
如何对颜色进行设置
在css中可以使用颜色名来设置各种颜色 比如：red blue yellow green......... 但是在css中直接使用颜色名是非常不方便的
RGB值
RGB其实就是通过三种颜色不同的浓度调配出不同的颜色 -R红色G绿色B蓝色 -每一种颜色的范围在0-255(0%-100%)之间 -语法：RGB(红色，绿色，蓝色)
RGBA值
在RGB的基础上增加了一个a表示不透明度 -需要四个值，前三个跟RGB一样，第四个表示不透明度 (1表示完全不透明，0表示完全透明，.5表示半透明)
16进制的RGB值
语法：#红色绿色蓝色 -颜色浓度通过00-ff
如果颜色两位两位可以重复可以简写 #aabbcc --->#abc
HSL值 HSLA
H色相(0-360) -S饱和度：颜色的浓度(0-100) -L亮度:颜色的亮度(0-100)
关于长度单位
长度单位
像素
屏幕(显示器)实际上是由一个一个的小点点构成的 -不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 -所以同样的200像素在不同的设备下显示效果不一样
百分比
也可以将属性值设置为相对于父元素属性百分比 -设置百分比可以使子元素跟随父元素的改变而改变
em
em是相对于元素的字体大小来计算的
1em=1font-size
em会根据字体的大小改变而改变
rem
rem是相对于根元素的字体大小计算
总结
在对于CSS这节课我和老师学到了很多，再加上之前自己的简单了解，学习，更加认识到了CSS的用法和内容，希望在日后的学习中可以学习的更加深刻
