html练习（3）
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;
}
效果图片：
随机推荐
- Icomparer和Icomparable集合排序
c#中实现对象集合的排序可以使用ArrayList中的Sort()方法,而有比较才能谈排序,因为不是基本类型(如string ,int.double......等)所以.NET Framework不可 ...
- 深入理解Android（1）——理解Android中的JNI（上）
我参加了CSDN博客之星评选,如果在过去的一段时间里阳光小强的博客对你有所帮助,在这里希望能投上您宝贵的一票,每天都可以投一次:http://vote.blog.csdn.net/blogstar20 ...
- MD基本语法介绍
Markdown基本语法介绍 前言 文本编辑器一般用的有富文本编辑器(也就是Word)和md了,但是wold太过于花里胡哨很多功能都用不上,所以就选择md了,简单实用,一对于我来说一般就用标题和列表就 ...
- 【Educational Codeforces Round 36 C】 Permute Digits
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] //从大到小枚举第i(1..len1)位 //剩余的数字从小到大排序. //看看组成的数字是不是小于等于b //如果是的话. //说 ...
- cron 简单任务调度 go
package main import ( "github.com/robfig/cron" "log" ) func main() { i := 0 c := ...
- C# XML类学习整理（待补）
一.读取xml文件内容: #region "获取xml文件内容" //将xml文件加载进来 XDocument xdoc = XDocument.Load("F:\\6. ...
- 多线程编程（二）--进程&&线程
看完上篇博文的介绍后,大家应该大概了解进程和线程的由来.有了这样一个背景我们进一步来看一下线程和进程. 引入进程: 进程能够提高系统的并发性.提高CPU的使用率,从而提高程序的性能.在曾经单道操作系统 ...
- C# 读取指定文件夹中的全部文件,并按规则生成SQL语句！
本实例的目的在于: 1 了解怎样遍历指定文件夹中的全部文件 2 控制台怎样输入和输出数据 代码: using System; using System.IO; namespace ToSql{ cla ...
- Linux - 用 Konstruct 安装 KDE 3.x
make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...
- js30--代理模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...