简单的CSS样式
小北534 2024-08-22 08:33:01 阅读 93
样式分为三种
内部样式：写在html文件里的样式叫内部样式
内联样式：写在需要的标签中
外部样式：写在外部css文件里
可以通过不同的选择器来选择设置指定组件的样式：
<code><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>code>
<div id="boxa">你好</div>code>
<div class="bgred"></div>code>
<div class="bgred"></div>code>
</body>
创建css文件
在外部css文件中设置几种标签和类的样式：块的宽度和高度；几种背景色
十六进制颜色表示
这里提供一个获取不同颜色十六进制颜色值的网站：ColorDrop
里面有很多好看的颜色搭配，点击即可复制颜色值
<code>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">code>
<title></title>
<!-- 声明引入css文件 -->
<link rel="stylesheet" href="css/float.css" />code>
</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>code>
<div class="green float"></div>code>
<div class="blue float"></div>code>
<div class="pink" style="width: 500px;height: 300px;"></div>code>
</body>
浮动之后的div悬浮于原本的页面之上，不占据空间，同时实现了横向排列
子代选择器
用 > 表示其内部的组件，其中的 :hover 表示鼠标移入的效果
<code>/* 子代选择器 */
#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">code>
<li class="float">首页</li>code>
<li>新闻</li>
<li>娱乐</li>
<li>学习
<ul class="child">code>
<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 | 流布局不定位 |
<code><div class="red"></div>code>
<div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>code>
<div class="pink" style="position: relative;left: 20px;top: 20px;"></div>code>
<div class="blue" style="position: absolute;left: 50px;top: 10px;"></div>code>
<div class="red"></div>code>
盒模型
CSS的盒模型是用于描述HTML元素在页面中的布局和尺寸的模型。它将每个HTML元素看作一个矩形盒子，由四个部分组成：内容区域、内边距、边框和外边距。
padding 内边距
margin 外边距
border 边框
padding: 10px 20px 30px 40px; 四个参数：上、右、下、左
padding: 10px 20px 40px; 三个参数： 上、左右、下
padding: 10px 25px; 两个参数：上下、左右
padding: 10px; 一个参数：四周
注：两个相邻盒子的纵向 外边距 会合并，取最大值
没有任何内容的div计算外边距时只保留一侧
<code><div style="margin:100px ;height: 100px; background-color: #F2B5D4;"></div>code>
<div style="margin: 40px; background-color: #89CFF0;">code>
<div style="margin: 20px;background-color: #A7FC00" ></div>code>
</div>
<div style="margin:100px ;height: 100px; background-color: #F4CBAA;"></div>code>
练习：登录界面
包含组件：背景图、大标题、用户名输入框、密码框、记住密码复选框、登录按钮
<code><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">code>
<title></title>
<link rel="stylesheet" href="css/login.css" />code>
</head>
<body>
<div class="background"></div>code>
<div class="loginbox" >code>
<div class="title">Easy管理系统</div>code>
<div class="item">code>
<label class="float" for="username">用户名</label>code>
<div class="line float">code>
<input name="username" type="text" id="username"/>code>
</div>
</div>
<div class="item">code>
<label class="float" for="userpass">密码</label>code>
<div class="line float">code>
<input name="userpass" type="password" id="userpass"/>code>
</div>
</div>
<div class="rememberbox">code>
<input type="checkbox" name="remember" id="remember" value="true"/>code>
<label for="remember">记住密码</label>code>
</div>
<div class="btnbox">code>
<a href="./index.html">code>
<button type="button">登录</button>code>
</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;
}
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。