css样式重用,css样式问题-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

css样式重用,css样式问题

css中class究竟是鸡肋还是鸡肉

css3中,提供了新型的,可以使用通配符的选择方法。例如:[id=^sec]{

我们提供的服务有:成都网站设计、成都做网站、微信公众号开发、网站优化、网站认证、厦门ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的厦门网站制作公司

},表示将此样式,应用在所有id以sec开头的html元素,比如id为section、sec3等的元素都会受到这些规则的影响。这样,我们就可以通过元素命名,来区别不同功能区域,并且使用通配符选择器来统一样式。而这一点,和class的功能类似。class与id的区别就在于,id一个网页中,只能有一个,而class可以有多个,这样可以让多个元素使用相同的样式。

因此,作者在书中说,不推荐使用class,class最终会消失。然而在另一本前端著作《编写高质量代码Web前端开发修炼之道》中,却推荐使用原子类的方法,来提高css样式的重用程度。之前,本人也写过一篇关于创建和使用原子类的文章,并且在现在的设计中应用原子类,感觉非常方便灵活性非常强大。在这里,潜行者m不禁思考,class究竟可取不可取?是鸡肉还是鸡肋?

class和id的区别

html中class和id属性,是用来标记元素、区别元素,这样就可以用css来精确控制样式,也可以使用javascript来控制元素。但class和id是有明显区别的,在网页中,id属性的值只能有一个,但是class的值是可以重复的。比如,我定义一个div的id为a,那么网页中不能再出现一个html元素的id为a;但是我定义一个div的class属性为b,我可以再其他的元素中,定义class属性为b。这样,就可以实现代码的重用,比如两个div都是红色背景,只需写出一个class(.r{background-color:#ff0000;}),然后在两个div中都指定class属性为

r

即可,而要使用id控制,则需要在两个div中,都写上background-color:#ff0000;。同时,id和class的优先级也是不同的,id的优先级要高于class,如果对同一个元素,分别用id和class指定同一属性不同的值,浏览器会优先解析id的值。

鸡肉说:

class可以极大的提高代码的重用,特别是使用原子类,既方便维护,又方便应用。而使用id,必须指定id然后指定大量重复的样式。css3中,虽然升级的强大的选择规则,但是仍然比较混乱,不利于维护。同时,存在即合理,w3c制定出class和id是有他们的道理的,负责不同的工作,class仍然会不断的被使用。

鸡肋说:

css3中,强大的id选择规则,已经可以对相近元素指定相同的样式,达到重用的目的。它已经完全可以取代class的作用,而且对于javascript来说,只能使用id来控制,说不定以后class就会消失了。

几个必须掌握的css概念:重用,子选择器和组选择器

这个可以看看HTML5课程大纲了解啊,分阶段学习的,不同阶段学习的内容可以了解下。

第一阶段:PCterminal

★ PC端页面重构

1、认知行业、岗位、部分专业术语,就业趋势与行业未来展望;

2、HTML5核心元素及布局应用;

3、CSS3核心属性及布局应用;

4、图形、图像软件的使用(PS,FW,AI);

5、浏览器兼容及解决方案;

6、图片整合、滑动门及宽高自适应等高级应用技术;

7、初步接触JS。

★ PC端交互开发(原生JS)

1、javascript基础语法和变量、控制语句、循环语句、函数、事件处理、数组、常见排序算法;

2、DOM操作和BOM操作;

3、定时器、Cookie本地存储、内置对象、正则表达式、闭包、JS面向对象语法、JSON、堆栈结构;

4、Ajax动态读取数据、异步操作、与DOM、JSON的结合使用;

5、各种主流浏览器兼容性处理;

6、单例、工厂、代理、观察者等设计模式;

7、ECMA6.0新特性介绍。

★ PC端交互开发 (JQuery)

1、初识jQuery、jQuery的优势、jQuery框架核心功能、最容易混淆的几个概念

2、jQuery各种选择器的使用,及选择器的应用优化;

3、Dom节点操作、插入、删除、复制、移动节点等操作;

4、事件处理、事件处理模型、事件处理机制、jQuery事件封装机制、jQuery事件应用;

5、jQuery中的动画、动画时间的概念、基本动画方法、复杂动画方法、停止动画与参数说明、jQuery动画的队列问题;

6、表单开发,设计可用性表单、表单验证、增强型表单;

7、Ajax、XMLHttpRequest 基础、jQuery Ajax、工具函数、缓存;

8、在jQuery中编写插件、插件扩展、插件应用、jQuery.pagination分页、jQuery.qtip信息提示、 jQuery.artDialog弹出层、jQuery.jscrollpane滚动条;

9、理解模块式开发,以及requirejs插件的使用。

★ PC项目实训

1、了解项目需求,项目流程;

2、了解项目管理,模块分配,项目时间预估;

3、了解产品周期,参与团队协作;

4、综合运用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技术,完成大型PC端项目开发。

第二阶段:Mobile terminal

HTML5+CSS3新添特性

1、HTML5概述,新增的元素和废除的元素、全局属性;

2、HTML5基础:新增文档结构元素(Article、section、nav)智能表单、文件API(FileList对象和File对象、FileReader接口)、拖放API;

3、CSS3基础:新增的后代选择器、伪类选择器、文本阴影、圆角、盒阴影、变形处理(transform)、动画(transitions)、帧定义(key-frames)、旋转(rotate)、 animation;

4、HTML5多媒体audio音频元素、Video视频元素、视频回调事件;

5、本地存储web storage、本地缓存;

6、定位基础知识以及原理,结合google(高德)地图定位;

7、响应式布局概念以及语法(@media)、web网页和mobile网页的区别、样式继承;

8、Canvas标签基础知识、绘制矩形、绘制圆形、使用路径、图像裁剪、保存为文件、创建动画。

★ WebAPP项目开发及实训

1、angular.js、backbone.js;

2、数据交互,ajax与DOM交互应用;

3、HTML5+CSS3在实际项目中的应用;

4、项目管理,模块分配,项目时间预估;

5、产品周期,团队协作;

6、微信场景开发;

7、微信平台互动开发。

第三阶段:混合应用开发及实训

★ 混合应用开发及综合实训

1、混合开发原理;

2、APP与webAPP;

3、混合应用与HTML页面交互;

4、通过客户端传递数据;

5、项目的版本迭代;

6、项目打包与应用,生成APK。

css 样式重定义的问题

问题1,很显然是不合理的,增加一个属性可以,改变就不行。如果硬要这样做,可以采取细一点的方式,例如为a定义一个样式: .apage a 和 .bpage a 在A页面是div class="apage"a ....../a/div 而在B页面 则是 div class="bpage"a ....../a/div

问题2,尽量将所有的样式表都放在一个单独的CSS文件里,网站所有的页面都调用这一个文件。要明白,CSS、HTML 都不是运行程序,而只是代码,效率和文件的大小有很直接的关系,如果10个页面10个CSS,明显的没有达到这样的目的。

浏览器打开一个页面时,同时也下载了CSS到IE的临时文件夹中(除非CSS不是一个单独的文件),再打开其他页面,如果引用的是同一个CSS,就不会再进行下载。显而易见,下载10个文件要比下载1个文件效率低得多,即使这1个文件比10文件加起来还大。

回复楼下的看法:一个网站的所有页面不可能有非常多的区别,况且CSS是在客户端执行,完全不涉及到服务端,况且浏览器是先看样式名,再根据样式名去查找相符合的样式。不是把所有的样式都遍历一次,你所说的打开页面慢、CUP频率高貌似不大可能出现。即使有,那也不是因为样式表很大的缘故,即使是因为样式表非常大,这样的影响也小到可以忽略,即使明显,也只是在客户端,和客户机有较大关系,对服务端不会造成任何压力。

如果你很不喜欢这样的方式,至少可以把布局大致相同的页面引用某一个CSS,完全不相同的引用另一个CSS。但是一个页面一个CSS,绝对更不可取。

CSS样式如何组织规划?将样式写的简洁,重用性强。

建议你选择你所说的“针对样式的功能写样式”,其实样式CSS只需要写一个就可以,只要你写的CSS文件不超过30K,那么建议你尽量将CSS代码都存在一个CSS文件中,但是如果你怕自己分不清或者难以找到自己想要修改的CSS文件,你也可以分别建立CSS,如首页使用的CSS就可以命名为index.css,列表页可以命名为list.css等等。这样一看就知道是哪里的样式了。

可以看css是怎么做到重用和概括的 优先级

如果a标签内的的二个span元素也有类来定义样式的话,就不会发生变化了。

因此.cell a:hover span {color: #ffffff;} 的写法可以对A标签下的所有的SPAN元素起作用。

CSS问题:请问如何做到CSS样式能够尽量的重用

好问题,每一个程序员都想解决的问题,但实际上是不可能的,不断的重用,意味着色彩、布局简单,同色调


标题名称:css样式重用,css样式问题
当前网址:http://kswsj.cn/article/dsgogpd.html

其他资讯