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. java.util.ConcurrentModificationException 异常解决的方法及原理

    近期在修程序的bug,发现后台抛出下面异常: Exception in thread "main" java.util.ConcurrentModificationExceptio ...

  2. Docker+Jenkins持续集成

    Docker+Jenkins持续集成 使用etcd+confd实现容器服务注册与发现   前面我们已经通过jenkins+docker搭建了基本的持续集成环境,实现了服务的自动构建和部署,但是,我们遇 ...

  3. es8 --- 新特性

    ES8尚未发布(2017年1月),下面是它已经完成起草的一些特性: Object.values() Object.entries() padStart() padEnd() Object.getOwn ...

  4. 怎么成为合格的WEB前端开发工程师

    web前端开发工程师目前来讲是一个热门职位,但是要成为一个合格的web前端开发工程师,需要掌握的知识可不少,零度就简单的为大家讲讲. 大致的来讲,web前端开发工程师需要掌握的知识有:HTML.CSS ...

  5. POJ 2227 FloodFill (priority_queue)

    题意: 思路: 搞一个priority_queue 先把边界加进去 不断取最小的 向中间扩散 //By SiriusRen #include <queue> #include <cs ...

  6. OpenCV —— HighGUI

    分为:硬件相关部分,文件部分以及图形用户接口部分 创建窗口 —— cvNamedWindow 若设置成 CV_WINDOW_AUTOSIZE 窗口大小会随着图像的载入而根据图像大小调整,用户没办法手动 ...

  7. Codeforces Round #196 (Div. 2) 少部分题解

    A:sort以后求差值最小 ]; int main() { int n,m; cin>>n>>m; ; i < m ; i++) cin>>a[i]; sor ...

  8. fc---输出历史命令列表

    fc指令 fc指令可以用于输出历史命令列表,也可以通过调用vi编辑器对历史指令内容进行编辑输出. 语法: fc [-e ename] [-lnr] [first] [last] 选项: -l:显示历史 ...

  9. ActiveMQ学习总结（3）——spring整合ActiveMQ

    1.参考文献 Spring集成ActiveMQ配置 Spring JMS异步发收消息 ActiveMQ 2.环境 在前面的一篇ActiveMQ入门实例中我们实现了消息的异步传送,这篇博文将如何在spr ...

  10. 华为PUSH SDK 接入方法

    本文参考了华为推送平台官网及其Demo:http://developer.huawei.com/cn/consumer/wiki/index.php?title=%E6%8E%A5%E5%85%A5% ...