CSS笔记5-CSS样式-优快云博客

本文链接：https://blog.youkuaiyun.com/PIUYIXIU/article/details/109323078

本文介绍了HTML的基础元素如div和span，以及CSS中字体、颜色、文本样式和背景图像的使用方法。通过实例展示了如何设置文本阴影、链接状态样式、列表自定义以及渐变背景。还探讨了网页中元素的布局和装饰效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div块级元素
作用：包围+换行
span内联元素
作用：包围（不换行）
font
font-size：字体大小
font-family：字体（如果字体商用，一定要注意版权问题）
font-style：字体风格（italic/oblique斜体 normal默认…）
font-weight：粗细（bord粗体、border更粗、lighter细、100-900）
font-size：字体大小（px、em、rem、cm、mm、pt、pc）
text-indect：缩进
linr-height：行高
text-decoration：划线(underline下划线/overline上划线/linethrow删除线）
color：颜色（十六进制、rgb( , , )、rgba( , , , 透明度【0-1内的小数】)）

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	h1{
		text-shadow:orange 10px 10px 5px;	/*字体阴影：颜色  横纵坐标  发散程度*/	
	}
	a{
		text-decoration:none;
		color:black;
	}
	a:hover{  /*hover表示鼠标悬浮事件*/
		color:orange;
		cursor:pointer; /*表示鼠标悬浮时变手型*/
	}
	/*
	a:link{  link表示未被访问的链接 chrome不兼容
		color:red;
	}
	a:visited{  link表示未被访问的链接
		color:blue;
	}*/
	a:active{  /*active表示鼠标点击事件*/
		color:gray;
	}
	ul li{
		/*list-style-type:square; 自定义无序列表前标图案*/
		margin-left:70px;
		list-style-image:url("img/3.png"); /*将前标设置为自定义图标*/
	}
	.makima{
		/*  x  y  定义横纵坐标
			no-repeat：不重复
			repeat-x：只在x轴上重复
			repeat-y：只在y轴上重复
		*/
		font-size:50px;
		background:orange url("img/1.png") no-repeat;
		background-size:auto; /*不推荐使用 auto表示自动适应 也能写百分比*/
	}
	.here{
		/*background-image:linear-gradient(to bottom,yellow,orange,red,black);   线性（横向）渐变色*/
		background-image:radial-gradient(black 30%,orange 60%,yellow 90%); /*同心圆渐变*/
	}
</style>
</head>
<body>
	<h1>汪汪汪</h1>
	<a href="#">汪汪汪</a>
	<a href="#">汪汪汪</a>
	<a href="#">汪汪汪</a>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<p class="makima"><b>最喜欢玛奇玛小姐了</b><br><br><br><br><br><br><br><br><br><br><br><br></p>
	<p class="here"><b>渐变色</b><br><br><br><br><br><br><br><br><br><br><br><br></p>
</body>
</html>