CSS样式,雪碧,图片替换,渐变小析
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%{} //第二种方法}
转载于:https://www.cnblogs.com/fengxiaopiaoer/p/5702042.html
CSS样式,雪碧,图片替换,渐变小析相关推荐
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图
CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
- 猿人学题库十九题——css加密-雪碧图/数据干扰等——地毯式采坑学习
猿人学题库十四题--css加密-雪碧图/数据干扰等 1. 首先 进入 浏览器的开发者工具, 打开就是 俩个无线debugg,正常的操作过掉 1. 找到 debugg 对应的行数,右击选择 neve ...
- 前端基础入门之背景background-image 、 雪碧图与渐变
文章目录 背景 1. PS 的基本设置 2. 背景 练习 1:线性渐变效果的背景图 练习 2:按钮点击效果 雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变 背景 1. PS 的基本设置 工 ...
- 在html中雪碧图的坐标怎么看,详解CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- css 雪碧图计算方式,前端必备 CSS Sprites雪碧图生成工具
[摘要] CSS Sprites又称css精灵或者谐音css雪碧,是一种网页图片应用处理方式,今天为大家分享一个一键生成css雪碧图片的工具,复杂的事情简单化,提高开发效率. CSS Sprites又 ...
- CSS Sprite雪碧图详解
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- 如何使用css样式将正方形图片显示为圆形图片布局
css3图片圆形显示如何使用css样式将正方形图片显示为圆形图片布局 1.图片实现圆形条件 2.使用布局技术 3.CSS圆角实现图片圆形实例 1.图片实现圆形条件 原本不是圆形图片,通过CSS样式布局 ...
- CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题 前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
最新文章
- HDLBits 系列(26)独热码有限状态机实现的两种方式
- iOS_20_微博自己定义可动画切换的导航控制器
- thinkphp框架使用心得
- 【Java文件下载】如何让浏览器直接下载后端返回的图片,而不是直接打开
- android wifi 通讯录,通过wifi和gmail从symbian手机中将名片夹(通讯录)导入到android手机 | 古意人...
- 10. HTML基本标签
- android详细解释键盘和鼠标事件
- .Net Core应用框架Util介绍(一)转
- 常用装机必备 绿色免安装软件合集 破解高手菜鸟必备(每日更新总有一款适合您
- WinRAR 永久去除弹窗广告
- Java创建数组的方法
- 2022 年面向初学者的 10 大免费 3D 建模软件
- DDD的哲学意味(上)
- 突破运营商 QoS 封锁,WireGuard 真有“一套”!
- 简易特效制作ByUnityParticleSystem
- PS:成功解决点击PS中的裁剪工具时,整张图片消失掉或者整张图片变的及其小的问题
- YbSoftwareFactory 代码生成插件【十三】:Web API 的安全性
- android 手势识别 (缩放 单指滑动 多指滑动)
- opengl win32窗口的建立
- 赵小楼《天道》《遥远的救世主》深度解析(122)好事、坏事是人性喜好认为,剥离好坏的认知你会更宽广