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;
}
效果图片：
随机推荐
- findFocus-获得拥有焦点的控件
所有的view控件有一个findFocus方法,这个方法如下 /** * Find the view in the hierarchy rooted at this view that current ...
- 误操作 rpm -e --nodeps zlib
误删缘由:目的是要升级ssh版本,结果好像是冥冥之中有股力量在作祟迫使我粘了一条致死的命令rpm -e --nodeps zlib就执行了,奇怪的是执行之后根本就全然不知.最后在敲rpm命令时居然报 ...
- vue中关于prop
组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop 1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的 ...
- POJ 2185 正解 KMP
题意: 思路: 把每一行压成一个数 求一下 KMP 把每一列压成一个数 求一下KMP 答案就是两个周期之积 网上的好多题解都是错的---------.. //By SiriusRen #include ...
- 将BT下载对抗到底
将BT下载对抗到底 随着互联网业务的多元化,各种P2P应用也越来越多,在企业中多数流量都会被类似于BT的下载所占用,BT之所以会危害到局域网,是因为它占用了大量网络带宽.网络管理员可以通过一 ...
- Kinect 开发 —— 深度信息
转自:http://www.cnblogs.com/yangecnu/archive/2012/04/04/KinectSDK_Depth_Image_Processing_Part1.html 深度 ...
- Socket实例之客户端向服务端数据库上传文件UI版
http://blog.csdn.net/su20145104009/article/details/52843735 首先实现分析: 1用户注册 客户单选择‘用户注册’,提示要输入用户名,密码,确认 ...
- 洛谷 P1850 换教室
P1850 换教室 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq ...
- 注意string的insert函数的几种形式
string (1) string& insert (size_t pos, const string& str); substring (2) string& insert ...
- [Angular] Create a custom validator for template driven forms in Angular
User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...