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. 目标决定人生——没有目标就失去一切 （没有目标的奋斗是浪费青春，比如交了钱却不去参加考试、让时间白白溜走。根据目标与定位来选择最合适的企业。人生要算总账）good

    没有目标就失去一切 刚毕业那会儿,幼稚得可笑,老跟同学打电话,明面上聊聊近况,暗地里比较.你要比我工资多一百块,心里特不平衡,凭什么呀,在学校那会儿公认的我比你强.你要带个头衔,而我啥也不是,普通员工 ...

  2. 应用Linux远程桌面（附视频）

    650) this.width=650;" border="0" alt="" src="http://img1.51cto.com/att ...

  3. vue组件中 IS 用法

    //html <link rel="stylesheet" href="http://www.jq22.com/demo/animate-141106223642/ ...

  4. Windows学习总结（1）——win10系统最新快捷键汇总

    Win10新增功能快捷键大全: 贴靠窗口:Win + 左/右 >  Win + 上/下 > 窗口可以变为 1/4 大小放置在屏幕 4 个角落. 切换窗口:Alt + Tab(不是新的,但任 ...

  5. [置顶] Docker学习总结（1）——Docker实战之入门以及Dockerfile（一）

    一.Docker是什么? 首先Docker是软件工业上的集装箱技术 回顾,在没有集装箱出现以前,传统运输行业中,会存在这些问题: 在运输过程中,货物损坏 装卸.运输货物,效率低下 运输手续繁多及运输环 ...

  6. 在带（继承）TextView的控件中，在代码中动态更改TextView的文字颜色

    今天由于公司项目需求,须要实现一种类似tab的选项卡,当时直接想到的就是使用RadioGroup和RadioButton来实现. 这种方法全然没问题.可是在后来的开发过程中,却遇到了一些困扰非常久的小 ...

  7. js---15,模拟数组的ecah方法

    原型的另外一个作用就是扩展对象中的属性和方法的 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// ...

  8. notification-应用实例

    这几天接触到了notification,现在就把它的常用方法总结下. 直接看如下代码就行了 ComponentName componetName = new ComponentName("c ...

  9. Property-属性动画

    今天第一次接触到属性动画.参考着 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38067475 的博客,自己学习下. 它的区别跟 ...

  10. 12. ZooKeeper之Java客户端API使用—创建会话。

    转自:https://blog.csdn.net/en_joker/article/details/78686649 客户端可以通过创建一个ZooKeeper(org.apache.zookeeper ...