CSS基本属性及sprite图像拼合技术
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS基本属性及sprite图像拼合技术相关的知识，希望对你有一定的参考价值。
CSS基本属性：
文本
- 文字第一行缩进：text-indent：20px ;
- 字间距：letter-spacing：20px;
- 词间距：word-spacing：20px;
- 行高：line-height。他可以使数字、百分比、normal。
- 文本对齐：text-align。他的值可以是：left、center、right、justify（两端对齐）。
- 垂直对齐：vertical-align：top、middle、bottom。
- text-shadow：水平值、垂直值、模糊半径、颜色。解释：在已设置的水平值和垂直值为中心处的样式。
- 背景：background-color， background-image:url(), background-repeat: repeat, no-repeat, repeat-x, repeat-y
- background-attachment
a) scroll 背景图片随着页面的其余部分滚动
b) no 背景图固定
c) fixed
- background-postion
a) top 上
b) right 右
c) bottom 下
d) left 左
- background-size
a) 高度 百分比（如果只设置一个值，第二个被默认为auto）
b) 百分比 以父元素的百分比来设置高度
c) cover：把背景图扩展到足够大完全覆盖背景区域，超出部分会被隐藏
d) contain：把背景图片扩展到最大尺寸使其高度完全适应内容区域。
- background-image:url();将自定义图片设为背景。
- 简写顺序 background：{ background-color background-image background-repeat background-attachment background-postion }
列表
- list-style:none;去除圆点
- list-style-image:url(); 插入自定义图标
- list-style-type：
a) circle 空心圆
b) square 方块
c) lower-roman 小写罗马字符
d) upper-roman 大写罗马字符
e) lower-alpha 小写英文字母
f) upper-alpha 大写因为字母
表格
- border-collapse: collapse; 设置表框线只有一根。
2. cursor:pointer; 将鼠标设置为手型。
线性渐变
- background:linear-gradient(right,red,yellow); //背景颜色线性变换,三个值的含义分别为：方向，开始颜色，结束颜色。
- background:linear-gradient(red,yellow);
- background:linear-gradient(to right,red,yellow);//背景从左到右变换，颜色由红变黄。
- background:linear-gradient(to right bottom,red,yellow);//背景从右下角到左上角变换，颜色由红变黄。
- –webkit-transform:all 5s linear; //颜色每间隔5秒。
- –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>
以上是关于CSS基本属性及sprite图像拼合技术的主要内容，如果未能解决你的问题，请参考以下文章