Css基础2：

相对长度单位：em,rem,px,%
绝对长度单位：厘米等（不用）
颜色单位：rgb,rgb的百分比，16进制（#），颜色名称
字体：font-size：为了更好适合点阵，尽量使用偶数
font-family：字体
font-weight：字体粗细100-900,400=normal，700=bold,900=最粗
font-style：italic,oblique(字体变斜)
text-indent：文字缩进
letter-spacing：字间距（英文单个字符，或者汉字之间都有效）
word-spacing：词间距（英文单词之间，汉字之间得用空格隔开才能有效）
line-height：行高（字的上下开始，上下距离相等，设置为1，就是文字的行高，浏览器默认行高为1.4）
text-align：文字的位置（left，right，center）
text-decoration：文字的装饰（none:无样式，overline:上划线，underline：下划线，line-through：删除线）
text-transform：（uppercase:所有文字大写，lowercase:所有小写，capitalize:每个单词首字母大写）
text-shadow：文字阴影（1 2 3 4）1:横向值，2：纵向值，3：模糊值，4：颜色eg:（text-shadow:5px 2px 2px red）
background-image:url('图片路径')
background-repeat：（no-repeat:不平铺，repeat-x:横向平铺，repeat-y：纵向平铺）
background-position：控制背景图的位置（top right）
background-size:图片大小 :100% 100%/39px 30px/cover:把图片等比例缩放，多余部分裁剪，自适应父级宽度/contain:等比例缩放，自适应父级的高
background-origin：控制图片放入的位置（border-box：从元素的边框开始，padding-box：从元素的内边距开始，content-box：从元素的内容开始，默认）
简写：background：{bg-color bg-image bg-repeat bg-attachment bg-position}(颜色 图片路径 平铺方式 是否滚动（可省略） 位置) background设置多个图片层叠时设置background图片路径后的position用逗号隔开

image和background-image的区别：background-image上边可以写字，image不可以；一般网站上不需要经常变更的东西用background-image，经常变更的图片用image

list-style:（none，square，upper-roman）li标签设置
list-style-image:url('图片路径')：给li标签黑点换成图片
border-top:上边框
border-bottom:下边框
border-right:右边框
border-left:左边框
outline:跟border的表现形式差不多

border与outline的区别：border是占像素的，outline是不占像素的

雪碧技术（Sprite）
1.确定视口
2.插入图片
3.移动图片

<style>
/*雪碧技术*/
#two{
border:1px solid black;
width: 180px;
height: 180px;
background-image:url(image/30d5bc953b7afba77514.jpg) ;
background-repeat: no-repeat;
cursor: pointer;

}
div:hover{ background-position: -280px 0; }
</style>
<body>
<div id="two"></div>
</body>

@font-face 引用字体（引用外部设计的字体，很少用）
cursor：pointer（手型光标）

图片替换技术（头部可以点击的题目性图片）
1.设置a标签的行高，把行级的a标签挤走
2.设置父级溢出隐藏
3.将a标签设置为块级元素
<style>
/*图片替换技术*/
h1{
/*根据图片大小设置宽高*/
width: 154px;
height: 30px;
background:url("image/logo_db.png");
/*设置超出宽高部分隐藏，用于之后把文字挤出后隐藏文字*/
overflow: hidden;
}
/*方法一，通过设置a标签宽高来超出范围*/
a{
/*设置a标签的行高，用于使a标签出现在h标签的范围*/
line-height: 100px;
/*设置a标签为块级元素，使能够鼠标点击得到*/
display: block;
}
/*方法二，通过缩进的方式隐藏*/
a{text-indent: -500px;display: block;}
/*方法三，设置a标签为透明来隐藏*/
a{color: transparent; display: block;}
</style>
<body>
<h1><a href="http://baidu.com">百度一下</a></h1>
<body/>

border-radius：50% //将正方形变成圆形
border-radius: 50px/30px; //怪怪的边角，矩形的长宽为50,30，画圆弧
div的阴影（文字阴影只有四个参数）：
box-shadow：1 2 3 4 5 //1.横向水平 2.纵向 3.模糊 4.外延（一般不写） 5.颜色

渐变：
background：linear-gradient（1,red ,yellow） // 线状渐变 1：to right从左到右由红变绿，45deg:从左下角开始渐变，不写默认从上到下
background：radial-gradient（red,yellow） //径向渐变（从里到外） （circle，red 20%，yellow 0）//圆形占20%，0不渐变

transition(逐渐的)：all linear 5s =all ease-in 5s //所有边框以5s的速度改变,该属性必须写在元素里
transition:all 2s ease-out 1s //延迟两秒执行
考虑兼容性问题：
-moz-transition:火狐
-webkit-transition:谷歌
-ms-transition：微软
-o-transition:operat

改变位置
transform: translate(50px,-20px); //元素右移50px,上移20px
-ms-transform: translate(50px,-20px); /* IE 9 */
-webkit-transform: translate(50px,-20px); /* Safari and Chrome */
-o-transform: translate(50px,-20px); /* Opera */
-moz-transform: translate(50px,-20px);

元素成倍改变大小，元素中心位置不变，图片设置过大会覆盖其他元素，但不会对其他元素是位置造成影响（之前米奇图案通过改变margin值来实现，比较复杂）
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */

动画
元素{animation：动画名 2s infinite（无限的）//执行次数为一直执行，2s表示每两秒执行一次}
@keyframes 动画名{from{background:red} to{background:yellow}//第一种方法}
@keyframes 动画名{0%{}50%{}100%{} //第二种方法}

CSS样式，雪碧，图片替换，渐变小析的更多相关文章

  1. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  2. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  3. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  4. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

  5. 为什么css定位雪碧图（合成图）都要以负号开头？

    (1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点(0px,0px)开始读取的, 而你的图片全都在坐标系的 第四象限 background-position: x y:(x,y为数值或百分比 ...

  6. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  7. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  8. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  9. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

随机推荐

  1. [恶趣味]搞了下局域网内的arp网络欺骗

    挺无聊的. 扫描,伪装,抓包. 基本上搞完就失去乐趣了. 文章在这里,想搞的可以自己拿去搞下,其实很无聊,我真是个很容易无聊的人啊.

  2. [MySQL]show index from tb_name命令各列的含义

    show index from table_name 这个命令有助于诊断性能低下的查询,尤其是查询是否使用了可用的索引. 下面介绍下 这个命令显示的结果列的含义: | Table | Non_uniq ...

  3. 关于imageOrientation

    用相机拍出来的照片都含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息.如果我们忽略orientation信心,而直接对照片进行想速处 ...

  4. Java基础高级一（正则表达式）

    1.正则语法:元字符,量词,范围,组,属性 2.String类常用正则方法split,indexOf,replaceAll 3.Java正则类Pattern,Match而的使用 1.String常用方 ...

  5. 建表过程-列名&列类型&修改表小试题C

    #新增数据 INSERT INTO goods VALUES(10,'豆豆','男',85.2,'2016-12-14',5000.36,'2016-12-14 12:05:06','高') INSE ...

  6. "飞机大战"游戏_Java实现_详细注释

    1 package cn.xiaocangtian.Util; import java.awt.Frame; import java.awt.Graphics; import java.awt.Ima ...

  7. Android 敏感 API 的说明

    从中国的国情来看,Google 的诸多产品,包括 gmail,Android 官方市场 Google Play 正处于并将长期处于访问不了的状态.国内几亿网民也要生活,于是墙内出现了“百家争鸣”的场面 ...

  8. VS2015 编译 Qwt6.1.3

    VS2015 + Qt5.7 编译 Qwt6.1.3 1. 将 qwtconfig.pri 中的 C:\Qwt 改为  D:/ProgramFiles/C_Library/Qwt/Qwt , 我的Qw ...

  9. AndroidAnnotations(Code Diet)android快速开发框架

    最近用了一款很不错的android快速开发框架,1000行的代码瞬间变成几百行,不用你会后悔的 特点: (1) 依赖注入:包括view,extras,系统服务,资源等等(2) 简单的线程模型,通过an ...

  10. react native 刷新机制-－－－通知

    在项目中,不知道大家有没有遇到这样的一个问题,比如说有两个页面A,B.A页面中有某个按钮点击后可以跳转到B页面,现在有一个需求就是,我在B页面中做了某些操作,然后点击回退按钮,回到A页面,A页面中的数 ...