html练习（3）
1.这个小练习用到了css的四种选择器id选择器，类选择器，html选择器，通配符选择器。
（1）假设一个元素中用到了各种选择器，而且选择器中的属性发生了冲突，则
优先级为id选择器>类选择器>html选择器>通配符选择器。
（2）假设一个元素中用到了同一种选择器的不相同式，若发生了属性冲突，则以在css文件里后一个定义的属性值为准。
2..用到了未訪问的链接，鼠标悬浮的状态，以及已訪问的链接的状态。
html文件（test3.html）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一叶扁舟</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./test3.css">
<style type="text/css">
/*控制图片的大小*/
img {
filter: "black";
border: 0;
margin: 0;
padding: 0;
max-width: 180px;
width: expression(this.width > 150 ? "150px" : this.width);
max-height: 180px;
height: expression(this.height > 150 ? "150px" : this.height);
}
/*使用滤镜，网页的图片变为灰色*/
a:link {
filter: "gray";
text-decoration: none;
}
/*已訪问*/
a:visited {
color: red;
}
/*鼠标悬浮时，图片变回原来的颜色*/
a:hover {
filter: "";
color: pink;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>
<font color="blue"> 採用了<span class="s1 s2"><span
id="style1">滤</span>镜</span>效果和鼠标的<span class="s3 s4">悬浮</span>效果</font>
</h1>
<br>
<span class="s1"><a href="#">链接到淘宝</a>淘啊淘!</span>
<br />
<a href="#">进入百度收索</a>
<br />
<a href="#">进入搜狐站点</a>
<br />
<a href="#"><img src="./image/a.jpg" /> 这是一张图片</a>
<br />
<a href="#"><img src="./image/b.jpg" />
</a>
<a href="#"><img src="./image/c.jpg" />
</a>
<a href="3"><img src="./image/d.jpg" / width="180px"
height="180px">
</a>
</body>
</html>
css文件（test3.css）：
/*id选择器*/
#style1 {
font-size: 90px;
font-style: normal;
background-color: yellow;
}
/*这些都是类选择器*/
.s1 {
color: blue;
font-size: 50px;
}
.s2 {
background-color: black;
font-style: italic;
font-size: 80px;
color: red;
font-weight: bold;
}
.s3 {
background-color: gray;
font-weight: bolder;
}
.s4 {
background-color: green;
font-style: italic;
font-weight: bold;
font-size: 80px;
text-decoration: underline;
}
/*html选择器*/
body {
background-color: yellow;
}
div {
font-size: 40px;
}
/*通配符选择器--全部的元素都符合某一种样式*/
* {
margin: 0;
padding: 0;
}
效果图片：
随机推荐
- SQL 增删改查（具体）
一.增:有3种方法 1.使用insert插入单行数据: insert [into] <表名> [列名] values <列值> insert into Strdents (na ...
- 深入解析开源项目之Universal-Image-Loader（二）内存---缓存篇
珍惜作者劳动成果,如需转载,请注明出处. http://blog.csdn.net/zhengzechuan91/article/details/50292871 Universal-Image-Lo ...
- ASP.Net MVC默认目录结构
1.Controllers 保存处理URL请求的Controller类 2.Models 保存操纵业务与数据对象的类 3.Views 保存UI模板页面 4.Scripts 保存Javascript库文 ...
- android图像处理系列之五－－ 给图片添加边框（中）
前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...
- cache -- clear（ 缓存清除的方法）
一:meta方法 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV ...
- vue和miniui 一起使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 获取session中存储的所有值的方法
记录一个获取系统中session存储的对象都有哪些的方法 HttpSession session = request.getSession(); for ( Enumeration e = sessi ...
- DM9000C网卡驱动
目的:通过学习,掌握如何移植.编写DM9000C网卡驱动 一.概述: DM9000是一款高度集成低功耗快速以太网处理器,该芯片集成了MAC和PHY.DM9000可以和CPU直接连接,支持8位.16位和 ...
- python 补0的方法
# 方法一 z = 'bb' z.zfill(6) ----'0000bb' n = ' n.zfill(5) ----' # 方法二 ' " ---- ＇报错＇ # 方法的区别 方法二只能 ...
- listview-fading 滚动条样式设置
fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...