css文本属性

最新推荐文章于 2022-11-20 10:54:33 发布

meitianjinbuyidiandi

最新推荐文章于 2022-11-20 10:54:33 发布

阅读量140

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_45119314/article/details/107399823

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css文本属性

示例

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   	<style type="text/css">
   		.box{
   			width: 300px;/* 宽度 */
   			height: 200px;/* 高度 */
   			background: #FFFF00;/* 背景颜色 */
   			font-size: 17px;/* 字体大小 */
   			font-family:arial,"bodoni mt","草书","楷体","幼圆";/* 字体名称 */
   			color: #00FFFF;/* 字体颜色 */
   			font-weight: 900;/* 文本加粗 100-900/bold*/
   			font-style:italic;/* 文本倾斜 */
   			/* line-height: 20px;/* 文本行高，单行如果行高和高度一样是效果是居中的 */ 
   			line-height: 2;/* 不加px是以文字倍数为行高 */
   		}
   		strong{
   			font-weight: normal;/* 取消加粗 */
   		}
   		em{
   			font-style:normal;/* 取消倾斜 */
   		}
   		.box2{
   			width: 300px;
   			height: 300px;
   			background: #f000f0;
   			font-size: 20px;/* 文字大小 */
   			text-align: justify;/* 文本水平对齐方式-两端对齐，两端对齐针对英文，中文作用不大，最后一行不生效，只一行无效。 left 左right右center居中*/
   			text-indent: 2em;/* 首行缩进-两字符 */
   			text-decoration:underline  line-through/* ;划线属性-下划线 overline上划线 删除线 */
   		}
   		a{
   			text-decoration: none;/* 取消下划线 */
   		}
   		.box3{
   			width: 200px;
   			height: 200px;
   			background: #ff0f00;
   			letter-spacing: 10px;/* 字间距 */
   			text-align: center;/* 水平对齐方式-居中 */
   			text-transform: lowercase;/* 大小写切换-切小写 */
   			vertical-align: middle;/* 垂直对齐方式-此属性在纯文字文本不生效 */
   			font:italic 900 18px/200px 隶书;/* 倾斜 加粗 字号/行高 字体 */
   		}
   	</style>
   </head>
   <body>
   	css基础
   	<div class="box">CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性CSS属性</div>
   	<strong>加粗</strong>
   	<br>
   	<em>斜体</em>
   	<div class="box2">两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，123214gjmhbvh两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，两端对齐，</div>
   	<a href="#">链接</a>
   	<div class="box3">缩写居中Ass</div>
   </body>
</html>