网页常用css总结：下

最新推荐文章于 2022-05-04 21:59:55 发布

梦忆长安

最新推荐文章于 2022-05-04 21:59:55 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103382612

版权

接着上篇博客，我们再说6个最最常见的css样式；

line-height

此样式一般用于块级元素的垂直对齐；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<span>I love LongYing</span>
		<style>
			span{
				font-family:kunstler script;
				border: black 1px solid;
				display: inline-block;
				height: 72px;
				line-height: 72px;
			}
		</style>
	</body>
</html>

写个span标签，内容是I Love LongYing，设置样式，字体和边框，重点来了：提升至块级标签，然后设置高度，并设置line-height，其值和height相等。这样，显示的文字就会自动垂直对齐；效果如下：

list-style

一般用于设置无序表的样式的，我们先看没有list-style样式的无序表，为了便于观察，这里使用了边框：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<ul>
			<li>语文</li>
			<li>英语</li>
			<li>数学</li>
		</ul>
		<style>
			ul{
				border: red 1px solid;
				/*padding: 0px;
				list-style-type: none;*/
			}
			li{
				border: yellow 1px solid;
			}
		</style>
	</body>
</html>

我们会发现无序表的点是在内容框（li标签）的外边的，这里我们可以使用list-style-position: inside; 将点放到内容框的里面，但是这并不常用，最常用的还是消去点；

我们将上述例题中的list-style-type: none;的注释取消，会得到得到下图效果；

圆点会不再显示，但是，我们不显示圆点之后，前面空白框就没必要存在了，也应该消去；此时，我们再将上述的padding:0px; 的注释消掉，就会得到我们想要的效果：

background

用来设置背景；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<style>
			body{
				background-color: yellowgreen;
				background-image: url(img/Butterfly06.jpg);
				background-repeat: repeat-x;
				/*background-repeat: repeat-y;*/
			}
		</style>
	</body>
</html>

color 是设置背景颜色；
image 是设置背景填充的图片；
repeat 是设置图片填充的方法，repeat-x 横向填充，repeat-y 纵向填充，不设置默认为全屏填充；

上述代码效果如下：

text-indent

是设置文本框输入的数据与文本框左边边框的间距；

不设置的话是顶着左边边框开始输入内容；然后我们设置一下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<input placeholder="请输入用户名" />
		<style>
			input{
				text-indent: 20px;  /*设置间距为20px*/
			}
		</style>
	</body>
</html>

得到的效果如下：

cursor

更改鼠标样式；一般情况下是将鼠标箭头改成小手的样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<span id="buto">登录</span>
		<style>
			#buto{
				display: block;
				width: 200px;
				height: 40px;
				line-height: 40px;
   				border: black 1px solid;
   				text-align: center;
   				
   				cursor: pointer;  /*鼠标箭头改成小手*/
			}			
		</style>
	</body>
</html>

因为鼠标形式我没想到什么办法给截图截下来，因此这里只给出代码，可自行尝试查看效果；

font

用来设置字体的样式的；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body> 
		<span>I love LongYing</span>
		<style>
			span{
				/*font-style: italic;  //设置斜体
				font-weight: bolder;  //设置价款
				font-size: 36px;  //设置字体大小
				font-family: 华文行楷 ,kunstler script;*  //设置字体样式  */
				font:italic bolder 36px 华文行楷 ,kunstler script;
			}			
		</style>
	</body>
</html>

注意：font-family 设置字体样式的时可选择多个，用逗号隔开，浏览器会根据顺序配置使用的字体；比如这里我们设置华文行楷 ,kunstler script 两个字体，浏览器会先去使用第一个华文行楷的字体，如果不支持该字体，则会自动使用下个字体。

font 是直接设置字体的style、weight、size、family 样式，即例题中的font的作用和注释掉的四个语句是一样的，但是要注意：使用font时，一定要按style、weight、size、family的顺序来，不可颠倒；还有，font里可以没有style、weight，但是必须有size、family，否则会报错。