CSS实例【三】

2021-06-17 18:03:48 阅读：150 来源： 互联网

标签：Arial color text oblique 实例字体 font CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p.serif{font-family: "times new roman",times,serif;font-size: 200%;font-style: normal;}
		p.sansserif{font-family: Arial, Helvetica, sans-serif;font-size:2.5rem;font-style: oblique;}//如果系统有Arial这种字体，就显示Arial这种字体。如果系统没有Arial这种字体，就以Helvetica 这种字体
		p.sma{font-variant: small-caps;}
		body{font-size: 100%;}
		/* 未访问链接 */
		/* a:link{color: #2756FE;text-decoration: none;} */
		/* 已经访问的链接 */
		/* a:visited{color: #7FFFD4;} */
		/* 鼠标移动到链接上 */
		/* a:hover{color: #FAEBD7;text-decoration: underline;font-size: 150%;} */
		/* 点击时 */
		/* a:active{color: #FF0000;background-color: #ffb000;font-family: "arial narrow";} */
		
		a:link,a:visited{
			display: block;
			font-weight: bold;/* 定义字体粗细 */
			color: #2756FE;
			background-color: #7FFFD4;
			width: 7.5rem;
			text-align: center;
			padding: 0.25rem;
			text-decoration: none;
		}
		a:hover{
			background-color: #66cfae;
		}
		</style>
	</head>
	<body>
	<p class="serif">这一段的字体是 Time New roman</p>
	<p class="sansserif">这一段字体是Arial</p>
	<p>italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。</p>
	<p class="sma">font-variant以小型大写字体或者正常字体显示文本。（异体）This is a dog.</p>
	<p><b><a href="//www.baidu.com/" target="_blank">baidu</a></b></p>
	<p><b><a href="https://www.runoob.com/css/css-tutorial.html" target="_blank">cainiao</a></b></p>
	<p><b>注意：hover在link和visited后，顺序不可变，active在hover后面</b></p>
	</body>
</html>

好饿啊，脑子稍微动一动就很容易饿，吃货本性暴露了。
去看牙的时候，牙医小姐姐说口水这么多，是不是很馋，然后把牙吃坏了，呜呜～～
后续更新，喜欢的点关注哦

标签：Arial,color,text,oblique,实例,字体,font,CSS
来源： https://blog.csdn.net/yogurt_sweets/article/details/117998807

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS实例【三】