CSS是用于美化html的一种方式
三种CSS引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
引入方式1：行列式
通过元素的style属性引入样式
语法：style="样式名：样式值；样式名；样式值;..."
缺点: 1.代码复用度低 不利于维护
2.影响阅读 过多的重复造成占用过多
-->
<!--方式1-->
<input type="button" value = "按钮"
style = "
width:60px;height:60px;
background-color: aqua;
color:white;
font-size: 20px;
font-family:'隶书';
border:2px solid green;
border-radius:5px;">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--方式2 (通过标签名来确定作用元素,这里标签名是input)-->
<style>
input{
width:60px;height:60px;
background-color: aqua;
color:white;
font-size: 20px;
font-family:'隶书';
border:2px solid green;
border-radius:5px
}
</style>
</head>
<body>
<!--
引入方式2：内嵌式
通过在 head 标签中的 style 标签定义本页面的公共样式
通过选择器确定样式的作用元素
-->
<input type="button" value = "按钮">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--方式3
rel="stylesheet"为固定,href的路径需要注意
-->
<link rel="stylesheet" href="01.css">
</head>
<body>
<!--
引入方式3：外部样式表
将css代码单独放入一个.css文件中,
谁需要就在 head 标签中用 link 标签应用
-->
<input type="button" value = "按钮">
</body>
</html>
三种选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
选择器1： 元素选择器
语法：标签名{}
缺点：操作性弱，无法很好的调整
<style>
input{
width:60px;height:60px;
background-color: aqua;
color:white;
font-size: 20px;
font-family:'隶书';
border:2px solid green;
border-radius:5px
}
</style>
</head>
<body>
<input type="button" value = "按钮">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
选择器2：id选择器
语法：#id{}
在一个页面中每个id都是不同的，但元素可以使用同一个id
缺点：只能作用到一个元素上
<style>
#btn1{
width:60px;height:60px;
background-color: aqua;
color:white;
font-size: 20px;
font-family:'隶书';
border:2px solid green;
border-radius:5px
}
</style>
</head>
<body>
<input id ="btn1" type="button" value = "按钮">
<input id ="btn1" type="button" value = "钮">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
选择器3：class选择器 (多用)
语法：.class{}
Class 可以使用多个在同一个元素中 用空格隔开
<style>
.AClass{
border:2px solid green;
}
.BClass{
width:60px;height:60px;
}
</style>
</head>
<body> 空格隔开
<input class ="AClass BClass"type="button" value = "按钮1">
<input class ="BClass"type="button" value = "按钮2">
<input class ="AClass"type="button" value = "按钮3">
</body>
</html>
浮动 Float
类似于一种气泡的浮动 （向上浮动）
<!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>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid green;
background-color: beige;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue ;
}
.d1{
background-color: greenyellow;
float: left;
}
.d2{
background-color: rgb(220, 54, 54);
float: left;
}
.d3{
background-color: rgb(55, 112, 203);
}
</style>
</head>
<body>
<div class="outerDiv">
<div class = "innerDiv d1">diva</div>
<div class = "innerDiv d2">divb</div>
<div class = "innerDiv d3">divc</div>
</div>
</body>
</html>
注意：当我只将diva 向 left 浮动
会出现以下情况
这是因为diva 将 divb 所覆盖住了，所以红色块不显示，但是 由于浮动并不会将文字信息覆盖掉，所以 divb 被挤到 divc 的位置上所显示。
定位 position
给一个块明确的位置
<!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>
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue ;
}
.d1{
background-color: greenyellow;
position: absolute;
top: 500px; /*距离顶端 100 个像素*/
right :100px;
}
.d2{
background-color: rgb(220, 54, 54);
}
.d3{
background-color: rgb(55, 112, 203);
}
/*
position
static 默认 (元素默认的位置)
absolute 绝对 (相对页面位置变化，根据页面大小会动态变化位置)
relative 相对 (相对这个元素原本的位置)
fixed 相对 (相对浏览器窗口的位置，会动态变化位置)
left
right
top
bottom
*/
</style>
</head>
<body>
<div class = "innerDiv d1">diva</div>
<div class = "innerDiv d2">divb</div>
<div class = "innerDiv d3">divc</div>
</body>
</html>
盒子模型 margin/padding
调整块之间的间距
内外边距的定义
<!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>
.outerDiv{
width: 500px;
height: 300px;
border: 1px solid green;
background-color: beige;
margin: 0px auto; /*利用外边距可以做居中效果*/
}
.innerDiv{
width: 100px;
height: 100px;
border: 1px solid blue ;
}
.d1{
background-color: greenyellow;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
.d2{
background-color: rgb(220, 54, 54);
margin-top: 10px;
}
.d3{
background-color: rgb(55, 112, 203);
}
/*
margin 外边距
padding 内边距 不会侵占原本的元素块的大小，所以他会自动扩大
left
right
bottom
top
特殊写法 margin/padding: 10px 20px; (第一位10px代表上下，
20px代表左右)
margin/padding: 10px 20px 30px 40px;(按上下左右)
*/
</style>
</head>
<body>
<div class="outerDiv">
<div class = "innerDiv d1">diva</div>
<div class = "innerDiv d2">divb</div>
<div class = "innerDiv d3">divc</div>
</div>
</body>
</html>
