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;
//定位方式为：fixed
position: 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>