样式分为三种
内部样式：写在html文件里的样式叫内部样式
内联样式：写在需要的标签中
外部样式：写在外部css文件里
可以通过不同的选择器来选择设置指定组件的样式：
<style>/* 写在html文件里的样式叫内部样式 *//* 选择器 *//* ID选择器 */#boxa{height: 100px;width: 100px;background-color: skyblue;/* 字体颜色 */color:green;/* 字体大小 */font-size: 30px;/* 字体加粗 数值达到600或bold*/font-weight: 800;/* 字体居中 */text-align: center;/* 单行文本垂直居中 行高等于容器的高度*/line-height: 100px;}/* 标签选择器 元素选择器 */div{height: 100px;width: 100px;}/* 类选择器 */.bgred{background-color: red;/* 不显示 */display: none;}</style>选择器
ID选择器：用井号 # 标识，设置指定 id 的样式
标签选择器：选择对应的标签类型
类选择器：用点 . 表示选择指定的 class
<body><!-- 内联样式 --><div style="width: 100px;height: 100px;background-color: pink"></div><div id="boxa">你好</div><div class="bgred"></div><div class="bgred"></div></body>创建css文件
在外部css文件中设置几种标签和类的样式：块的宽度和高度；几种背景色
十六进制颜色表示
这里提供一个获取不同颜色十六进制颜色值的网站：ColorDrop
里面有很多好看的颜色搭配，点击即可复制颜色值
div{height: 100px;width: 100px;
}.red{background-color: red;
}.blue{background-color: #89CFF0;
}.green{background-color: #A7FC00;
}.pink{background-color: #F2B5D4;
}在html文件中声明引入css样式
<head><meta charset="utf-8"><title></title><!-- 声明引入css文件 --><link rel="stylesheet" href="css/float.css" /></head>浮动 float
CSS中的浮动样式（float）是一种布局属性，用于控制元素在页面中的位置。通过设置浮动属性，可以使元素沿着其容器的左侧或右侧浮动，并且其他内容将围绕在该元素的周围。
要使用浮动样式，可以为元素添加以下属性：
- float: left; - 元素向左浮动。
- float: right; - 元素向右浮动。
浮动属性将元素从正常的文档流中移除，并使其从其容器的左侧或右侧浮动。其他内容将沿着浮动元素之后重新排列。
.float{float: left;
}需要注意的是，浮动元素的父级元素也会受到影响。如果一个父级元素包含一个或多个浮动元素，父级元素的高度将坍塌，导致无法包含浮动元素的高度。为了解决这个问题，可以在父级元素中添加一个属性来清除浮动
/*清空浮动*/
.clear-box:after{clear: both;content: "";display: block;
} <body><div class="red float"></div><div class="green float"></div><div class="blue float"></div><div class="pink" style="width: 500px;height: 300px;"></div></body>
浮动之后的div悬浮于原本的页面之上，不占据空间，同时实现了横向排列
子代选择器
用 > 表示其内部的组件，其中的 :hover 表示鼠标移入的效果
/* 子代选择器 */
#menu>li:hover{background-color: #B5B9F1;
}同时设置多个标签的样式用逗号
下面的CSS代码中的，list-style: none;将列表项的默认样式（通常是项目符号或数字）设置为无。这意味着列表项将没有任何可见的项目符号或数字。
ul,ol,li{list-style: none;margin: 0;padding: 0;
}列表浮动可以实现横向展示，注意在浮动之后清空浮动，否则会与下方元素产生重叠
列表元素中嵌套列表可实现二级菜单的效果
<ul id="menu" class="clear-box"><li class="float">首页</li><li>新闻</li><li>娱乐</li><li>学习<ul class="child"><li>Java</li><li>Python</li><li>C++</li></ul></li><li>奥运</li></ul>将二级菜单设置为隐藏，并在鼠标移入时显示
.child{display: none;position: absolute;left: 0;
}
.child>li{padding: 10px 25px;width: 60px;
}.child>li:hover{background-color: #89CFF0;
}#menu>li:hover .child{display: block;
}
定位 position
| 四个属性 | 含义 | 参照物 | 是否占空间 |
|---|---|---|---|
| absolute | 绝对定位 | 参照物是第一个非static定位的父组件，如果找不到，参照物就是html/body； | 不占空间 |
| relative | 相对定位 | 参照物是自身原来的位置； | 占据原来的空间 |
| fixed | 窗口定位 | 参考物是窗口； | 不占空间 |
| static | 流布局不定位 |
<div class="red"></div><div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div><div class="pink" style="position: relative;left: 20px;top: 20px;"></div><div class="blue" style="position: absolute;left: 50px;top: 10px;"></div><div class="red"></div>
盒模型
CSS的盒模型是用于描述HTML元素在页面中的布局和尺寸的模型。它将每个HTML元素看作一个矩形盒子，由四个部分组成：内容区域、内边距、边框和外边距。
padding 内边距
margin 外边距
border 边框
padding: 10px 20px 30px 40px; 四个参数：上、右、下、左
padding: 10px 20px 40px; 三个参数： 上、左右、下
padding: 10px 25px; 两个参数：上下、左右padding: 10px; 一个参数：四周
注：两个相邻盒子的纵向 外边距 会合并，取最大值
没有任何内容的div计算外边距时只保留一侧
<div style="margin:100px ;height: 100px; background-color: #F2B5D4;"></div><div style="margin: 40px; background-color: #89CFF0;"><div style="margin: 20px;background-color: #A7FC00" ></div></div><div style="margin:100px ;height: 100px; background-color: #F4CBAA;"></div>
练习：登录界面
包含组件：背景图、大标题、用户名输入框、密码框、记住密码复选框、登录按钮
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/login.css" /></head><body><div class="background"></div><div class="loginbox" ><div class="title">Easy管理系统</div><div class="item"><label class="float" for="username">用户名</label><div class="line float"><input name="username" type="text" id="username"/></div></div><div class="item"><label class="float" for="userpass">密码</label><div class="line float"><input name="userpass" type="password" id="userpass"/></div></div><div class="rememberbox"><input type="checkbox" name="remember" id="remember" value="true"/><label for="remember">记住密码</label></div><div class="btnbox"><a href="./index.html"><button type="button">登录</button></a></div></div></body>
</html>CSS文件样式大致包含以下内容：
文本 字体 font-family: 微软雅黑;
字号大小 font-size: 30px;
文本居中 text-align: center;
字体加粗 font-weight: bold;
颜色 color: #457B9D;
组件 高度 height: 30px;
宽度 width: 60px;
背景色 background-color: #89CFF0;
边界 border: 4px solid #3B89C7;
圆角 border-radius: 8px;
隐藏边框 outline: none;
定位 绝对定位 position: absolute;
距左侧 left: 50%;
距顶部 top: 30%;
移动自身单位 transform: translate(-50%,-50%); 可实现绝对居中
内边距 padding: 5px;
外边距 margin: 10px 0px;
图片 导入背景图 background-image: url("../image/background.jpeg");
背景窗口占比 background-size: 100%;
.loginbox{border: 2px solid #89CFF0;border-radius: 8px;position: absolute;left: 50%;top: 30%;/* 绝对居中 */transform: translate(-50%,-50%);background-color: #F1FAEE;
}.background{width: 100%;height: 100%;position: absolute;background-image: url("../image/background.jpeg");background-size: 100%;
}.float{float: left;
}.clear-box:after{clear: both;content: "";
}.loginbox>.title{color: #457B9D;font-weight: bold;font-size: 30px;text-align: center;padding: 20px 0px;
}.loginbox label{color: #3B89C7;font-family: 微软雅黑;width: 60px;text-align: center;display: inline-block;padding: 10px;margin: 10px 0px;
}.loginbox input{position: relative;height: 30px;width: 200px;font-size: 20px;border: none;outline: none;
}.line{border: 4px solid #3B89C7;border-radius: 5px;padding: 5px;margin: 10px 0px;
}.loginbox>.item{margin: 10px 40px 0px;
}.rememberbox{margin: 5px 40px;
}.rememberbox>input{transform: translate(20%,20%);width: 20px;height: 15px;
}.rememberbox>label{font-size: 15px;padding: 10px 0px;
}.loginbox button{width: 100px;height: 50px;text-align: center;font-size: 20px;border: none;background-color: #89CFF0;border-radius: 5px;
}.loginbox button:hover{background-color: #457B9D;
}.loginbox .btnbox{text-align: center;padding: 0px 0px 30px 0px;
}
