HTML——文字样式

最新推荐文章于 2023-12-15 15:46:19 发布

Jhinhua

最新推荐文章于 2023-12-15 15:46:19 发布

阅读量334

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104899580

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

文字样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文字样式设计</title>
		<style>
			p{
				background-color: paleturquoise;
				/* 设置文字的字体 
				可以设置多种字体
					使用空格隔开即可 字体是汉字或者多个单词组成的使用引号包含
				
				使用的时候使用哪个字体 --- 浏览器识别 识别哪个用那个 都不识别用默认的
				*/
				font-family: "楷体"; 
				
				/* 设置文字的颜色 
				同背景颜色赋值
				*/
				color: red;
				
				/* 设置字号 
				单位：px  像素
				em 默认字体的倍数
				*/
				font-size: 2em;
				
				/* 设置字体加粗 
					100到900  100-500是常规字体 600-900是加粗字体
					bold
					bolder  加粗
					normal 常规字体
					lighter 细体
				*/
			   font-weight: normal;
			   
			   /* 设置字体风格: 斜体oblique 和 italic*/
			   font-style: italic;
				
			   /* 设置标签内容的水平对齐方式 
			   left
			   center
			   right
			   */
			   text-align: left;
			   
			   /* 设置行高 
			   一行文本的高度 = font-size + 文本与标签上下的间隙
			   
			   当标签中只有一行文本的时候 行高设置成标签的高度 文本内容是可以达到上下居中的
			   */
			   line-height: 60px;
			   
			   /* 文本修饰 
			   underline 下划线
			   line-through 删除线
			   overline 上划线
			   none  去除划线修饰
			   */
			   text-decoration: none;
			   
			   /* 首行缩进  2个字符-- 2em  3个字符就是3em */
			   text-indent: 2em;
			   
			   /* 字符和字符之间的间隙 
			   不管是汉字还是英文字母 都当做是字符 都会设置间隙
			   */
			   letter-spacing: 10px;
			   
			   /* 需求： 汉字之间的间隙是10px 单词的字母之间的间隙不变 但是单词和单词之间的间隙是10px */
			   /* 单词之间的间隙 
			   对于汉字没有影响的  影响的是英文单词和单词之间的间隙
			   */
			   /* word-spacing: 10px; */
			   
				/* 文本阴影 
				水平偏移
				垂直偏移
				羽化度 --- 设置的是阴影的虚化度  值越大 模糊度越高
				阴影的颜色
				*/
				text-shadow: 5px 5px 5px gray;
			}
			p > span{
				/* 字符和字符之前没有变化 */
				letter-spacing: 0px; 
				 /* 单词和单词之间的间隙 */
				 word-spacing: 10px;
			}
			
			div span{
				background-color: palevioletred;
			}
			div{
				background-color: palegoldenrod;
				text-align: center;
			}
			li{
				background-color: paleturquoise;
				height: 50px;
				line-height: 50px;
			}
			a{
				/* 去除下划线 */
				text-decoration: none;
				position: fixed;
			}
		</style>
	</head>
	<body>
		<p>岱宗夫如何？齐鲁青未了。
造化钟神秀，阴阳割昏晓。
荡胸生曾云，决眦入归鸟。
会当凌绝顶，一览众山小。<span>hello nice to meet you</span></p>
		
		<div>
			<span>望岳</span>
		</div>
		
		<li>苹果</li>
		
		<a href="http://www.baidu.com">百度一下</a>
		
	</body>
</html>

Jhinhua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML——文字样式

文字样式 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字样式设计</title> <style> p{ background-color: paleturquoise; /* 设置文字的字体 ...
复制链接

扫一扫