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. iOS项目开发实战——iOS网络编程获取网页Html源码

    现在我们身处互联网的时代.不论什么一个软件或是App,都会或多或少与网络打交道,并不断发生数据交互.一个没有涉及网络编程的应用会显得比較low,这里我们将会開始使用Swift开发iOS应用,而且主要来 ...

  2. Android 学习笔记进阶十二之裁截图片

    package xiaosi.cut; import java.io.File; import android.app.Activity; import android.content.Intent; ...

  3. Spark MLlib聚类KMeans

    算法说明 聚类(Cluster analysis)有时也被翻译为簇类,其核心任务是:将一组目标object划分为若干个簇,每个簇之间的object尽可能相似,簇与簇之间的object尽可能相异.聚类算 ...

  4. mybatis在XML中大于号转义字符

    mybatis在编写sql时不能在XML里直接使用‘<’ 或者是 ‘>’ 在这里需要使用转义字符替换 下面列举常用的xml转义对应: * <           <       ...

  5. Vue 国家省市三级联动

    在网上查阅一下,基本上是省市区三级联动,国家省市的就只能自己动手了. 样式就根据自己的需要去调整了. JSON数组太长,就折叠放在了后面. 效果图: <!DOCTYPE html> < ...

  6. 欧拉回路&欧拉路径学习笔记

    基础性质(用来判定): 1.无向图欧拉回路没有奇数点 (有向图所有点入度等于出度) 2.无向图欧拉路径只有两个奇数点 (有向图有一个顶点入度比出度大1,有一个顶点出度比入度大1,其他的全相等) 3.图 ...

  7. 【Django】Form组件

    目录 Form组件介绍 常用字段与插件 Form组件中所有内置字段 从数据库中获取数据 校验示例 检验手机号是否合法 方式一(基本操作) 方式二(自定义验证规则) 方式三(利用钩子) 验证密码一致性 ...

  8. docker 部署 jenkins server

    1. 拉取一个jenkins 镜像 docker pull jenkins 2. 创建与jenkins配置目录对应的,容器外的,文件目录,并修改相应的权限 mkdir /home/jenkins ch ...

  9. linux新安装后root密码设置

    linux在安装过程中未设置root密码 导致在使用中无法su 解决方法是设置root密码: 输入: sudo passwd root [sudo] password for you: ---> ...

  10. 今日SGU 5.1

    SGU 100 题意: 普通的a+b #include<bits/stdc++.h> #define de(x) cout<<#x<<"="&l ...