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. CodeForces 321 A - Ciel and Robot

    [题目链接]:click here~~ [题目大意]:一个robot 机器人 .能够依据给定的指令行动,给你四种指令,robot初始位置是(0,0).指令一出.robot会反复行动,推断是否能在无限行 ...

  2. Android资源推荐

    Intellj IDEA 安装配置 使用IntelliJ IDEA 13搭建Android集成开发环境(图文教程) Android设计指南站点 图标 App Icon Template免费的Photo ...

  3. Python标准库：内置函数all(iterable)

    假设可迭代的对象的所有元素所有非空(或者空迭代对象),就返回True.这个函数主要用来推断列表.元组.字典等对象是否有空元素.比方有10000个元素的列表,假设没有提供此函数,须要使用循环来实现.那么 ...

  4. vim 基础学习之替换

    替换命令substitute可以用来查找跟替换操作. :[range]s[ubstitute]/{pattern}/{string}/[flags] [count] range-命令作用范围(缺省的情 ...

  5. Redis安装以及配置

    下载 http://redis.io/download 解压 tar zxvf redis-2.8.17.tar.gz 编译并安装 1 2 3 4 cd redis-2.8.17 make cd sr ...

  6. Spark Tachyon的命令行使用

    Tachyon命令行使用 Tachyon接口说明 接口操作示例 copyFromLocal copyToLocal ls和lsr count cat mkdir.rm.rmr和touch pin和un ...

  7. mysql字符设置乱码问题

    在操作系统中对于任意一个字符而言是没有编码格式概念的:同样的字母在不同的编码集里面可能代表不同的东西:关键在于你用什么样的软件打开它,软件本身是以什么样的编码格式来显示你的字符,那么你的字符当前就是什 ...

  8. 【Henu ACM Round #12 C】 Alice, Bob, Two Teams

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 考虑任意两个字符串(a,b) 假设a在b的前面 那么如果a+b>=b+a 这里的+表示字符串的链接 那么显然需要交换a,b的位 ...

  9. Service-监听手机来电

    public class MonitorPhone extends Activity { TelephonyManager tManager; @Override protected void onC ...

  10. 自绘listCtrl控件选中该行高亮（模拟windows）

    CListCtrl的派生类CMyListCtrl的DrawItem()函数里添加代码 CDC *pDC = CDC::FromHandle(lpDrawItemStruct->hDC); if ...