CSS3
CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展。CSS即层叠样式表(Cascading StyleSheet),是在网页制作时采用的层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS庞大而且比较复杂,CSS3把CSS分解为一些小的模块,更多新的模块也被加入进来。CSS3中的模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
基本信息
- 中文名
层叠样式表
- 外文名
Cascading StyleSheet
- 简称
CSS3
- 类别
网络
应用布局
-Grid布局图中1蓝色的线不会出现在实际的网页中。
Grid布局应用很广泛,最简单的例子就是内容的分栏显示。
对于左边这个布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们只需这样写:
body{columns:3;column-gap:0.5in;}
img{float:pagetopright;width:3gr;}
其中,body部分声明页面为3栏,栏间距为0.5英寸;img中float属性指明图片浮动位置为页面的右上角,而宽度为3个栏宽。只需这样两行CSS,就可以实现这个复杂布局。
Flexbox
Flexbox(伸缩布局盒)是CSS3中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。
Flexbox由和组成。通过设置元素的display属性为flex或inline-flex可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素,而设置为inline-flex的容器则渲染为一个行内元素。
Flexbox通常能让我们更好的操作他的子元素布局,例如:
生成工具
CSS3Maker
这款工具非常强大,可在线演示渐变、阴影、旋转、动画等非常多的效果,并生成对应效果的代码,
CSS3Generator
非常不错的各种CSS3代码生成器,支持圆角、渐变、旋转和阴影等众多特性,带预览效果。
CSS3Please
帅且酷的一款CSS3工具,可即时在线修改代码并预览效果,还有详细的浏览器兼容情况。