面向对象的CSS注意事项

1)面向对象的CSS的作用: 1.1)加强代码复用,以便维护: 1.2)减小CSS体积: 1.3)提升渲染效率: 1.4)组件库思想.栅格布局可共用.减少选择器.方便扩展. 2)面向对象的CSS的注意事项: 2.1)不要直接定义子节点,应把共性声明放到父类: 2.2)结构和皮肤相分离: 2.3)容器和内容相分离: 2.4)抽象出可重用的对象,建好组件库,在组件库内寻找可用的元素组装页面: 2.5)往你想要扩展的对象本身增加class而不是他的父节点: 2.6)对象应保持独立性: 2.7)避免使用

oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码复用以便方便维护. 2.减少cs体积 3.提升渲染效率 4.组件库思想,栅格布局可共用,减少选择器,方便扩展. 注意事项 1.不要直接定义子节点,应该把共性放在父类中 2.结构和皮肤相分离 3.容器与内容相分离 4.抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面 5.往你想要扩展的

一.概述 所有的样式格式如下: 样式名称:属性值 属性摘要: background-color 元素的背景颜色 border 设定元素的边框 color 设定元素的前景色 font-size 设定字体的字号 height 设定元素的高度 padding 设定元素到边框的间距 text-decoration设定文字的装饰效果 width 设置元素宽度 二.样式的分类 样式分为以下几种: 1.元素内嵌样式 2.文档内嵌样式 3.外部样式表 4.用户样式 5.浏览器样式 当有多个样式来源时,按照上述顺

animate.css下载地址 有时候需要通过js控制重复运行动画的可以这样操作 1. html代码: <h3 class="animated">aaa</h3> 2. js代码: $('h3').addClass('shake').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ $(this).removeClass(

在html里用标签来连接外置css文件时,被连接的css文件中的以下几个选择器是不会生效的: 1.id选择器. 2.类选择器. 3.属性选择器. 上述几个选择器必须使用内嵌css才会生效.( 外置css更适合给网页主体和同一类元素进行美化,并不适合用于美化单个元素. 此外,html的class值和id值千万不能用纯数字来写. 原文地址:https://www.cnblogs.com/debianroot/p/10162818.html

font系列: font-size font-weight font-family font-style line-height 复合写法:font:italic bolder 24px/40px '宋体' text系列: text-align: right|left|center; text-indent: 2em;首行缩进 em??? text-decoration: underline|overline|line-through letter-spacing:; world-spacing

最初接触到面向对象的CSS还是因为项目中的CSS已经超过八千行,缺乏约束和管理,在近期或者是不远的将来,有迫切的要求需要重构.在前端重构中,我们已经讨论过了JavaScript面向对象的重构,在这个时候再看一看CSS面向对象和模块化,这给我的工作提供了非常好的思路. 首先,我要说的是,在这个概念翻飞的年代里,固执地追求某些概念和涵义,并不能带来更优秀的设计和更高的生产力,面向对象是一种思路,或者说是一种方法论,给CSS重构带来一些启示,这就足够了,没有必要去纠结OO CSS的定义和严谨性. 我们

一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词,则需要加上引号,如:p{font-family:"sans serif";}   CSS注释:以"/*"开始,以"*/"结束. 3. 高级语法 ① 选择器分组 h1,h2,h3,h4,h5,h6{color:red;} ② 继承: body{ col

(转载)原版地址:https://kb.cnblogs.com/page/551422/ 什么是设计模式? 曾有人调侃,设计模式是工程师用于跟别人显摆的,显得高大上:也曾有人这么说,不是设计模式没用,是你还没有到能懂它,会用它的时候. 先来看一下比较官方的解释:"设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的:设计模式使代码