CSS笔记5-CSS样式

本文介绍了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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值