Night小课堂07 CSS常用网页样式

Night-Zzz

已于 2023-05-17 14:40:13 修改

阅读量328

点赞数 1

文章标签：前端 html5 css3

于 2023-05-17 14:33:34 首次发布

本文链接：https://blog.csdn.net/NoNight_Zzz/article/details/130724326

版权

CSS常用网页样式类型

1.字体样式

字体类型 font-family

从前往后的顺序选择字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体类型</title>
		<style type="text/css">
			#first{
				font-family: "宋体","楷体";
			}
			#second{
				font-family: "楷体";
			}
			#third{
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<div id="first">字体类型</div>
		<div id="second">字体类型</div>
		<div id="third">字体类型</div>
	</body>
</html>

效果图：

字体大小 font-size

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体大小</title>
		<style type="text/css">
			#first{
				font-size: 36px;
			}
			#second{
				font-size:26px;
			}
		</style>
	</head>
	<body>
		<div id="first">字体大小</div>
		<div id="second">字体大小</div>
	</body>
</html>

效果图：

字体风格 font-style

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体风格</title>
			<style type="text/css">
			#first{
				font-style:italic
			}
			#second{
				font-style:normal;
			}
		</style>
	</head>
	<body>
		<div id="first">字体风格</div>
		<div id="second">字体风格</div>
	</body>
</html>

效果图：

字体的粗细 font-weight

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体粗细</title>
			<style type="text/css">
			#first{
				font-weight: lighter;
			}
			#second{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="first">字体粗细</div>
		<div id="second">字体粗细</div>
	</body>
</html>

效果图：

字体属性 font

代码顺序风格-->粗细-->大小-->类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体属性</title>
		<style type="text/css">
			body{
				font: italic bold 20px "宋体";
			}
			
		</style>
	</head>
	<body>
		字体属性
	</body>
</html>

效果图：

2.文本样式

文本颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				color: rgba(199,237,204,0.9);			}
		</style>
	</head>
	<body>
		颜色
	</body>
</html>

效果图：（冷知识：199，237，204是豆沙绿，护眼色）

首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首行缩进</title>
		<style type="text/css">
			#first{}
			#second{text-indent:20px;}
			#third{text-indent:40px;}
		</style>
	</head>
	<body>
		<p id="first">首行缩进</p>
		<p id="second">首行缩进</p>
		<p id="third">首行缩进</p>
	</body>
</html>

效果图：

水平对齐方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水平对齐方式</title>
		<style type="text/css">
			h1{text-align: center;
			}
			h2{text-align: left;
			}
			h3{text-align: right;
			}
		</style>
	</head>
	<body>
		<h1>对齐方式</h1>
		<h2>对齐方式</h2>
		<h3>对齐方式</h3>
	</body>
</html>

效果图：

垂直对齐方式

top 把元素的顶端与行中最高元素的顶端对齐

middle 把此元素放置在父元素的中部

bottom 使元素及其后代元素的底部与整行的底部对齐

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>垂直对齐方式</title>
		<style type="text/css">
			.one{vertical-align:text-top;}
			.two{vertical-align:middle;}
			.three{vertical-align:text-bottom;}
		</style>
	</head>
	<body>
		<p><img src="img/Night.png" />默认</p>
		<p><img src="img/Night.png" class="one"/>顶端对齐</p>
		<p><img src="img/Night.png" class="two"/>中部对齐</p>
		<p><img src="img/Night.png" class="three"/>底端对齐</p>
	</body>
</html>

效果图：

文本修饰

上划线 overline

删除线 line-through

下划线 underline

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>文本修饰</title>
		<style type="text/css">
			h1{
				text-decoration: overline;
			}
			h2{
				text-decoration: line-through;
			}
			h3{
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<h1>段落1</h1>
		<h2>段落2</h2>
		<h3>段落3</h3>
	</body>
</html>

效果图：

文本阴影

h-shadow 必需 水平阴影的位置 允许负值 正值向右负值向左

v-shadow 必需 垂直阴影的位置 允许负值 正值向下负值向上

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>文本阴影</title> 
			<style type="text/css">
				h1 {text-shadow:2px 2px #FF00FF;}
			</style>
	</head>
	<body>
		<h1>阴影效果</h1>
	</body>
</html>

效果图：

3.伪类样式

定义:hover在鼠标移到链接上时添加的特殊样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类样式</title>
		<style type="text/css">
			a:hover{
				background-color: #FF00FF;
			}
		</style>
	</head>
	<body>
		<a href="www.baidu.com" >超链接</a>
		<a href="www.baidu.com" >工具</a>
	</body>
</html>

效果图：

4.列表样式

定义：对HTML列表进行样式的设置（去除小圆圈）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表样式</title>
		<style type="text/css">
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>a</li>
			<li>b</li>
			<li>c</li>
			<li>d</li>
			<li>e</li>
		</ul>
	</body>
</html>

效果图：

5.背景样式

背景颜色

background-color

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景颜色</title>
		<style type="text/css">
			div,p,h1{
				background-color: #FF00FF;
			}
		</style>
	</head>
	<body>
		<div>盒子</div>
		<p>段落</p>
		<h1>标题</h1>
	</body>
</html>

效果图：

背景图像

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景图像</title>
		<style type="text/css">
			body{
				background-image: url(img/Night.png);
			}
		</style>
	</head>
	<body>
		<p>Night</p>
	</body>
</html>

效果图：

背景重复

repeat-x 水平方向平

repeat-y 垂直方向平铺

no-repeat: 不平铺

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景重复</title>
		<style type="text/css">
			body{
				background-image: url(img/Night.png);
				/*background-repeat: repeat-x;*/
				/*background-repeat: repeat-y;*/
				background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<p>Night</p>
		<p>Night</p>
		<p>Night</p>
		<p>Night</p>
		<p>Night</p>
	</body>
</html>

效果图：

背景定位

常用属性值：

Left top 左上

Center top 中上

Right bottom 右下

Center 水平/垂直居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景定位</title>
		<style type="text/css">
			body{
				background-repeat:no-repeat ;
				background-image:url(img/Night.png) ;
				background-attachment: fixed;
				background-position: center ;
			}
		</style>
	</head>
	<body>
	</body>
</html>

效果图：