目录
前端「HTML+CSS」零基础入门
前端「HTML+CSS」零基础入门之 HTML学习笔记
课时4css初级篇-css引入css基础选择器选择器权重
课时5css复杂选择器，权重计算问题，css基础属性
课时6css企业开发经验、习惯，盒子模型，层模型
课后练习
前端「HTML+CSS」零基础入门
浏览器 = shell（外壳）+内核
市场主流浏览器是什么？是在市场占有一定份额并有自主研发的内核的浏览器。
HTML、CSS、JavaScript三者分工不同。
HTML 负责结构
CSS 负责样式
JavaScript 负责行为
CSS中只有一种注释形式：/* */快捷键：ctrl键+?
课时4css初级篇-css引入css基础选择器选择器权重
CSS的完整拼写：Cascading Style Sheet ，意思是层叠样式表。CSS是用来装修HTML的。
引入css的三种形式：
1.行间样式css
<html><head><meta charset="utf-8"><title>document</title></head><body><div style="width: 100px;height: 100px;background-color: red;"></div></body></html>
2.页面级css
<html><head><meta charset="utf-8"><title>document</title><style>div{width: 100px;height: 100px;background-color: red;}</style></head><body><div></div></body></html>
3.外部css文件
/*style.css*/div{width:100px;height:100px;background-color:red;}
<!--document.html调用style.css--><html><head><meta charset="utf-8"><title>document</title><link rel="stylesheet" href="style.css"> </head><body><div></div></body></html>
选择器
1.id选择器： #(id名)
比如某个元素 id="only" , #only 即可选择到这个元素（id和元素的关系是1对1）。
2.类选择器 .（class名）
比如某个元素 class="demo" , .demo 即可选择到这个元素（class和元素的关系是多对多）；
多个class属性的连接用空格即可，比如class="demo demo1" 表示元素同时拥有“demo”和“demo1”两个class属性。
3.标签选择器 标签名
直接 标签名 加 花括号{} 即可修改标签样式。
比如：选择所有div标签
4.通配符选择器*选择所有元素。
优先级：
!important>行间样式>id选择器>类选择器=属性选择器([属性/属性=属性值])>标签选择器>通配符选择器
课时5css复杂选择器，权重计算问题，css基础属性
1.父子选择器/派生选择器 （不一定要用标签选择器，可用其他选择器替代） 形式：父亲+空格+子孙
示例1：div下的所有span
示例2： strong下的所有em
示例3： div下所有的em
2.直接子元素选择器 形式：父亲+'>'+儿子
示例：div下的直接儿子em div > em
3.并列选择器（按顺序且不带空格）
示例：
4.分组选择器
复杂选择器优先级：同行选择器对应权重之和比较大小（权重相同后面覆盖前面的）
CSS字典
基本用法：
设置颜色的三种形式：
1.纯英文单词（示例：red）
2.颜色代码（三原色rgb，示例：#ff4400，每两位表示一种原色的饱和度，依次是红绿蓝）
3.颜色函数（示例：rgb(255,255,255）)
border —— 盒子边框：
课时6css企业开发经验、习惯，盒子模型，层模型
字体默认高度为16px.
实现字体在按钮中水平垂直居中： 文本所占高度=容器高度（line-height=height）
实现文本首行缩进两个位置：
一个像素（px）只能表示一种颜色。1 em=1 font-size 。
行为、样式、结构相分离：
模仿a标签：（蓝色、下划线、聚焦变小手）
伪类选择器（最常用 - :hover 表示鼠标聚焦的效果）：
实现聚焦背景变色，如下图：
转换：display属性
如行级转块级：
去除图片之间的空隙：
连续几张图片放在一起为什么会有空隙？因为。
——>
盒子模型：
先定义功能，后选择。
意思就是先写好css样式，写html的时候调用所需要的样式即可，这样比较有利于模块化分工，省时间精力。
自定义标签：
意思就是初始化标签，比如说baidu检索的时候关键字显示红色，查看源代码发现使用的是<em>标签，而<em>标签的原始css并不是这样的，但是我们可以自定义。
当标签的某些固定属性是我们不需要或者不想要的时候，我们可以通过自定义标签来改变标签的初始样式。
再讲几个栗子，比如a标签我们不想要下划线和蓝色，比如ul标签不想要圆点和间距。为了清晰一点我把背景变成黄色。
初始：自定义：
一般每个标签都会自带padding和margin属性，但是有时我们不想要他们自带的间隔大小，所以最好用通配符选择器取消所有标签的自带间隔属性。为什么这样最好呢？因为通配符选择器权重为0，如果想要自定义也不会冲突。
什么是盒子模型？就是针对HTML的每个元素都可以作为一个盒子。
盒子的三大组成部分：盒子壁border + 内边距padding + 盒子内容(width+height)
盒子模型=外边距margin+border+padding+（content=width+height）
浏览器以左边上边为墙，也就是说设置外边距的时候元素会往右下或者左上变化。
控制台：
右键点击控制，出现控制台界面，点击Elements，出现HTML+CSS的展示。
在CSS区域旁边就是盒子模型，鼠标移到哪，对应的区域就会变色。
当我们想要设置一个元素居中时，可以嵌套元素盒子把内容大小设置成一样大。比如：
padding是一个复合属性，padding：10px等同于 padding：10px 10px 10px 10px，设置padding: 10px 20px 30px 40px如下图：
四个值时顺序：上，右，下，左；三个值时顺序：上，左右，下；两个值时顺序：上下，左右；一个值：上下左右。
还可以单独设置padding-top，padding-left，padding-right，padding-bottom。
尝试做个远眺图，如下图：
这里只有三层：
有了margin就能隔开元素和元素。
原始： 自定义：
定位：在特定位置出现特定元素
绝对定位absolute：
设置左边线距离左边：left属性；右：right；上：top；下：bottom。
body标签自带的margin属性的值为8px，所以生成的元素不会紧贴页面边框。
绝对定位的特点：
1.脱离原来位置进行定位（变成不同层面的元素，不占有另一层面的空间）
2.相对于最近的有定位的父级进行定位，如果没有就相对于文档定位
相对定位relative：
相对定位的特点：
1.保留原来位置进行定位（变成不同层面的元素，占有另一层面的空间）
2.相对于自己原来的位置进行定位
使用定律：用relative做参照物，用absolute定位 。
广告定位fixed：
就是平时遇到的页面上那种不管页面怎么动位置都不变的广告的定位。自己试试：
如何居中定位？ 首先left和top属性设置为50%，又由于定位是以元素的左上角为参照的，所以还需要修改margin-left和margin-top往左和往上移动一半的宽和一半的长。如下：
课后练习
作业：显示一个五环，并要求在屏幕居中的位置。
提示：
z-index属性表示z轴也就是第几层次，靠近观察者为正；设置圆形用border-radius：50%；
<html><head><meta charset="utf-8"><title>document</title><link rel="stylesheet" href="style.css"></head><body><div class="dv1"><div class="cir demo1"></div><div class="cir demo2"></div><div class="cir demo3"></div></div><div class="dv2"><div class="cir demo4"></div><div class="cir demo5"></div></div>br*500+Tab键</body></html>
/*style.css*/*{margin: 0;padding: 0;}.dv1,.dv2{position: fixed;left: 50%;top: 50%;}.dv1{margin-left:-150px ;margin-top: -100px;width: 300px;height: 100px;z-index: 1;}.dv2{margin-left:-100px ;margin-top: -50px;width: 200px;height: 100px;z-index: 2;}.cir{display: inline-block;width: 80px;height: 80px;border: solid 6px;border-radius: 50%;}.demo1{border-color: blue;margin-right: 7px;}.demo2{border-color: black;margin-right: 7px;}.demo3{border-color: red;}.demo4{border-color: yellow;margin-right: 11px;}.demo5{border-color: green;}
