css3教程[编辑]

一、概述

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

二、布局

Grid布局图中，蓝色的线不会出现在实际的网页中。
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通常能让我们更好的操作他的子元素布局，例如：
如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
可以快速让他们布局在一列；
可以方便让他们对齐容器的左、右、中间等；
无需修改结构就可以改变他们的显示顺序；
如果元素容器设置百分比和视窗大小改变，不用担心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

四、生成工具

CSS3 Maker

这款工具非常强大，可在线演示渐变、阴影、旋转、动画等非常多的效果，并生成对应效果的代码。

CSS3 Generator

非常不错的各种 CSS3 代码生成器，支持圆角、渐变、旋转和阴影等众多特性，带预览效果。

CSS3 Please

帅且酷的一款 CSS3 工具，可即时在线修改代码并预览效果，还有详细的浏览器兼容情况。

五、Cssc规范语言

1、创建圆角矩形属性
border-radius。
2、向 div 元素添加方框阴影：
box-shadow: 10px 15px 5px #888888;（10px代表阴影往左交错10像素，15px代表阴影往下15像素，5px代表阴影羽化5像素 #888888是阴影颜色）、
3、使用图片创建围绕 div 元素的边框
border-image:url(border.png) 30 30 round;（平铺）
border-image:url(border.png) 30 30 stretch;（拉伸）
4、CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
background:url(img.jpg);
background-size:50px 100px;（调整背景图片的大小）
background-repeat:no-repeat;
background-size:40% 100%;（对背景图片进行拉伸）

网络营销词典内容均由网友提供，仅供参考。如发现词条内容有问题，请发邮件至info # wm23.com。