css例子：按钮代码的修改

最新推荐文章于 2023-12-07 14:42:12 发布

快乐的高兴的学习代码中

最新推荐文章于 2023-12-07 14:42:12 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118276310

版权

按钮代码的修改并因此引发的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
		button{
			padding:6px 16px;
			border:1px solid #446d88;
			background:#58a linear-gradient(#77a0bb,#58a);
			border-radius:4px;
			box-shadow:0 1px 5px gray;
			color:white;
			text-shadow：0-1px 1px #335166;
			font-size:20px;
			line-height:30px;
		}
		</style>
	</head>
	<body>
	<button>yes</button>
	</body>
</html>

存在情况1：假设当我需要更改字体大小时，会发现图像的效果存在了问题

字体大小的更改用f12那个地方进行调整演示，而不是要实际更改数值，会更明确发现它存在的缺陷

为了解决这个问题，我们需要调整的有两个地方，行高和字体大小。

因此有了一个结论，当某些值相互依赖的时候，应该把他们的相互关系用代码表示出来。

根据代码可以计算出来，行高是字体的1.5倍（30/20=1.5）

因此，现在可以把line-height的值设为1.5（这里其实不是很明白）

但是，还是存在了问题，把值设为固定值，每改一次，就需要重新进行更改了一次。所有用百分比或者em会好很多。把长度值改为em单位，效果的值就变成可以缩放的了。

这样，就可以在一处控制按钮的所有尺寸样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
       	/* 代码里的单位换算还没懂如何换算的 */
		button{
			padding:.3em .8em;
			border:1px solid #446d88;
			background:#58a linear-gradient(#77a0bb,#58a);
			border-radius:.2em;
			box-shadow:0 .05em .25em gray;
			color:white;
			text-shadow：0-0.5em 0.5em #335166;
			/* 假设父级的字号是16px */
			font-size:125%; 
			line-height:1.5;
		}
		</style>
	</head>
	<body>
	<button>yes</button>
	</body>
</html>

存在问题2：颜色更改问题

假设需要创造一个红色的取消按钮，或者一个绿色的确定按钮

难点在于：border-color background box-shadow text-shaow四个值的调整

根据按钮的亮面和暗面相对于主色调的变亮和变暗程度来推导其他颜色的亮色和暗色版本。

把按钮放在非白色的背景上如何设置呢？

解题思路如下：把半透明的黑色或者白色叠加在主色调上，就可以产生主色调的亮色和暗色变体了。

也没有很理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
		button{
			padding:.3em .8em;
			border:1px solid rgba(0,0,0,.1);
			/* 推荐使用hsla,而不是rgba来产生半透明的白色，因为它的字符长度更短，敲起来也更快，这归功于它的重复度更低 */
			/* linear-gradient 线性渐变 transparent 全透明 */
			background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
			border-radius:.2em;
			/* 边框阴影 */
			box-shadow:0 .05em .25em rgba(0,0,0,0.5);
			color:white;
			/* 文本阴影 */
			text-shadow：0-0.5em 0.5em rgba(0,0,0,.5);
			font-size:125%; 
			line-height:1.5;
		}
		/* 更改背景色，得到其他颜色版本的按钮 */
		button.cancel{
			background-color: #c00;
		}
		button.ok{
			background-color: #6b0;
		}
		</style>
	</head>
	<body>
	<button>yes</button>
	<button class="ok">ok</button>
	<button class="cancel">cancel</button>
	</body>
</html>

代码易维护和代码量少不可兼得

eg:为每一个元素添加10px宽的边框，但是左侧不加边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>money</title>
		<style>
		button{
			padding:.3em .8em;
			border:1px solid rgba(0,0,0,.1);
			background:#58a linear-gradient(hsla(0,0%,100%,.2),transparent);
			border-radius:.2em;
			box-shadow:0 .05em .25em rgba(0,0,0,0.5);
			color:white;
			text-shadow：0-0.5em 0.5em rgba(0,0,0,.5);
			font-size:125%; 
			line-height:1.5;
			/* 目的 为一个元素添加一个10px宽的边框 */
			/* 但下面这种方式日后改变边框的宽度，需要同时改变3个地方 */
			/* border-width:10px 10px 10px 0; */
			/* 下面这样改变会方便些 */
                border-width:10px;
				border-left-width:0;
		}
		button.cancel{
			background-color: #c00;
		}
		button.ok{
			background-color: #6b0;
		}
		</style>
	</head>
	<body>
	<button>yes</button>
	<button class="ok">ok</button>
	<button class="cancel">cancel</button>
	</body>
</html>

内容来自书css揭秘