1. 引入方式
<!--
方式一：行内式
通过元素的style属性引入样式
语法：style="样式1：值; 样式2：值; ... "
缺点：1.代码复用率低，不利于维护。比如：定义多个相同的按钮要重复书写
2.css和html的代码交织一起，不利于阅读，影响文件大小，影响性能
-->
<input type="button" value="按钮" style="width: 200px;height: 100px;background-color: aqua;font-size: 50px;font-family: 宋体;border: 2px solid greenyellow;" /><!--
方式二：内嵌式
通过在head标签中的style标签定义本页面的共用元素的样式
通过选择器选择作用的元素（即在哪些元素有效）
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--在head标签中定义--><style>/*元素选择器，通过标签名确定在哪些元素上生效*/input{width: 100px;height: 100px;font-size: 500;font-family: 微软雅黑;border: 5px solid red;background-color: rgb(0, 255, 179);border-radius: 5px;}</style>
</head><body><input type="button" value="小按钮" /><input type="button" value="小按钮" /><input type="button" value="小按钮" /><input type="button" value="小按钮" />
</body><!--
方式三：外部引入
将css代码放到一个文件中，哪个html文件需要用到就在头标签中使用link引用
href：从哪个资源文件中引入
rel： 相关参数（如：stylesheet）
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--在当前页面引入其他文件的css代码，href哪个资源 rel=引入style的代码需要stylesheet--><link href="css/引入方式.css" rel="stylesheet">
</head>2. 选择器
<!--
选择器一：标签名定义选择器
语法：标签名{}
缺点：某个按钮不想要里面的某个功能却不能修改，只能重新定义，代码冗余
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>input{/*字体、颜色、大小*/font-size: 30px;font-family: '宋体';color: rgb(18, 222, 100);background-color: aqua;border: 2px solid red;width: 100px;height: 100px;}</style>
</head><body><input type="button" value="按钮" /><input type="button" value="按钮" />
</body><!--
选择器二：根据标签的id名定义选择器
语法：#id名
缺点：id一般唯一，根据id定义只能有一个元素符合
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#niubi{/*字体、颜色、大小*/font-size: 30px;font-family: '宋体';color: blueviolet;background-color: blanchedalmond;border: 3px solid red;width: 100px;height: 100px;}</style>
</head><body><input type="button" id="niubi" value="方式二" />
</body><!--
选择器三：根据元素的属性值确定class的样式
一个元素可以有多个class值, 一个class样式可以被多个元素使用
语法：.class{}
-->
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fontClass{font-size: 50px;font-family: '楷书';}.colorClass{color: black;background-color: blue;}.sizeClass{width: 300px;height: 200px;}</style></head><body><input type="button" id="but1" class="fontClass colorClass sizeClass" value="方式三" /></body>3. 浮动、定位
<!--
浮动：float（浮动直接移动到框边界最左、右、上、下侧，无法精确定位）
定位：
position
static 默认
absolute 绝对：相对于浏览器界面进行位置定位
relative 相对：相对于元素原本的位置进行定位
fixed 相对：相对于浏览器窗口进行位置定位
（如:position: fixed;
top:30px; left:30px;
此时滑动浏览器界面但是该区域块仍保持在当前界面离顶部30，左边30像素的位置）
left
right
top
bottom
-->
<head><style>.but1{border: 3px solid rebeccapurple;background-color: aqua;//定位方式为：fixedposition: fixed;//距离浏览器窗口顶部的边界30个像素top: 30px;//距离浏览器窗口最左侧的边界30个像素left: 30px;}</style>
</head>4. 盒子模型
<!--设置一个界面，里面包含三个小界面-->
<!--
设置外边距：margin
设置内边距：padding
边距的设置不会影响盒子的空间大小。如：设置一个盒子的外边距为10px，则盒子界限外的10个像素的空间
内外边距的距离会以盒子的边界为线向内或者向外扩张
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> .outDiv {width: 500px;height: 500px;background-color: antiquewhite;}.inDiv {float: left;}.font {font-size: 30px;font-family: '宋体';}.size {width: 100px;height: 100px;}.d1 {border: 2px solid;background-color: aqua;/*设置外边距的距离*/margin-right: 10px;margin-left: 20px;margin-top: 30px;padding-left: 10px;padding-top: 40px;}.d2 {border: 2px solid green;background-color: rgb(205, 123, 23);/*设置外边距的距离*/margin-left: 10px;}.d3 {border: 2px solid blue;background-color: blueviolet;/*若不指定方向则默认上下左右边距为10个像素*/margin: 10px;}</style>
</head><body><div class="outDiv"><div class="inDiv font size d1">div1</div><div class="inDiv font size d2">div2</div><div class="inDiv font size d3">div3</div></div>
</body>
