CSS教程

首页>前端教程>CSS教程

CSS3第六课:web中的颜色值以及rgba和opacity的区别

每次听一些web前端开发大神讲公开课或者看录制的视频,很多时候脱离了UI设计稿,大神们自己做案例的时候,都是用RGB三原色来搭配,或者直接red/blue/yellow/gray等颜色值,看得我眼睛火辣辣的痛,强烈建议web前端们也要把自己的审美,特别是色彩审美提高一下。审美教育必须从娃娃抓起!1、...

CSS3第五课:rem、em、vh、vw等新增单位的用法

很早以前,大家都习惯用像素(px)这个单位来控制大小,但是随着响应式布局和跨平台跨设备的web应用的兴起,很多具有百分比性质的单位其实更灵活。浏览器都允许用户重新设置文字的大小,如图:但是很多网页在body的样式上直接写死了文字大小,比如为14px或者16px,这样用户修改浏览器的字号是没法改变网页...

CSS3第四课:伪元素选择器,::before和::after就是左膀右臂!

讲完了伪类选择器,还有一个兄弟叫伪元素的选择器也把它搞定吧。它们都有一个伪字,说明都是不存在的,但是它们也有区别:伪类是一种状态,伪对象是不真正存在于HTML文档中的标签对象,但是它是以html对象的方式虚拟出现,并且可以通过css控制的对象。在最新的CSS3标准中,把伪对象的格式改成了双冒号,即:...

CSS3第三课:伪类选择器,为什么有一个伪字?

拖了好久的教程终于等到授课结束了,便开始马不停蹄的准备更新~~~今年自学了很多关于UI类的内容,在审美上又有了一些提高,以后做的案例更美美哒!一、CSS3新增伪类选择器在CSS1版本的时候,几乎都是:hover的天下,在CSS2版本的时候,增加了:focus这个常用的,CSS3版本就增加了:nth-...

从CSS Reset到Normalize.css

几年前为了重置样式,或者说为了让元素的浏览器默认样式不影响到页面的效果,我一般使用CSS Reset直接全部重置,当然,我是反对通配符*{margin:0;padding:0}这种写法的,但是CSS Reset全部归零了所有样式,后面有些样式又要自己贱兮兮的重新写回来,感觉也是做了无用功。直到发现了...

CSS3第二课:与家庭伦理有关的组合选择器

在CSS2时代,组合选择器中用的最多的是后代选择器,比如#nav li a等。因为这是CSS1版本就有的,IE6都毫无压力地支持。可是,在CSS2中新增的子元素选择器等,IE6就支持不友好了。不过,现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...

CSS3第一课:被IE耽搁了的属性选择器

CSS2系列的教程已经更新完毕很久了,今天终于开始了CSS3系列教程的更新,貌似又是一个漫长的过程!还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。既然是系列教程,那还是要按照体系来,先把最基础的选择器讲完。CSS3新增了很多很棒的选择器,其中属...

网页文字字体大小,在固定像素px和相对倍数em之间如何自由切换?附一个神器!

以前固定宽度布局的时候,几乎都是固定像素,宽度固定,间距固定,文字大小更是固定像素。可在流布局和响应式布局的催化下,固定宽度,固定大小的布局已经不能满足我们多元化的显示设备,pc端,平板端,手机端,各种尺寸的设备,如果都要重新做一个网页的话,我觉得那不是我们前端人的工作态度,毕竟学会如何偷懒是人的共...

CSS3教程:background-image之放射性渐变(radial-gradient)详解

 写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。容我躺躺,再站起来继续战斗!缓过来了,开讲放射性渐变吧。一、放射性渐变原理别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。别人都说径...

CSS3教程:background-image之线性渐变(linear-gradient)最in版!

 long long  ago,我很不喜欢用CSS3的渐变,宁愿一切纯色扁平,因为那时候的渐变TMD太复杂了,版本太多了,真的很想死!今天百度linear-gradient的关键词,翻出的文章几乎都是2011年——2013年的,版本太out了,难道不知道webkit和moz已经手...
Top