作为前端三大工具之一，css的功能十分强大，可以进行布局，设计样式等。

一、css选择器

1.1 类选择器

通过类别名称选择具有特定类别的 HTML 元素。

类选择器以 . 开头，后面跟着类别名称。

1.2 全选择器

使用信号代替

1.3 伪元素选择器

在元素内容前后添加新元素，元素内容，两个冒号

1.4 ID选择器

通过元素的唯一标识符（ID）选择 HTML 元素。

ID 选择器以 # 开头，后面跟着 ID 名称。

1.5 元素类型选择器

通过元素名称选择 HTML 元素。

1.6 伪类选择器

元素自生状态，一个冒号

1.7 后代选择器

通过指定元素的后代关系选择 HTML 元素。

后代选择器使用空格分隔元素名称。

1.8 紧邻兄弟选择器

紧邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。

1.9 一般兄弟选择器

一般兄弟选择器（~）将两个选择器分开，并匹配第二个选择器的所有迭代元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

二、css实例：登陆界面

这是我用css和html编写的图书借阅管理系统登陆界面。

批注 2023-08-15 225425.png

所用到的css代码及各部分功能如下：

设置链接样式。

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link{color:grey;}
a:visited{color:grey;}
a:hover{color:grey;}
a:active{color:grey;}

设置元素的外边距和内填充。

在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。

在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

*{
	margin: 0;
	padding: 0;
}

设置背景。

\#wrap {
height: 515px;
width: 100;
background-image: url(<http://www.zzu.edu.cn/images/fj/weixintupian_20200402182231.jpg>);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: relative;
}

设置头部样式。

\#head {
height: 50px;
width: 100;
background-color: #480000;
text-align: center;
position: relative;
}

设置尾部样式。

\#foot {
width: 100;
height: 50px;
background-color: #480000;
position: relative;
}

设置登陆界面框（白色框）。

\#wrap .logGet {
height: 408px;
width: 368px;\
position: absolute;
background-color: #FFFFFF;
top: 12%;
right: 15%;
}

设置登录按钮（橙色按钮）。

.logC a button {
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}

设置登陆框上方“登录”字体样式。

.logGet .logD.logDtip .p1 {
display: inline-block;
font-size: 28px;
margin-top: 30px;
width: 86%;
}

设置登录框上方橙色横线。

\#wrap .logGet .logD.logDtip {
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;

设置登录框位置。

.logGet .lgD img {
position: absolute;
top: 12px;
left: 8px;
}

设置登录框中间输入框样式。

.logGet .lgD input {
width: 100%;
height: 42px;
text-indent: 2.5rem;
}

设置登录框中间输入框位置。

\#wrap .logGet .lgD {
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}

设置登录框下方登录按钮位置。

\#wrap .logGet .logC {
width: 86%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

设置标题“图书借阅管理系统”字体样式。

.title {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  /\* 使用css3的transform来实现 \*/
font-size: 24px;
height: 20px;
width: 30%;
}

设置版权声明字体样式。

.copyright {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%);  /\* 使用css3的transform来实现 \*/
height: 60px;
width: 40%;
text-align:center;
}

\#foot .copyright p {
height: 24px;
width: 100%;
}

以下是html文件：

<!doctype html>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
</style>
<div class="header" id="head">
  <div class="title">图书借阅管理系统</div>	
</div>	
<div class="wrap" id="wrap">
	<div class="logGet">
			<!-- 头部提示信息 -->
			<div class="logD logDtip">
				<p class="p1">登录</p>
			</div>
			<!-- 输入框 -->
			<div class="lgD">
				<img src="转存失败，建议直接上传图片文件 img/logName.png" width="20" height="20" alt="转存失败，建议直接上传图片文件">
				<input type="text" placeholder="输入用户名">
			</div>
			<div class="lgD">
				<img src="转存失败，建议直接上传图片文件 img/logPwd.png" width="20" height="20" alt="转存失败，建议直接上传图片文件">
				<input type="password" placeholder="输入用户密码">
			</div>
			<div class="logC">
				<a href="file:///D:/%E5%9B%BE%E4%B9%A6%E5%80%9F%E9%98%85%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/admin-fun.html" target="_self"><button>登 录</button></a>
			</div>
<div class="lgD">
<a href="file:///D:/%E5%9B%BE%E4%B9%A6%E5%80%9F%E9%98%85%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/admin-register.html" target="opentype"><p style="text-align:center" ;="">没有账户，立即注册</p></a>
</div>
		</div>
</div>	
<div class="footer" id="foot">
  <div class="copyright">
    <p>Copyright © 2022 管理信息系统第八组.All Rights Reserved.</p>    
  </div>	
</div>

深入学习css|青训营