简单的CSS样式

最新推荐文章于 2024-08-30 15:33:13 发布

小北534

最新推荐文章于 2024-08-30 15:33:13 发布

阅读量861

点赞数 25

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_63161848/article/details/140738162

版权

样式分为三种

内部样式：写在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;
}

小北534

关注

25
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
简单的CSS样式

CSS样式分为内部样式、外部样式、内联样式；选择器包括ID选择器、标签选择器、类选择器；CSS中的浮动样式（float）是一种布局属性，用于控制元素在页面中的位置；盒模型是用于描述HTML元素在页面中的布局和尺寸的模型。它将每个HTML元素看作一个矩形盒子，由四个部分组成：内容区域、内边距、边框和外边距。
复制链接

扫一扫