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

时间 2019-11-17

标签 css 基本属性 sprite 图像拼合技术栏目 CSS 繁體版

原文原文链接

CSS基本属性：css

文本html

文字第一行缩进：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 背景图片随着页面的其他部分滚动web

　　　　b) no 背景图固定post

　　　　c) fixed动画

background-postion

　　　　a) top 上url

　　　　b) right 右spa

　　　　c) bottom 下设计

　　　　d) left 左orm

background-size

　　　　a) 高度百分比（若是只设置一个值，第二个被默认为auto）htm

　　　　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>