标签按钮 button   
<button>按钮</button>
1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写位置
分为3类：行内式、内嵌式（内部样式）、外部链接式
Css属性书写语法
属性：属性值；
Css样式书写格式：
选择器 { 属性1:属性值1;  属性2:属性值2;   …… }

选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 链接；

Css注释
/* css注释内容 */
快捷键 Ctrl+？， 如果是外部链接的css快捷键是ctrl+shift+？
行内式
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。
注意：行内样式没有实现结构和样式分离，尽量不用：
例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;
内部样式（内嵌式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

外部链接
使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；
使用外部链接的步骤
01 新建：.css格式的css文件，直接书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

外部链接的好处
一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；
三种链接方式的使用总结
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
4、Css选择器
Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；

类选择器（重点）
类选择器定义
类选择器使用有一个过程：
01 定义： 在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
ID选择器（了解）
id选择器的定义使用
id选择器使用有一个过程：
01 定义： 在css里面用 “  #  ”   +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
        margin:0;
        padding:0;
}
以上代码表示清空所有的默认边距；
5、文字控制属性（死记硬背）
文字颜色   color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小   font-size
文字字体    font-family
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；


Unicode字体

字体加粗  font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；



字体样式(风格)   font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；



文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高  line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高

文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em;  首行缩进2个字；
6、字体的综合写法 font复合属性


注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；
实际工作中一般只用：font:文字大小   字体；
7、文本线条装饰  text-decoration  （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中  划线/删除线
text-decoration:overline;   上划线
8、chrome调试工具（重点）
01、捷键F12调出调试工具，如果直接按F12不生效我们就+FN
02、在页面的空白处右键 ---- 检查

9、emmet语法

10、text-align: center;  详解
实际的意思是让文本在父级盒子里居中显示，实际工作中text-align: center;不紧可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中；

注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；
制作精灵图（了解）
•我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
•我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
•在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
注意：在制作精灵图的是分辨率一律设置为72，导出图片的时候最好的透明的PNG格式；
12、滑动门原理
•一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
•设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
13、盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；
14、css实现三角形效果
第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;

标签按钮 button   
<button>按钮</button>
1、Css的作用
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；
2、使用css的原理
能够将结构html和样式css分离书写，简化代码，提高可阅读性；
3、css的书写位置
分为3类：行内式、内嵌式（内部样式）、外部链接式
Css属性书写语法
属性：属性值；
Css样式书写格式：
选择器 { 属性1:属性值1;  属性2:属性值2;   …… }

选择器：指定CSS样式作用的HTML对象（要更改样式的标签），花括号内是对该对象设置的具体样式。
属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 链接；

Css注释
/* css注释内容 */
快捷键 Ctrl+？， 如果是外部链接的css快捷键是ctrl+shift+？
行内式
直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可、。
注意：行内样式没有实现结构和样式分离，尽量不用：
例如：<div style=“color:pink; font-size:16px;”>我是行内样式</div>;
内部样式（内嵌式）：
书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

外部链接
使用外部链接的好处：实现了结构和样式的完全分离，代码简介，可读性强；
使用外部链接的步骤
01 新建：.css格式的css文件，直接书写选择器以及css样式；
02 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型 （可以省略），href文件路径；

外部链接的好处
一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；
三种链接方式的使用总结
行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表：部分结构和样式的分离。缺点：没有彻底分离；
外部样式表：完全实现结构和样式分离，方便各个页面的使用。缺点：需要引入
4、Css选择器
Css选择器的分类
Css选择器分为两类：基础选择器和高级选择器（复合选择器）
基础选择器：标签选择器（html选择器）、类选择器、ID选择器
复合选择器：后代选择器、并集选择器、指定标签选择器
CSS选择器作用
选择标签的，把想要选择的元素标签选择出来。
标签选择器：
以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中，所以实际工作中标签选择器不推荐大家使用；

类选择器（重点）
类选择器定义
类选择器使用有一个过程：
01 定义： 在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用；
类选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
但是可以用数字结束。
类选择器特殊用法（多类名）
一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格隔开直接书写另一个类名称即可；
例如：<div class=“red  font100”>一个元素调用多个类名</div>
ID选择器（了解）
id选择器的定义使用
id选择器使用有一个过程：
01 定义： 在css里面用 “  #  ”   +  id名称 +{ css键值对 } 进行样式定义;
02 调用：在html里面哪个标签需要，就在开始标签敲空格id=“id名称”进行调用；
id选择器的命名规则：
不能用纯数字、数字开头的、中文命名；
类选择器和id选择器的区别：
类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；
通配符选择器*
一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
*{
        margin:0;
        padding:0;
}
以上代码表示清空所有的默认边距；
5、文字控制属性（死记硬背）
文字颜色   color
Color取值
a、直接写英文单词yellow，red等等
b、16进制表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgb（）如rgba（0,0,0,0.5）a为透明度
常用测试颜色16进制：
黑色系列：#000； #333；  #666； #999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；
文字大小   font-size
文字字体    font-family
取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
如果是汉语的文字要用引文状态的引号引起来；


Unicode字体

字体加粗  font-weight
如果要用数字来表示加粗或者不加粗，千万不能书写单位px；



字体样式(风格)   font-style
实际开发中我们很少让文字倾斜，但是我们会让倾斜的i和em不倾斜；



文本水平居中 text-align: center;
text-align文本居中控制，取值：left、right、center；
text-align让文字在父级盒子里面居中显示；
文本的行高  line-height
line-height取值为数字+px单位，可以设置文字行与行之间的距离；
如何量取设计稿的行高？
从第一行文字的开始到第二行文字的开始就是行高

文本首行缩进 text-indent
text-indent首航缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；
text-indent:2em;  首行缩进2个字；
6、字体的综合写法 font复合属性


注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；
实际工作中一般只用：font:文字大小   字体；
7、文本线条装饰  text-decoration  （死记硬背）
text-decoration:none;没有线
text-decoration：underline；下划线
text-decoration:line-through; 中  划线/删除线
text-decoration:overline;   上划线
8、chrome调试工具（重点）
01、捷键F12调出调试工具，如果直接按F12不生效我们就+FN
02、在页面的空白处右键 ---- 检查

9、emmet语法

10、text-align: center;  详解
实际的意思是让文本在父级盒子里居中显示，实际工作中text-align: center;不紧可以让文字居中，也可以让行内元素（a、span、b、strong、u、i、s、em、ins），行内块元素（img、input、button）在父级盒子中居中；

注意：想要元素利用text-align: center;居中显示，必须要有一个父级盒子；
制作精灵图（了解）
•我们精灵图上放的都是小的装饰性质的背景图片。 插入图片不能往上放。
•我们可以横向摆放也可以纵向摆放，但是每个图片之间留有适当的空隙。
•在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图。
注意：在制作精灵图的是分辨率一律设置为72，导出图片的时候最好的透明的PNG格式；
12、滑动门原理
•一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧的盒子装内容；
•设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
13、盒子边框突出显示效果
想要实现两条边框重叠我们直接用margin-left:-1px;和margin-top:-1px;来实现，如果想要实现鼠标经过突出当前盒子的线条样式分两种情况：
情况1：如果我所有的盒子都在标准流里面，我们只需要设置鼠标经过当前盒子的时候，给当前盒子添加一个position: relative;相对定位（相对定位是不会改变盒子的显示模式的还占位）实现突出效果；
情况2：如果所有的盒子已经设置了定位属性，我们只需要设置鼠标经过当前盒子的时候更改当前盒子的z-index值，修改盒子的堆叠层次，z-index值越大盒子就会越上面；
14、css实现三角形效果
第一步 ，设置盒子的宽度高度为0
第二步，设置边框的宽度粗细border-width，最终显示为三角形
边框的线条样式 border-style
第三步，设置边框的颜色 border-color，4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了；
第四步，为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;