WEB前端CSS常见样式以及各种简单样式

发布时间:2024年01月22日

CSS常见样式

CSS语法结构

选择器表达式{
		key:value;
		....
		...
}

margin、padding

margin:外边距

padding:内边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			body{
				width: 800px;
				height: 800px;
				border: 1px solid rebeccapurple;
			}
			
			
			div{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				/*  内边距:内容部分跟边框的距离 */
				/* padding: 10px; */
				/* 外边距:标签跟父容器之间的距离 */
				/* margin: 10px; */
				
				/* 单独操作某个边距 */
				/* margin-left: 20px; */
				
				/* 使用多参数模式 */
				/* 垂直方向  水平方向  */
				/* margin: 10px 50px; */
				/*  top  left bottom right */
				/* margin: 10px 50px 100px 200px; */
				
				
				/* 参数顺序与margin同 */
				/* padding: 10px;
				padding: 10px  100px;
				padding: 0px  100px  1000px 2000px; */
				
				/* 可以控制标签水平方向居中 */
				margin: auto;
			}
			
		</style>
	</head>
	<body>
		<div>123</div>
	</body>
</html>

常见的简单样式

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid rebeccapurple;
				/* 内容颜色 */
				color: black;
				background-color: red;
				/* 透明 取值范围0-1 0完全透明 1不透明*/
				/* 透明属性 可以隐藏标签但是不会取消标签在页面中相对位置 */
				/* opacity: 0; */
				/* display: none 会让标签完全消失在页面中 */
				/* display: none; */
				/* visibility 类似opacity:0将标签隐藏但是保留其位置关系*/
				/* visibility: hidden; */
				/* 移出屏幕 */
				/* margin-left: -150px; */
				/* 将网页置灰 */
				filter: grayscale();
			}
			
			span{
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div>123123</div>
		<span></span>
	</body>
</html>

border样式

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				/* border:red solid 1px; */
				border-width: 10px;
				border-style: solid;
				border-color: rebeccapurple;
				
				/* border-radius可以用来设置边框弧度 支持某个角的单独设置 */
				/* border-radius: 50%; */
				border-bottom-left-radius: 20px;
				border-top-right-radius: 20px;
				
				/* boder样式支持每一条边进行单独设置 */
				border-left: 5px dotted green;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

font样式

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid rebeccapurple;
				/* 字体大小 */
				font-size: 30px;
				font-family: Arial, Helvetica, sans-serif;
				/* bold会自动选择适合字体最粗程度的效果 */
				font-weight: bold;
				/* font-style可以用来设置字体斜体 */
				font-style: italic;
				/* font-smooth: unset; */
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

text样式

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid rebeccapurple;
				
				/* 水平居中 */
				/* text-align: center; */
				/* 垂直居中 */
				/* line-height: 100px; */
				/* 设置上中下划线 */
				text-decoration: overline;
				/* 设置大小写以及首字母大写 */
				text-transform: capitalize;
				
				/* 实现省略号的效果 两个属性需要搭配使用 */
				/* text-overflow: ellipsis;
				overflow: hidden; */
				
				/* 自动换行以及 滑动条 */
				word-wrap: break-word;
				overflow: scroll;
			}
		</style>
	</head>
	<body>
		<div>
			ABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEFABCDEF
		</div>
	</body>
</html>

backgrond样式

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			div{
				width: 10000px;
				height: 10000px;
				border: 1px solid rebeccapurple;
				
				background-color: aqua;
				
				background-image: url("img/123.webp");
				/* background-size: 100px 100px; */
				/* 常用于截取精灵图中的图片 */
				/* 精灵图一般是为了节省服务器的开销而存在的 */
				/* background-position: -28px -116px; */
				
				/* repeat可以用于将提前至循环图片 展示在页面上 让页面有一个看似无边无际的背景 */
				/* background-repeat: repeat; */
				
				/*background-size除了可以规定具体夸高意外,还可以使用cover让图片自适应页面*/
				background-size: cover;
				/* fixed是将背景图片固定在页面上,不随滑动而发生改变 */
				background-attachment: fixed;
				background: url("img/1.jpeg");
			}
		</style>
	</head>
	<body>
		<div>
			<p>1231231231231231</p>
			<p>1231231231231231</p>
			<p>1231231231231231</p>
			<p>1231231231231231</p>
			<p>1231231231231231</p>
			<p>1231231231231231</p>
			
		</div>
	</body>
</html>

Position样式

  • fixed
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			body{
				height: 10000px;
				background-image: url("img/123.webp");
			}
			.container{
				width: 500px;
				height: 500px;
				background-color: blue;
			}
			.postion_div{
				width: 100px;
				height: 100px;
				background-color: white;
				/* fixed 定位会将标签脱离父标签的掌控,使它跟页面保证固定的位置关系*/
				position: fixed;
				right: 10px;
				bottom: 10px;
				text-align: center;
				line-height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="postion_div">
				回到顶部
			</div>
		</div>
	</body>
</html>
  • absolute
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 800px;
				background-color: rebeccapurple;
				position: relative;
			}
			
			/* 绝对定位是指子标签跟父标签产生绝对的位置关系,这种位置关系不会被其他标签所影响 */
			/* 如果子标签是absolute定位那么父标签必须是relative定位,否则子标签会向上一级寻找具有relative定位标签 */
			.postion_div{
				width: 100px;
				height: 100px;
				background-color: white;
				position: absolute;
				/* 子标签左边距离父标签的左边的距离 */
				/* left: 0px; */
				/* 子标签上边距离父标签的上边的距离 */
				/* top: 0px; */
				/* 子标签底边距离父标签的底边的距离 */
				bottom: 0px;
				/* 子标签右边距离父标签的右边的距离 */
				right:0px
			}
		</style>
	</head>
	<body>
		<p>23112312312312311231231231</p>
		<p>231123122311231231231312312311231231231</p>
		<p>23112312312312311231231231</p>
		<p>23112312312312311231231231</p>
		<p>231123122311231231231312312311231231231</p>
		<p>23112312312312311231231231</p>
		<p>23112312312312311231231231</p>
		<p>231123122311231231231312312311231231231</p>
		<p>23112312312312311231231231</p>
		<p>23112312312312311231231231</p>
		<div class="postion_div">
			回到顶部
		</div>
	</body>
</html>

导航栏案例

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.contaner {
				height: 40px;
				border: 1px solid red;
			}

			.contaner>div {
				/* 最初float是用于文字环绕图片特效的后来用于布局,让标签进行左对齐或右对齐 */
				/* 当float是right时候,标签顺序会发生逆转 */
				float: right;
				height: 40px;
				line-height: 40px;
				margin-left: 20px;
			}

			.contaner>div:hover {
				color: cadetblue;
			}

			.contaner>.homepage:hover>div {
				display: block;
			}

			.homepage>div {
				display: none;
				position: absolute;
				top:30px;
			}
			.homepage{
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="contaner">
			<div class="homepage">首页
				<div>
					<div>菜单1</div>
					<div>菜单1</div>
					<div>菜单1</div>
					<div>菜单1</div>
				</div>
			</div>
			<div>客服</div>
			<div>收藏</div>
			<div>电话</div>
		</div>
	</body>
</html>

阴影特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 150px;
				height: 80px;
				border: 1px solid rebeccapurple;
				text-align: center;
				line-height: 80px;
				border-radius: 20px;
				/* 第一参数是阴影x轴的偏移量 */
				/* 第二个参数是阴影在y轴上偏移量*/
				/* 第三个参数是阴影模糊度 */
				/* 第四个参数是颜色 */
	
				text-shadow: 2px 2px 10px rebeccapurple,
				-2px 2px 10px rebeccapurple,
				2px -2px 10px rebeccapurple,
				-2px -2px 10px rebeccapurple;
				box-shadow:none;
				/* 过渡效果对大部分css样式起作用 */
				transition: 2s;
			}
			
			div:hover{
				width: 75px;
				height: 40px;
				line-height: 40px;
				box-shadow:  2px 2px 10px rebeccapurple,
				-2px 2px 10px rebeccapurple,
				2px -2px 10px rebeccapurple,
				-2px -2px 10px rebeccapurple;

			}
		</style>
	</head>
	<body>
		<div>按钮</div>
	</body>
</html>

表单再补充

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input{
				height: 500px;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get" enctype="application/x-www-form-urlencoded">
			<!-- cols表示多行文本框有多少列 -->
			<!-- rows表示多行文本框有多少行 -->
			<textarea name="my_introduce" id="" cols="30" rows="10">
				
			</textarea>
			<input type="submit" name="" id="">
		</form>
	</body>
</html>
文章来源:https://blog.csdn.net/2301_76602495/article/details/135748166
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。