书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

文本与边框

文本控制

  • color 文本颜色
  • direction 文本方向
  • letter-spacing 字符间距
  • line-hight 行高
  • text-align 文本对齐
  • text-shadow 文本阴影
  • word-spacing 设置字间距

实验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			div {
				/*设置颜色*/
				color: red;
				/*设置文字大小*/
				font-size: 100px;
				
				/*设置字体
				font-family: "arial rounded mt bold";*/
				direction: right;
				
				/*文本间距*/
				letter-spacing: 20px;
				
				/*设置行高*/
				line-height: 110px;
				
				/*文本对齐*/
				text-align: left;
				text-shadow: 0.1em 0.1em 0.15em #073312;
				
				word-spacing: 100px;
		
			}
		</style>
	</head>
	<body>
		
		<div>
			HelloWorld!
		</div>
	</body>
</html>

实验截图

images


边框控制

  • border-width 边框设置宽度
  • border-color 边框设置颜色
  • border-style 边框的样式

实验代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#warp {
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				border-style: dashed;
				border-radius: 50%;
				border-color: #FF0000;
				border-width: 5px;
				border-style: dotted;
				border-style: groove;
				border-style: solid;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<div id="warp">
			Hello World!
		</div>
	</body>
</html>

实验效果

images