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;

}

效果图片:

随机推荐

  1. 在resin配置參数实现JConsole远程监控JVM

    在Resin配置參数实现JConsole远程监控JVM 在Resin中配置中配置下列參数,就能够是实现了! <jvm-arg>-Dcom.sun.management.jmxremote& ...

  2. jQuery Easy UI ProgressBar(进度条)组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  3. Http协议简介【转】

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  4. 43.可变参数实现printf

    #include <stdio.h> #include <stdio.h> #include <Windows.h> #include <stdarg.h&g ...

  5. Android studio文件名颜色分别表示含义

    这其实是主要和版本控制工具有关,含义如下: 绿色,已经加入控制暂未提交红色,未加入版本控制蓝色,加入,已提交,有改动白色,加入,已提交,无改动 灰色:版本控制已忽略文件

  6. 51Nod 1006 最长公共子序列Lcs问题 模板题

    给出两个字符串A B,求A与B的最长公共子序列(子序列不要求是连续的). 比如两个串为:   abcicba abdkscab   ab是两个串的子序列,abc也是,abca也是,其中abca是这两个 ...

  7. 如何优雅的写UI——(4)选项卡美化

    现在做出来的选项卡实在太丑的,咱们怎么把他弄得好看一点呢 tabctrl是可以添加icon图标的,那派生与tabctrl的mfctabctrl肯定也能添加图标,他们两个添加图标的原理一样,但是还是有点 ...

  8. WordPress出现Briefly unavailable for scheduled maintenance. Check back in a minute. 的解决方法

    WordPress出现 Briefly unavailable for scheduled maintenance. Check back in a minute. 解决方法: 登入FTP,然后把Wo ...

  9. 车牌识别--S5PV210測试第二次优化

    优化: 1.RGB转HSV 浮点运算改成定点运算: 2.匹配模板由图片改成C语言数组: 3.优化測试BMP车牌图片读取(两层for循环改为一层for循环). 总体相比优化之前时间降低110ms左右. ...

  10. Apache ZooKeeper Getting Started Guide 翻译

    ZooKeeper 開始向导 開始:用zookeeper协调分布式程序 单例操作 管理zookeeper存储 连接zookeeper 执行zookeeper 以复制模式执行zookeeper 其他优化 ...