1_行为与样式分离

HTML代码:

1 <div id="box"></div>

CSS代码:

1 #box{ width:100px; height:100px; background:#99C;}

JS代码:

 1 window.onload=function(){
 2     var one=document.getElementById(‘box‘);
 3     one.onmouseover=toRed;
 4     one.onmouseout=toBlue;
 5     }
 6 function toRed(){
 7     var oDiv=document.getElementById(‘box‘);
 8     two.style.width="200px";
 9     two.style.height="200px";
10     two.style.background="red";}
11 function toBlue(){
12     var oDiv=document.getElementById(‘box‘);
13     two.style.width="100px";
14     two.style.height="100px";
15     two.style.background="#99c";}
时间: 2024-08-30 06:43:08

1_行为与样式分离的相关文章

[css]【转载】CSS样式分离之再分离

原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5%86%8D%E5%88%86%E7%A6%BB/ 一.关于CSS样式分离 zxx://一些名词表意含有自己的理解成分,或许与您的理解有偏差,希望不要拘泥于措辞.无论是CSS的分离还是js的分离,其主要作用之一就是精简与重用. CSS本身就代表着精简与重用.例如我们可以设置一个如下的样式: .exa

web设计_8_数据表格内容样式分离

1.页面需要用到table的时候,样式重置CSS要设置: table{ border-collapse: collapse; border-spacing: 0; } 2. HTML结构 <table> <caption>标题</caption> <thead> <tr> <th scope="col">...</th> </tr> </thead> <tfoot>

记一次项目中的css样式复用

本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e965283c632e9035875be43e6a305&scene=0#wechat_redirect 二维码: 一直觉得css是一个不被重视,或者说是重视不够的饭后甜点.因为它太“简单”,门槛低,不能彰显或提升广大闷骚程序猿的逼格...一直都想聊聊css相关的一些杂碎.正好借最近的一次项目实践来侃侃

CSS的样式合并与模块化

by zhangxinxu from http://www.zhangxinxu.com 原文地址:http://www.zhangxinxu.com/wordpress/?p=931 一.引言 本文的核心观点为CSS的合并与模块化,似乎与前一篇文章“CSS样式的再分离”有矛盾,其实不然,分离可以精简CSS代码,合并也可以精简CSS代码,一切都是权衡!或是说是在恰当的情况下使用恰当的手段. 正如前文所提到的,分离可以精简CSS,但是同时会带来巨大的HTML代码的开销,显然,对所有的样式进行再分离

结构 样式 行为 内容 的关系

结构用HTML代码来写的.样式写在css表里面 尽最大可能的结构和样式分离:行为是用javascript来写.较少的话可以写在HTML里面.内容的话是后台语言直接从服务端调用的,在前端的展示时候要嵌入到HTML文件里. 那么对一个网站来说,你要修改样式首先找到相应的位置,即找到“钩子”选择器:修改的过程中css文件和js函数的编写要在正确的位置:要读懂相应位置的服务端代码:要明白write less do more的道理.每一段代码做最好的处理. 冯鲁哲 1033850519 189116118

css样式编写规范参考

第一章     HTML & CSS 1.1    样式种类 i.               浏览器默认样式 ii.               带有样式的标签 iii.               内联样式 iv.               style 标签 v.               link 引入样式文件 1.2    结构与表现分离 结构与表现分离, 即 html结构与 css 样式分离, 这样做的好处是: 当页面的样式需要改变时, 仅需要更改样式所在的 css文件, 而不用去

css样式表的选择器与分类

css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构:CSS 称为层叠样式表 用于给网页设置各种样式 css样式的语法由3部分组成,选择器,属性和值. css的分类:主要分: 内联,内嵌,与外联. 内联: 写在标签里, 控制精准,代码重复性差,优先级最高. 内嵌: 嵌在页面head里面,控制没有内联的精准,代码重复性好. 外联: 单独的样式文件,引入

【GoGo闯】前端与SEO(1):结构、表现、行为分离

W3C标准定义WEB包含三个层: – 结构层(HTML) – 表现层(CSS) – 行为层(Javascript) 提倡“结构.表现.行为,三者分离,互不干涉”的WEB页面. 他们各代表这什么? – 内容:让访问者浏览的信息 – 结构:使内容具有逻辑性和易用性 – 表现:修饰内容的外在表现使之看起来美观 – 行为:与内容的交互操作 按照W3C标准,编写网页时应先考虑结构,之后再结构的基础上添加样式,最后在加上交互行为. 所以HTML用来保存内容与结构,CSS用来控制整个文档的表现.但在中文页面中

浏览器如何加载和解析CSS&mdash;&mdash;CSS样式来源与层叠规则

关于CSS样式首先得理解浏览器如何加载它们,最终的页面样式是如何呈现的? CSS层叠样式表的关键在于"层叠",会根据选择符的使用而将样式相互叠加或者覆盖. CSS样式表之所有有"层叠"的概念,因为有多个样式来源,不同样式设置来源不同权重, 优先顺序为:1到5权重依次降低 1 HTML标签头内的样式             (不建议使用,结构样式分离) 2 <style>中编写的样式代码        (适合不常更新或很少访问的页面) 3 <link