CSS基本属性及sprite图像拼合技术

CSS基本属性:

文本

  1. 文字第一行缩进:text-indent:20px ;
  2. 字间距:letter-spacing:20px;
  3. 词间距:word-spacing:20px;
  4. 行高:line-height。他可以使数字、百分比、normal。
  5. 文本对齐:text-align。他的值可以是:left、center、right、justify(两端对齐)。
  6. 垂直对齐:vertical-align:top、middle、bottom。
  7. text-shadow:水平值、垂直值、模糊半径、颜色。解释:在已设置的水平值和垂直值为中心处的样式。
  1. 背景:background-color, background-image:url(),  background-repeat: repeat, no-repeat, repeat-x, repeat-y
  2. background-attachment

    a)       scroll 背景图片随着页面的其余部分滚动

    b)      no 背景图固定

    c)       fixed

  1. background-postion

    a)       top  上

    b)      right  右

    c)       bottom  下

    d)      left  左

  1. background-size

    a)       高度  百分比(如果只设置一个值,第二个被默认为auto)

    b)      百分比 以父元素的百分比来设置高度

    c)       cover:把背景图扩展到足够大完全覆盖背景区域,超出部分会被隐藏

    d)      contain:把背景图片扩展到最大尺寸使其高度完全适应内容区域。

  1. background-image:url();将自定义图片设为背景。
  2. 简写顺序 background:{ background-color background-image background-repeat  background-attachment  background-postion }

 

列表

  1. list-style:none;去除圆点
  2. list-style-image:url(); 插入自定义图标
  3. list-style-type:

    a)      circle 空心圆

    b)      square 方块

    c)       lower-roman 小写罗马字符

    d)      upper-roman 大写罗马字符

    e)      lower-alpha 小写英文字母

    f)        upper-alpha 大写因为字母

表格

  1. border-collapse: collapse;  设置表框线只有一根。

  2. cursor:pointer;  将鼠标设置为手型。

线性渐变

  1. background:linear-gradient(right,red,yellow); //背景颜色线性变换,三个值的含义分别为:方向,开始颜色,结束颜色。
  2. background:linear-gradient(red,yellow);
  3. background:linear-gradient(to right,red,yellow);//背景从左到右变换,颜色由红变黄。
  4. background:linear-gradient(to right bottom,red,yellow);//背景从右下角到左上角变换,颜色由红变黄。
  5. –webkit-transform:all 5s linear; //颜色每间隔5秒。
  6. –webkit-animation:name 5s linear infinite。 @keyframe name{      from{}to{}} //样式从from变为to…

Transform、Transition、Animation之间的区别:

  Transform:对元素进行变形;
  Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。
  Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。

图片整理技术(Sprite图)

  CSS sprite 是一种图片的处理方式,它允许网页设计师将很多张图片合并在同一张图档中,然后根据 CSS 档中的文字描述将图档分区块加载。如在一个div里,你可以设置在网页上显示这张图档中的某个区域的图片,然后根据用户的操作或选择改变在这个区域内显示的图片以及其他样式。其CSS样式示例代码如下:

  

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雪碧图练习</title>
    <link rel="stylesheet" href="testSprite.css"/>
	<style>
		.divClass{
			width:90px;
			height:100px;
			background-image:url("images/1.png");
			background-size:500px 800px;
		}
		.divClass:hover{
			width:80px;
			height:100px;
			background-image:url("images/1.png");
			background-size:500px 800px;
			background-position:-50px 0;  //-50表示右边的图向横坐标左移动50px而纵坐标上保持不变
			cursor:pointer;
		}
	</style>

</head>
<body>
    <div class="divClass"></div>
</body>
</html>

  

  

时间: 2024-10-17 07:18:03

CSS基本属性及sprite图像拼合技术的相关文章

Sprite图像拼合技术优缺点

网页加速过程中,图片个数越多就越可能造成一直加载不出来的现象,Sprite图像拼合可以让页面中设计到的小图标都整合到一个图片上,通过图像位置定位来操作. 优点: 图片变成一张肯定所占位置更少,减少加载时间,增强用户体验:作为设计师来说不用对各种小图标命名,减少工作量,再一个就是对风格的更改整体操作来说更为简便. 缺点:背景大小,容易出现断裂,相比之下不是直接替换照片,而是利用PS来测量好每一个的位置,环节繁琐一些,当然更改部分元素的同时需要动整体,也比较麻烦一些. 总的来说:图片拼合技术适用于网

CSS Sprites (CSS图像拼合技术)教程工具

什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Sprite”就是这样一种技术,它将许多图片组合到一个网格上,然后通过程序将每个网格的内容定位到画面上. Sprite被定位到一副静态图片上,并且通过简单的程序或硬件即可正确定位到画面上,一幅幅图片就像是被“变”出来的,他们并没有单独占用内存,所以被取名为“Sprite精灵”. 上图是口袋妖怪的组合图片,可

Css Sprite(雪碧图、精灵图)&lt;图像拼合技术&gt;

一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 三.实现原理 css background-position 控制一个层可显示的区域范围大小,通过一个窗口进行背景图的滑动实例: 代码如下

DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例

div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图 一.什么是css sprites   -   TOP css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS background背景定位技术技巧布局网页背景.这样做的好处也是显而易见的,因为图片多的话,会增加

雪碧图(图片拼合技术)

雪碧图 (sprite)是一种图片拼合技术: 使用方法: 1.定视口 width: xx px; height: xx px; 2.插图 background-image: url("图片路径"); 3.移动位置 background-position: x轴坐标 y轴坐标: 优点:将小图标拼合到一张图片里,占用内存少,对开发人员来说就不用麻烦给每个小图标命名,还可以有效地加快网页的加载速度,可以有效增强用户体验: 缺点:需要利用相关图片查看软件找到每个小图标的准确坐标,相对来说比较繁

Java知多少(101)图像缓冲技术

当图像信息量较大,采用以上直接显示的方法,可能前面一部分显示后,显示后面一部分时,由于后面一部分还未从文件读出,使显示呈斑驳现象.为了提高显示效果,许多应用程序都采用图像缓冲技术,即先把图像完整装入内存,在缓冲区中绘制图像或图形,然后将缓冲区中绘制好的图像或图形一次性输出在屏幕上.缓冲技术不仅可以解决闪烁问题,并且由于在计算机内存中创建图像,程序可以对图像进行像素级处理,完成复杂的图像变换后再显示. [例 12-6]小应用程序程序演示图像缓冲显示技术.程序运行时,当鼠标在图像区域内按下时,图像会

OpenCV探索之路(十):图像修复技术

在实际应用中,我们的图像常常会被噪声腐蚀,这些噪声或是镜头上的灰尘或水滴,或是旧照片的划痕,或者是图像遭到人为的涂画(比如马赛克)或者图像的部分本身已经损坏.如果我们想让这些受到破坏的额图片尽可能恢复到原样,Opencv能帮我们做到吗? OpenCV真的有这个妙手回春的功能!别以为图像修补的工作只能用PS或者美图秀秀那些软件去做,其实由程序员自己写代码去做更加高效! 图像修复技术的原理是什么呢? 简而言之,就是利用那些已经被破坏的区域的边缘, 即边缘的颜色和结构,根据这些图像留下的信息去推断被破

图像选取技术浅尝

我们的图像选取技术今天终于获得了阶段性的突破! 是大家共同努力的结果,这个技术主要可以实现,在工作区内,进行图片框选,完了可以把起始点,终点坐标显示出来,并且,点的坐标可以方便的进行手动修改,改了之后,按下确定,选框也会发生对应的改变.部分代码如下: 1获取鼠标位置 function moveToMouseLoc(e) { if (ns4 || ns6) { curPositionX = e.pageX curPositionY = e.pageY; } else { curPositionX

[CSS揭秘]连续的图像边框

背景知识:border-image, gradient,  多重背景,CSS动画 背景知识讲解 1. border-image 边框应用背景图片,图片会自动被分割为四等分,分别用于四个边框.使用border-image属性时,会替换掉border-style属性设置的边框样式.如果boder-image-source为none或者图片不能显示时,会应用border-style属性. 语法 boder-image: border-image-source  border-image-slice