在div＋css中，经常会用到div和span

当内容比较多的时候，会用到div

当内容比较少的时候，会用到span

来看下面的代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>DIV+CSS</title>

</head>

<body>

<span style="color:green;font-size:30px;">栏目一</span><br>

<span style="color:orange;font-size:16px;">栏目二</span><br>

<span style="color:blue;font-size:16px;font-style:italic;">栏目三</span><br>

<span style="color:green;font-size:16px;font-weight:bold;">栏目四</span><br>

<span style="color:navy;font-size:16px;font-weight:bold;">栏目五</span><br>

</body>

</html>

执行后的效果如下：

在这里设置了字体的粗细．

设置段落字体的粗细的属性：

font-weigth属性设置文本的粗细．

使用bold关键字可以将文本设置为粗体．

关键字100~900为字体指定了９级加粗度，如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别．

如果将元素的加粗设置为bolder,浏览器会设置比所继承值更粗的一个字体加粗．

与此相反，关键词lighter会导致浏览器将加粗度下移而不是上移．

p.normal{font-weight:normal;}

p.thick{font-weight:bold;}

p.thicker{font-weight:900}

看到上面的代码，是不是感觉很low.

假如现在想把上面的五行字都换成跟第一行字的效果一样，有什么好的办法呢？？？

来看下面的这段代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>DIV+CSS</title>

    <style type="text/css">

        .style1{

            color:green;

            font-size:30px;

        }

    </style>

</head>

<body>

<span class="style1">栏目一</span><br>

<span class="style1">栏目二</span><br>

<span class="style1">栏目三</span><br>

<span class="style1">栏目四</span><br>

<span class="style1">栏目五</span><br>

</body>

</html>

刷新浏览器，效果如下：

这样想一次性修改五行的样式的话，就可以相接修改style里面的代码就可以了．

比如，现在想把五行的字体都变成斜体的话，就可以加上下面的属性就可以了．

font-style:italic;

修改后的代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>DIV+CSS</title>

    <style type="text/css">

        .style1{

            color:green;

            font-size:30px;

            font-style:italic;

        }

    </style>

</head>

<body>

<span class="style1">栏目一</span><br>

<span class="style1">栏目二</span><br>

<span class="style1">栏目三</span><br>

<span class="style1">栏目四</span><br>

<span class="style1">栏目五</span><br>

</body>

</html>

刷新浏览器后得到的效果如下：

可以看到css可以统一网站的风格．

现在想把一个网站的所有图片都为成黑白色或者模糊，这个要怎么实现呢？？

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>CSS的滤镜效果</title>

    <style type="text/css">

        a:link img {filter: grayscale(100%);}

        a:hover img {filter: grayscale(10%);}

    </style>

</head>

<body>

<a href="#"><img width="200px" src="1.jpg"></a>

<a href="#"><img width="200px" src="2.jpg"></a>

<a href="#"><img width="200px" src="1.jpg"></a>

<a href="#"><img width="200px" src="2.jpg"></a>

</body>

</html>

当图片正常显示，鼠标没有放在图片上的时候，图片显示的是灰色的；

当鼠标放置在图片上的时候，图片就变成正常颜色的了．现在把鼠标放在第一张图片上，显示的效果如下：

再把鼠标移动到第四张图片上，显示的效果如下：

这就是滤镜的效果．

再来看看使用css达到图片模糊的效果．

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>CSS的滤镜效果</title>

    <style type="text/css">

        a:link img {filter:blur(10px);}

        a:hover img {filter:blur(0px);}

    </style>

</head>

<body>

<a href="#"><img width="200px" src="1.jpg"></a>

<a href="#"><img width="200px" src="2.jpg"></a>

<a href="#"><img width="200px" src="1.jpg"></a>

<a href="#"><img width="200px" src="2.jpg"></a>

</body>

</html>

现在图片正常显示，鼠标暂时没有放置到任何一张图片上，效果如下：

把鼠标放在第一张图片上，显示的效果如下:

再把鼠标放在第四张图片上,显示的效果如下:

这就达到想要的图片模糊的效果了.

DIV+CSS中的滤镜和模糊的更多相关文章

  1. div+css中常见的浏览器兼容性处理-兼容不同浏览器

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! div+cs ...

  2. 如何在Html的div+css中去除<li>标签前面小黑点,和ul、LI部分属性方法

    div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和 ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. DIV+CSS 中的 overflow:hidden

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  5. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  6. CSS中filter滤镜学习笔记

    1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  7. CSS中filter滤镜的学习笔记

    1．CSS静态滤镜样式 (filter)(只有IE4.0以上支持)  CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, . ...

  8. DIV+CSS中标签dl dt dd常用的用法

    转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...

  9. css中的滤镜

    前几天在做一个app应用的时候,用到了滤镜.在之前我只是知道有这么个东西,但是具体的知识点其实我是不太清楚的,所以为了让自己能深刻记忆,专门把它来记录一下.. 一.滤镜的标识符:“filter”;语法 ...

随机推荐

  1. 让两个数x,y一直保持互质的模版

    int gcd(int x,int y) { )return x; else return gcd(y,x%y); }

  2. 洛谷 P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He…【字符串+模拟】

    P1200 [USACO1.1]你的飞碟在这儿Your Ride Is He… 题目描述 众所周知,在每一个彗星后都有一只UFO.这些UFO时常来收集地球上的忠诚支持者.不幸的是,他们的飞碟每次出行都 ...

  3. Deep Learning速成教程

          引言         深度学习,即Deep Learning,是一种学习算法(Learning algorithm),亦是人工智能领域的一个重要分支.从快速发展到实际应用,短短几年时间里, ...

  4. FSFS和VDFS存储方式的区别

    简单来说这个是VisualSVN基于FSFS文件系统格式扩展的.也就是说,分布式版本管理DVCS兴起之后,大家发现多个仓库的好处了,开始给SVN增加这个功能. 至于FSFS本身是SVN在2004年开始 ...

  5. 邓_phpcms_数据库

    phpcms v9 数据表结构 在线版 PHPCMS V9 数据结构 (2010-12-28) 表 1 : v9_admin 管理员表 字段 类型 Null 默认 额外 注释 userid mediu ...

  6. mybatis if条件查询 及<号的问题

    摘录自:http://flt95.blog.163.com/blog/static/12736128920136185841551/ <if test="p=='1'"> ...

  7. ETL工具--kettle篇（17.10.09更新）

    ETL是EXTRACT(抽取).TRANSFORM(转换).LOAD(加载)的简称,实现数据从多个异构数据源加载到数据库或其他目标地址,是数据仓库建设和维护中的重要一环也是工作量较大的一块.当前知道的 ...

  8. docker 安装 msyql

    **************************************************************************************************** ...

  9. spring task 定时

    最近工作中需要用到定时任务的功能,虽然Spring3也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能也不够强大.在考虑之后,决定整合更为专业的Quartz来实现定时任务功能. 首先,当然是添加依 ...

  10. Android 双卡获取当前使用流量在线卡的信息

    最近接触了一个项目,需要获取在线流量卡的信息,下面的方式,可以获取大部分手机的正确手机卡信息. 一  获取获取IMEI public static String getDeviced(int solt ...