CSS实例【十二】

最新推荐文章于 2022-11-17 21:11:47 发布

虾尾丸子

最新推荐文章于 2022-11-17 21:11:47 发布

阅读量106

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/yogurt_sweets/article/details/118109377

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最后一波CSS基础内容来了～

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* home和next用了同一个图的不同位置 */
			img.home{
				width:46px;
				height: 44px;
				background:url(image/sun.gif) 0 0;
			}
			img.next{
				width: 43px;
				height: 44px;
				background: url(image/sun.gif) -91px 0;
			}
			#navlist{position: relative;}
			#navlist li{
				margin:0;
				padding: 0;
				list-style: none;
				position: absolute;
				top: 10;
			}
			#navlist li,#navlist a{
				height: 44px;
				display: block;
			}
			#prev{
				left:50px;
				width: 90px;
			}
			#prev{
				/* 进链接的图片 */
				background: url('image/img_navsprites.png') -99px -30px;
			}
			#prev a:hover{
				background: url('image/img_navsprites2.png')-97px -110px;
				/* 往右为负多少，第二个往下为负多少 */
			}
			[title]
			{
				color: blue;
			}
			[title=runoob]
			{
				border: 5px solid green;
			}
			[title~=hello]
			{
				color: #CA5BFB; 
			}
			[lang |=en]{
				color: #FBCD72;
			}
		</style>
	</head>
	<body>
	<!-- 	<div >
			<h1>一、CSS图像拼合</h1>
			<h2>1.图像拼合</h2>
			<p>定义了一个空的img.gif，因为src不能为空</p>
			<img class="home" src="img.gif" ><br><br>
			<img class="next" src="img.gif" />
			<h2>2.导航列表</h2>
			<ul id="navlist"> -->
				<!-- 点击图片会跳转到链接里 -->
				<!-- <li id="prev"><a href="https://www.baidu.com/"</a></li>
			</ul>
		</div> -->
		
		<div>
			<h1>二、CSS属性选择器</h1>
			<h2>1.选择具有title属性的元素：</h2>
			<p>相当于指定带有title标签的内容按照要求做合适的样式</p>
			<h3>Will apple to:</h3>
			<h4 title="Hello World">Hello World!</h4>
			<a title="baidu" href="https://www.baidu.com/">baidu.com</a>
			<h2>2.选择标题=一个特定值的元素</h2>
			<h4 title="runoob" href="//www.runoob.com/">runoob</h4>
			<hr >
			
			<h2>3.选择标题=一个特定值的元素（使用～分隔属性和值）</h2>
			<h3 title="hello wanzi">hello wanzi</h3>
			<p title="student hello">Hello CSS students!</p>
			<hr >
			
			
			<h2>4.选择标题=一个特定值的元素（使用|分隔属性和值）</h2>
			<p lang="en">Here!</p>
			<p lang="en-us">OK!</p>
			<p lang="en-gb">Ello!</p>
			<hr >
			
			<h3>Will not apply to:</h3>
			<p>Hello!</p>
			<p title="student">Hi CSS student!</p>
			<p lang="us">No!</p>
			<p lang="no">Don't!</p>
			
		</div>
		
		
	</body>
</html>

这是CSS基础内容的最后一部分，后面会继续更新js的应用实例和html5与CSS3的内容。
勉励：「有志者，事竟成」

虾尾丸子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实例【十二】

最后一波CSS基础内容来了～<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> /* home和next用了同一个图的不同位置 */ img.home{ width:46px; height: 44px; background:url(image/sun.gif) 0 0;
复制链接

扫一扫