最后一波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的内容。
勉励:「有志者,事竟成」