这是我参与「第四届青训营 」笔记创作活动的第2天
1、CSS是什么
1、层叠样式表
2、不是编程语言
3、告诉浏览器如何指定样式、布局等
h1{ #h1表示选择器 给选中的元素定义样式（这里表示给所有标签为h1的弄的以下样式
color:white; #属性：属性值 一起叫做声明
font-size:14px; #声明与声明之间用;隔开
} #大括号里面表示咱们弄的一条规则
2、在页面中使用CSS（样式表的使用方法）
行内式
基本语法：
<div style="width:100px;height:100px;background-color:aqua"></div>
引入位置：在标签style属性中，等号后面的引号内属性css样式，多个属性使用分号分隔
外链式
<!-- 外链 --> #将css的定义放在一个单独的文件.css里面 然后在html里面用link标签引入到页面里面 建议使用
<link rel="stylesheet" href="/assets/style.css">
内嵌式
<!-- 嵌入 --> #直接把样式嵌到html标签里面
<style>
li { margin: 0; list-style: name;}
p {margin: lem 0;}
</style>
<!-- 内联 --> #对于这个标签的样式直接写在这个标签的style里面 仅影响一个元素 **不推荐使用**
<p style="margin:lem 0">Example Content</p>
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式表的使用</title>
<style>
div{
color:aqua;
font-family: '楷体';
}
</style>
</head>
<body>
<div>
内嵌式
</div>
</body>
</html>
书写位置在head标签的内部，title标签的下面，一对style标签中
导入式
四种样式的对比
3、CSS如何工作
4、选择器
通配选择器
包含html在内的所有标签
通配符*后面添加的样式，每一个标签都会加载一次
通常用于 清除页面的默认样式
*后面的内容是通配的即前面所定义的h1和p都会是*里面的样式
标签选择器
<style> 下面的内容是在<title>下面的
id选择器
给h1设置了一个id属性值是logo（唯一的）,在下面就可以有一个#logo去选中logo来设置它的一个样式
类选择器
id和class的命名规范：第一个字符必须是字母，后面可以是字母，数字，下划线
同一类型的样式，可以使用class
属性选择器
在这里disable表示在这个输入框是禁用的
禁用的样式就如图里面用【】将disable括起来,后面是所有disable都设置成这个样式
也可以选择特定的值
5、伪类
状态伪类在和用户交互时在不同的状态下的特殊的样式
结构性伪类根据出现的位置来确定是否有某些特殊的样式
6、组合
如图 article p 表示article下的所有的p（3个）
article>p 表示直属于article下的p (即第一个标签P)
h2+p 表示h2下的p(这里表示后两个P）
7、颜色
rgb(红色，绿色，蓝色） 数值是0到255 简单表示就是左边的表示#8fac87里面是16进制的表示
hsl(颜色，饱和度%，亮度%）
最后一位表示透明度0到1，0完全透明。
使用透明度的时候变成了RGBA和HSLA在使用了这两个后，那里面的就有4个数了，最后一个表示透明度
7、字体
这里用的是font-family 后面可以设置多个字体样式 原因是因为可能使用的用户他自己没有这种字体，一般是第一个如果没有第一个字体样式就接着用下一个
在最后的serif,sans-serif表示一类通用的字体
会先在url这里的链接里面下载这种字体然后表示出来
8、font-size
9、行高
10、调试CSS
11、选择器的优先级取决于它的特异度
12、css的常用属性 (k:v)
1、文字属性（color、font-size、font-family)
color(颜色）
<p style="color:red"> 看我什么颜色</p> %红色
属性值：主要分为两种，单词表达法和颜色值（十六进制，rgb)
<p style="color:#0000FF"> 看我什么颜色</p> %蓝色 也可以写成是rgb(0,0,225)
font-size(字体大小）
通常是以px为单位的数字值（工具浏览器的不同会有不同的默认的字的大小）
<p style="font-size:19px;"> 看我字体大小</p> （每个浏览器都有自己的最小的成像像素）
font-family（设置字体）
属性值：必须以双引号包裹，属性值可以有多个，使用逗号隔开。
<p style="font-family:'楷体','宋体';"> 看我字体</p>
可以有多个字体，按顺序使用，如：如果第一个加载不出来，就按顺序会加载第二中字体（如果页面中有中英文混杂的，需要分别设置对应的字体，中英文会分别进行加载）
2、盒子属性（width、height、background-color)
width(宽度）
height(高度）
这两个为常用的属性值，都是以px为单位的数值
background-color(属于background系列属性的一种，属性值和color一样分为单词和颜色值表示法）
使用
<div style="width:100px;height:100px;background-color:aqua"></div> 结果为一个正方形（是一个盒子）
13、继承性和层叠性
1、继承性：只需给祖先元素设置文字属性，后代元素就能加载这个属性，
注意：css可以继承的属性都是关于文字的，比如color,font-size>
2、层叠式
css层叠式
14、css属性学习
字体
颜色（color)
