css设计转化css样式,css格式化

如何运用CSS3把元素从一种样式变换为另一种样式

div class="box1"/div

style type="text/css"

    body{margin:0;padding:0}

    .box1{height:300px;width:300px;background:#3695d5;}

    .box1{/*过渡效果*/

    transition: width 2s;

    -moz-transition: width 2s; /* Firefox 4 */

    -webkit-transition: width 2s; /* Safari 和 Chrome */

    -o-transition: width 2s; /* Opera */

    }

    .box1:hover{background:#dcdcdc;height:400px;width:400px}/*使用伪类hover，鼠标悬浮选取元素，改变样式*/

/style

相关问答

Q1: 什么是CSS样式,以及CSS样式包含那几种类型?

CSS即层叠样式表（Cascading Style Sheets），是一种用来表现HTML或XML等文件样式的计算机语言。

CSS样式主要包含以下三种类型：

1、行内样式（内嵌样式）：结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。

例：标记 style="样式的属性名1：样式的属性值1；属性名2：属性值2；......"/标记

2、内部样式（内联样式）：写在HTML页面内部，存放于head标记当中，样式写在style标记内。

例：style选择器 {属性名：属性值；属性名：属性值；......}/style

3、外部样式（外联样式）：写在css文件内。

例：link type="text/css" rel="stylesheet" href="css/main.css" /

扩展资料：

使用CSS样式的优点：

CSS有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从HTML或XML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。

此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。

CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。

只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。

参考资料来源：百度百科-CSS

Q2: 请问怎样转换CSS样式

楼主说的应该是更换网页皮肤吧。关键代码在这里：

link

href="style_change/black/sty_black.css"

rel="stylesheet"

type="text/css"

id="ch_css"

/

点击某个按钮的时候，用JS获取link标签的id，即获取这个link对象，然后通过JS更换href链接到另一个CSS样式表，达到换肤的目的。