引言： 我所教授的前端知识适用于纯小白，零基础。未来发展方向是前端领域，需要系统学习的人，从零到1的人 转载需备注地址---- 我是（我想静静）一个要把代码写出艺术感的人！ 写代码的男人很帅气！
说起HTML，是一个超文本标记语言，他只关注内容的语义，css的出现，拯救了混乱的HTML，Css 最大的贡献就是，让HTML从样式中脱离苦海，实现了HTML专注去做结构呈现
1、CSS初识 Css全称CasCading Style Sheets 通常称为Css 样式表或层叠样式表(级联样式表)，就是网页的美容师，给标签设置样式，外观显示样式。
正课开始：
1、引入css 样式表 （书写位置）
css可以写到那个位置？是不是一定要写到html文件里面呢？ 答案当然是 否了，
**重点 **：样式书写的三种格式 行内， 内部样式表 , 外链
1、1 行内样式 也叫（内联样式 少用）
通过标签的style 属性来设置元素的样式
<标签名 style="属性1：属性值；属性2：属性值2；"></标签名>
<div style="color:red;font-size: 12px">前端任重而道远</div>
2、1 内部样式表 (内嵌样式表 常用)
内嵌样式是将css代码集中写在HTML 文档中的head 头部标签中，并且用style 标签定义
<style type="text/css">
选择器{
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}
</style>
<style type="text/css">
div{
color: piink;
font-size: 12px;
}
</style>
<body>
<div>加班中</div>
<div>加班中</div>
<div>加班中</div>
</body>
3、1 外部样式表（外链式   实际开发用）
链入是将所有的样式放在一个或多个以css为扩展名的外部样式表中，通过link 标签将外部样式表文件连接到html文档中
href 进行链入 文件名是 day.css 文件名以css 结尾
htef ： 定义所连接外部样式表的文件url
type ： 定义所连接文档的类型
rel ：定义当前文档与被连接文档之间的关系定义为stylesheet 样式表
<link rel="stylesheet" type="text/css" href="day.css">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
</head>
样式表总结： 优点 缺点 使用情况
行内样式表 书写方便权重高 没有实现样式和结构分离 较少
内部样式表 部分结构和样式相分离 没有彻底分离 较多
外部样式表 完全实现结构和样式相分离 需要引入 最多
样式书写一定要展开格式 用这样
.style{
display:block;
width:50px;
}
CSS 选择器 重点 重点 重点！！！
css 选择器 干啥的？ 选择标签用的，可以把我们想要的标签选择出来 必须有记住
CSS 基础选择器
1、标签选择器
2、类选择器 类选择器使用：不要纯数字或者数字开头，中文等命名，尽量使用英文字母来表示如果比较复杂使用- 的化尽量使用中- 杠 不要用下_ 有容有兼容问题
3、多类名选择器
4、id选择器
5、id 选择器和类选择器
6、通配符选择器
1、1 标签选择器 （元素选择器）
标签选择器是指用HTML 标签名作为选择器，按标签名称分类
***优点快速为页面中同类型的标签统一样式，同时缺点也是不能设计差异化样式
div{
color: green;
font-size: 14px;
}
p{
color: orange;
font-size: 20px;
}
<div>前端加班中</div>
<div>前端加班中</div>
<div>前端加班中</div>
<p>前端加班中</p>
<p>前端加班中</p>
<p>前端加班中</p>
1、2 类选择 实际开发中用的最多 调用类选择器 给第一个div 谁调用谁生效，不调用不生效，class 是类 在style 里面 加 . 点 开始
特点：多个标签可以调用同一个类选择器 ，但是谨记一个标签只能有一个 class ，但是一个标签可以同时调用多个类选择器
<style type="text/css">
.box{
color: green;
font-size: 14px;
}
.p{
background:pink;
}
.sty{
width:400px;
heigth:300px;
}
</style>
<div class="box">加班写代码</div>
<div class="box p sty">加班写代码</div> 调用多个类选择器
<div>加班写代码</div>
1、3 id 选择器使用 # 进行标识，后面紧跟id名其基本语法格式如下
id 选择器
特点 1、一个id 选择器只能被调用一次，多次使用不符合w3c 规范 js调用会出错
特点 2、 一个标签不能同时调用多个id 选择器
特点 3、 一个标签可以同时调用类选择器和id 选择器
#box{
color: orange;z-index:
font-size:100px;
}
.box2{
width:300px;
height:400px;
}
<body>
<div id="box">嘿嘿</div>
<div id="box" class="" >嘿嘿</div>
</body>
1.4通配符选择器
通配符选择器 页面上所有的选择器，使用较少
*{
color: red;
font-size: 100px;
}
<div>01</div>
<h2>02</h2>
<p>03</p>
2. CSS 字体样式属性
属性：用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，相对长度单位比较常用。推荐使用相熟单位px
相对长度单位 说明
em 相对于当前对象内文本的字体尺寸 1em = 16像素
px 像素最常用，推荐使用
.box{
font-size:40px;
font-family: "宋体"；
font-weight: 400;
font-style:normal； 正常
line-height:10px; 使用最多的是像素 10px的百分之200% 是20
color：文本颜色
}
font-siez： 设置字体大小
font-family : 设置字体
现在网页中普遍使用14px 尽量使用偶数数字 字号
font-weight:字体粗细 normal正常，bold加粗 bolder 更粗 或者使用数字 100-900 100-400 是正常， 500 以后是加粗，实际开发700
font-style: 字体风格 normal 正常 italic： 浏览器会显示斜体的字体样式
oblique：浏览器会显示倾斜的字体样式
line-height: 控制行与行之间的距离 单位使用 px
3、Css 外观属性
1、颜色名称
2、十六进制从 0-9 从 a-f
.box{
color:pink;
text-align: left;
text-indent: 2em； 1个em是1个汉子的大小 首行缩进
text-decoration: none; 一般在a标签时候使用a 标签带下划线
}
<div class="box"> Css 外观属性 </div>
text-align: 文本水平对齐方式有三个 默认值是left ， center right
1、管理内容的水平对齐方式
2、 text-indent: 文本首行缩进一般使用em 3、text-decoration: none; 默认值是none underline定义文本下一条线
Css 复合选择器
复合选择器是由两个或者多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签
1、交集选择器由两个选择器构成，找到的标签必须满足，既有标签一的特点，也有标签二的特点。
交集选择器既又的关系，尽可能的少使用
.box{
color: red;
font-size:100px;
}
div.box{
text-decoration: underline;
}
<div class="box">交集选择器1</div>
<div>交集选择器2</div>
<p class="box">交集选择器2</p>
2、 后代选又称为包含选择器，用来选择元素或元素组的后代，写法把外层标签写在前面，内层标签写在后面，中间用空格分隔开，当标签发生嵌套时，内层标签就成为外层标签的后代
发生前提：包含关系
特点：1父元素在前，子元素在后
div p span{
color: pink;
font-size:20px;
}
先找div 然后 p 然后 span span发生了改变 后代选择器
<div> div 是父元素
<p>p 是子元素
<span>span是p的子元素</span>
</p>
</div>
3、开发者工具使用，代码出现问题第一时间找浏览器
使用浏览器：Chrome F12 Mac电脑我的打开方式是com + shift + c
com + 加号 可以放大代码 com + 0 恢复浏览器大小
