【CSS】文本，字体样式，文本溢出

最新推荐文章于 2024-11-16 14:38:55 发布

柠N檬

最新推荐文章于 2024-11-16 14:38:55 发布

阅读量154

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/ck_kc/article/details/125287003

版权

字体样式

字体粗细 :
               100-900
               normal默认
                   bold/bolder:粗和更粗
                   light/lighter:细或更细

字体风格:
               normal默认
               italic：使用字体本身的斜体属性
                   oblique:让没有斜体属性的文字倾斜

字体类型：Times New Roman 宋体
中文类型必须放在英文类型之后,
如果浏览器不支持第一个，会往下自动使用第二个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				/* 字体大小,不设置谷歌默认字体大小16px */
				font-size:30px;
				/* 字体粗细 :
				     100-900
				     normal默认
					 bold/bolder:粗和更粗
					 light/lighter:细或更细
				*/
				font-weight:900;
				/* 字体风格:  
				    normal默认
				    italic：使用字体本身的斜体属性
					oblique:让没有斜体属性的文字倾斜
				*/
				font-style: normal;
				/* 字体类型：Times New Roman 宋体 
				   中文类型必须放在英文类型之后,
				   如果浏览器不支持第一个，会往下自动使用第二个
				*/
				font-family:"Times New Roman","宋体","黑体";
				
				/* 四个一块设置:风格 粗细 大小 类型 */
				/* font:normal 900 30px "Times New Roman","宋体","黑体"; */
				
			}
		</style>
	</head>
	<body>
		<div>数据1数据1数据1数据1数据1数据1数据1数据1</div>
	</body>
</html>

文本样式

文本水平对齐方式
               center:居中
                   left:左对齐
                   right:右对齐
文本缩进
               px;是绝对像素
                   1em:如果父元素设置了字体大小，1em=1个字体大小
                   不设置1em=16px
                       1em代表1个字符
文本装饰
               none默认
               underline:下划线
                   overline:上划线
                   line-through:删除线
行高
               设置文本相对于父元素垂直对齐方式：行高与高度一直
大小写设置：
               lowercase全部小写
               uppercase全部转换为大写
               capitalize首字母大写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				/* 字体颜色 */
				color: red;
				/* 文本水平对齐方式
				     center:居中
					 left:左对齐
					 right:右对齐
				 */
			    text-align: left;
				/* 
				文本缩进 
				    px;是绝对像素
					1em:如果父元素设置了字体大小，1em=1个字体大小
					    不设置1em=16px
						1em代表1个字符
			   */
				text-indent:2em;
				/* 文本装饰 
				     none默认
				     underline:下划线
					 overline:上划线
					 line-through:删除线
				*/
				text-decoration:underline;
				height: 50px;
				/* 
				行高
				  设置文本相对于父元素垂直对齐方式：行高与高度一直
				 */
				line-height:50px;
				/* 大小写设置：
				   lowercase全部小写 
				   uppercase全部转换为大写
				   capitalize首字母大写
				*/
				text-transform: capitalize;
			    /* 中文字符间距设置 */
				/* letter-spacing: 10px; */
				/* 英文单词间距设置 */
				word-spacing: 20px;
				
			}
			
			a{
				text-decoration: none;
				color: brown;
			}
			img,input{
				/* 中线对齐，只能对不换行元素有效 */
				vertical-align: middle;
			}
			
			#ft{
				font-size: 10px;
			}
			p{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div>
			数据数据数据数据数据数据数据welcome qiku!
		</div>
		<a href="#">
			数据数据数据数据数据数据数据Welcome Qiku!
		</a>
		<img src="./img/002.png" alt="">
	    <span>
	          快乐快乐快乐快乐快乐快乐
	    </span>
		<span>
		      快乐快乐快乐快乐快乐快乐
		</span><br>
		<input type="checkbox"><a id="ft" href="#">百度百度百度</a>
		<p><img src="./img/002.png" alt=""></p>
	</body>
</html>

文本溢出

visible：默认
               scroll:滚动条，需要不需要都会出现滚滚动条
               auto:如果如要才会出现
               overflow:垂直或水平方向有溢出就会出现滚动条
               hidden:剪掉溢出的内容
文本不换行显示 nowrap
文本省略，必须配合 nowrap 和 hidden 使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.first{
			     /* 给div加实线边框 */
				border: 5px solid red;
				width: 300px;
				height: 100px;
				/* visible：默认
				   scroll:滚动条，需要不需要都会出现滚滚动条
				   auto:如果如要才会出现
				   overflow:垂直或水平方向有溢出就会出现滚动条
				   hidden:剪掉溢出的内容
				*/
				 overflow:hidden; 
			}
			.second{
				width: 150px;
				height: 100px;
				border: 5px solid blue;
				/* 
				文本不换行显示   nowrap  
			    */
				white-space:nowrap;
				overflow: hidden; 
				/* 文本省略，必须配合 nowrap 和 hidden 使用*/
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="first">
			“车主和物流企业的用油成本也将有所增加。以油箱容量为50升的普通私家车计算，本次调价后，车主加满一箱油将多花15元左右；对于满载50吨的大型物流运输车辆而言，平均每行驶一百公里，燃油费用将增加12.8元。
		</div>
		<div class="second">
			长江后浪推前浪少年强则国强，
			长江后浪推前浪少年强则国强
			长江后浪推前浪少年强则国强
			长江后浪推前浪少年强则国强
			长江后浪推前浪少年强则国强
		</div>
	</body>
</html>