HTML第三天-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   p{
			   /* 1px边框的粗细  solid 实线  dashed 虚线  red 红色 */
			   border: 1px dashed red;
			   /* top bottom   */
			   border-top: 2px solid  #000000;
			   /* 下边框线的颜色 */
			   border-bottom-color: aqua;
			   /* 左边框 实线 */
			   border-left-style: solid;
			   /* 右边框的宽度 */
			   border-right-width: 5px;
		   }
		   a{
			   border: 1px solid yellow;
                /* 取消下划线 */
               text-decoration:none;
		   }
		</style>
	</head>
	<body>
		<p>我是谁呀</p>
		<a href="#">超链接</a>
	</body>
</html>

字体样式

字体大小的三种表达方式：

font-family: "仿宋"; 字体样式

/* 斜体 */ font-style:italic ;
/* 加粗 bold*/ font-weight:bold;

文本样式

水平对齐方式 center居中 text-align: center;

垂直居中 vertical-align: middle;
           /* 行高如果与盒子高度一致有居中效果 */
           line-height: 200px;
默认换行加上nowrap属性后不换行    white-space: nowrap;
字间距 letter-spacing: 10px;
em相当于当前的字号    text-indent: 2em;
修饰线 underline下滑线   text-decoration: underline;
删除线 text-decoration: line-through;

取消下滑线 text-decoration: none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   p{
			   width: 200px;
			   height: 200px;
			   border: 1px solid red;
			   /* 水平对齐方式 center居中 */
			   text-align: center;
			   /* 行高  如果与盒子高度一致  有居中效果 */
			   line-height: 200px;
			   /* 默认换行  加上nowrap属性后不换行 */
			   white-space: nowrap;
			   
			   /* 字间距 */
			   letter-spacing: 10px;
			   /* em相当于当前的字号 */
			   text-indent: 2em;
			   /* 修饰线   underline下滑线 */
			   text-decoration: underline;
			   /* 删除线 */
			   text-decoration: line-through;
		   }
		   div{
			   width: 200px;
			   height: 200px;
			   border: 1px solid #00FFFF;
		   }
		   table{
			   border: 1px solid red;
		   }
		   td{
			   /* 水平居中 */
			   text-align: center;
			   /* 垂直居中 */
			   vertical-align: middle;
		   }
		   a{
			   /* 取消下滑线 */
			   text-decoration: none;
		   }
		</style>
	</head>
	<body>
		<p>测试p标签符</p>
		<div>ehbrtxjsyhtrfv</div><br>
		<table border="1px" width="200px" height="200px">
			<tr>
				<td valign="bottom">aa</td>
			</tr>
		</table><br />
		<a href="">超链接</a>
	</body>
</html>

文本阴影

字体阴影的两种表达方式查看在浏览器上按F12

/* text-shadow: 0px 5px 1px red; */
text-shadow: 2px 10px 3px rgb(1,2,3,0.8);

背景样式

/* 背景颜色 */    background-color: #00FFFF;
/*背景图片 */ background-image: url(../img/4.gif);
1. 不重复 no-repeat x轴重复 repeat-x* 重复repeat   background-repeat: no-repeat;
   图片距离边框的距离 background-position: 10% 10%;
图片大小   background-size: 10px;
颜色图片不重复图片大小
代码合集 background: red url(../img/京东手机.png) no-repeat 10px 10px ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				/* 背景颜色 */
				background-color: #00FFFF;
				/*背景图片  */
				background-image: url(../img/4.gif);
				
				/* 不重复 no-repeat  x轴重复repeat-x* 重复repeat */
				background-repeat: no-repeat;
				
				/* 图片距离边框的距离 */
				background-position: 10% 10%;
				/* 图片大小 */
				background-size: 10px;
				
				background:  red url(../img/京东手机.png) no-repeat 10px 10px ;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

动画效果

在标签中写上命令：p{ }

transition:5s; 从一种元素过渡到另一种元素

设置鼠标浮动 p:hover{ }

overflow

/* hidden隐藏 auto文本框*/
overflow: auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		   div{
			   width: 200px;
			   height: 200px;
			   border: 1px solid #FF0000;
			   /* hidden隐藏  auto文本框*/
			  overflow: auto;
		   }
		</style>
	</head>
	<body>
		<div>她如何让发黑拉完后分类法的说法离婚苏打绿奴人8二月份热火不太好让他
		发热帖湖北警官地方v绝对是覅违法第三空间的封建快攻肥肉回归恶化覅文案
		士大夫via俄外交官发热还不是太弗格森对客人三天内头儿带来不好么肉卡高卡热量和开办费顶礼膜拜
		体会吧摩尔看过Joe去tore囧哥汇入汇款了放得开v给你发的魁北克发动了进攻热量苦尽甘来如果没法考虑到
		反馈给客人就过来看了对抗赛冠军阿克洛夫大规模</div>
	</body>
</html>