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. 九度 题目1154:Jungle Roads

    题目描写叙述: The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid mon ...

  2. ctags 寻找方法定义处

    ctags这个是vim的一个插件,它可以用来生成一个检索文件,里面保存有一些索引信息.例如,一些类跟方法.变量等的定义位置当我们对一个路径执行ctags -R的时候,就会自动生成一个ctags,然后我 ...

  3. Scott Hanselman的问题-2

    .Net程序员面试 每个人都应知道篇 (回答Scott Hanselman的问题)   昨天回答了Scott Hanselman在他清单上关于C#那部分的题目,.Net 程序员面试 C# 语言篇 (回 ...

  4. RPC简易学习

    0.RPC简介 RPC,   英文全称:Remote Process Call.   中文全称:远程过程调用. 客户端通过网络请求调用远程服务端对外暴露服务.常用的两种RPC协议:TCP.HTTP. ...

  5. ssh-keygen && ssh-copy-id 生成管理传输秘钥

  6. Android NDK调试出错Unknown Application ABI, Unable to detect application ABI&#39;s的解决方式

    今天在调试Android NDK的时候,ADT的控制台报了这个错误: Unknown Application ABI, Unable to detect application ABI's 在网上查了 ...

  7. dlopen 方式调用 Linux 的动态链接库

    在dlopen()函数以指定模式打开指定的动态链接库文件.并返回一个句柄给 dlsym()的调用进程. 使用 dlclose()来卸载打开的库. 功能:打开一个动态链接库,并返回动态链接库的句柄 包括 ...

  8. 编程精粹--编写高质量C语言代码(4):为子系统设防(一)

    通常,子系统都要对事实上现细节进行隐藏,在进行细节隐藏的同一时候.子系统为用户提供了一些关键入口点. 程序猿通过调用这些关键的入口点来实现与子系统的通信.因此假设在程序中使用这种子系统而且在其调用点加 ...

  9. javascript进阶课程--第二章--对象

    javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...

  10. eclipse git冲突解决

    1.工程->Team->同步: 2.从远程pull至本地,就会出现如下内容: 3.使用Merge Tool,执行第二项 4.再手动修改 4.修改后的文件需要添加到Git index中去: ...