前端开发的三驾马车——html、css、js，先谈谈CSS

CSS

前期：解决布局、特效、兼容问题

中级：网站风格的制定、色调、模块、布局方式、交互方式、逻辑设计等

高级：模块命名、类的命名、文件的组织、共用模块的提取、代码的复用、可读性、扩展性、维护性

CSS模块

1、Base（基础） 
　　基础的样式，就是一些需要最先定义好，针对于某一类元素的通用固定样式。 
　　2、Layout（布局） 
　　布局样式，是跟页面整体结构相关，譬如，列表，主内容，侧边栏的位置、宽高、布局方式等。 
　　3、Module（模块） 
　　模块样式，就是我们在对页面进行拆的过程中，所抽取分类的模块，这类的样式分别写到一起。 
　　4、State（状态） 
　　页面中的某些元素会需要响应不同的状态，比如，可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。 
　　5、Theme（主题）

CSS命名

原则：无层级，无标签，通用性，分离与面向属性命名

CSS通用样式库

/*!

* by zhangxinxu(.com) 2010-?

* https://github.com/zhangxinxu/zxx.lib.css

* under MIT license

*/

/*

* 2010-07-12 v1.0

* 2010-07-21 v1.1 添加block元素居中之auto属性，增加鼠标手形样式

* 2010-09-17 v1.2 添加z-index层级属性

* 2010-09-29 v1.3 添加break-word属性

* 2010-11-12 v1.4 添加white-space:nowrap;值，去掉Georgia字体

* 2011-01-17 v1.5 去除red颜色，添加cell双栏自适应属性，z样式影响扩至IE7，样式位置以及顺序调整，dib样式忽略Firefox 2，去除Lucida Console字体，添加Verdana字体，添加letter-spacing样式

* 2011-07-28 v1.6 增加vertical-align:bottom属性，增加点点点效果多样

* 2012-01-18 v1.7 点点点效果样式去除-moz-前缀，多余；增加修复cell下连续单词字符换行问题；去除.ovs{overflow:scroll;}

                  去除.vimg{margin-bottom:-3px;}

* 2013-05-24 v2.0 为开源到github上做大改

                  1. 增加margin负值范围

                  2. margin/padding增加15px/30px组

                  3. 中文字体改成英文字符表示，例如“微软雅黑” → "microsoft yahei"

                  4. 新增border系列, background-color系列, width(fixed value/percent value)系列以及.ell以下所有样式

* 2013-07-31 v2.1 inline_any等12px字体大小限制去除，inline_box的-3px间距缩进改成-.25em, 以便适应各种字体大小环境

* 2013-09-13 v2.2 12px字体大小限制修改为1px笔误了，应该为1em, 删除-ms-transition

* 2013-10-11 v2.3 float_seven一直没删除，清掉。增加两个绝对定位隐藏：abs_out和abs_clip

* 2013-11-23 v2.4 add p0, ova, f18. 去除trans中-moz-和-o-私有前缀

* 2014-02-26 v2.5 fix two name mistake

* 2014-02-27 v2.6 add fl

*/

/* ---------------------single CSS----------------------- */

/* display */

.dn{display:none;}

.di{display:inline;}

.db{display:block;}

.dib{display:inline-block;} /* if the element is block level(eg. div, li), using 'inline_any' instead */

/* height */

.h14{height:14px;}

.h16{height:16px;}

.h18{height:18px;}

.h20{height:20px;}

.h22{height:22px;}

.h24{height:24px;}

/* width */

/* fixed width value */

.w20{width:20px;}

.w50{width:50px;}

.w70{width:70px;}

.w100{width:100px;}

.w120{width:120px;}

.w140{width:140px;}

.w160{width:160px;}

.w180{width:180px;}

.w200{width:200px;}

.w220{width:220px;}

.w250{width:250px;}

.w280{width:280px;}

.w300{width:280px;}

.w320{width:320px;}

.w360{width:360px;}

.w400{width:400px;}

.w460{width:460px;}

.w500{width:500px;}

.w600{width:600px;}

.w640{width:640px;}

.w700{width:700px;}

/* percent width value */

.pct10{width:10%;}

.pct15{width:15%;}

.pct20{width:20%;}

.pct25{width:25%;}

.pct30{width:30%;}

.pct33{width:33.3%;}

.pct40{width:40%;}

.pct50{width:50%;}

.pct60{width:60%;}

.pct66{width:66.6%;}

.pct70{width:70%;}

.pct75{width:75%;}

.pct80{width:80%;}

.pct90{width:90%;}

.pct100{width:100%;}

/* line-height */

.lh14{line-height:14px;}

.lh16{line-height:16px;}

.lh18{line-height:18px;}

.lh20{line-height:20px;}

.lh22{line-height:22px;}

.lh24{line-height:24px;}

/* margin */

.m0{margin:0;}

.ml1{margin-left:1px;}

.ml2{margin-left:2px;}

.ml5{margin-left:5px;}

.ml10{margin-left:10px;}

.ml15{margin-left:15px;}

.ml20{margin-left:20px;}

.ml30{margin-left:30px;}

.mr1{margin-right:1px;}

.mr2{margin-right:2px;}

.mr5{margin-right:5px;}

.mr10{margin-right:10px;}

.mr15{margin-right:15px;}

.mr20{margin-right:20px;}

.mr30{margin-right:30px;}

.mt1{margin-top:1px;}

.mt2{margin-top:2px;}

.mt5{margin-top:5px;}

.mt10{margin-top:10px;}

.mt15{margin-top:15px;}

.mt20{margin-top:20px;}

.mt30{margin-top:30px;}

.mb1{margin-bottom:1px;}

.mb2{margin-bottom:2px;}

.mb5{margin-bottom:5px;}

.mb10{margin-bottom:10px;}

.mb15{margin-bottom:15px;}

.mb20{margin-bottom:20px;}

.mb30{margin-bottom:30px;}

/* margin negative */

.ml-1{margin-left:-1px;}

.mr-1{margin-right:-1px;}

.mt-1{margin-top:-1px;}

.mb-1{margin-bottom:-1px;}

.ml-3{margin-left:-3px;}

.mr-3{margin-right:-3px;}

.mt-3{margin-top:-3px;}

.mb-3{margin-bottom:-3px;}

.ml-20{margin-left:-20px;}

.mr-20{margin-right:-20px;}

.mt-20{margin-top:-20px;}

.mb-20{margin-bottom:-20px;}

/* padding */

.p0{padding:0;}

.p1{padding:1px;}

.pl1{padding-left:1px;}

.pt1{padding-top:1px;}

.pr1{padding-right:1px;}

.pb1{padding-bottom:1px;}

.p2{padding:2px;}

.pl2{padding-left:2px;}

.pt2{padding-top:2px;}

.pr2{padding-right:2px;}

.pb2{padding-bottom:2px;}

.pl5{padding-left:5px;}

.p5{padding:5px;}

.pt5{padding-top:5px;}

.pr5{padding-right:5px;}

.pb5{padding-bottom:5px;}

.p10{padding:10px;}

.pl10{padding-left:10px;}

.pt10{padding-top:10px;}

.pr10{padding-right:10px;}

.pb10{padding-bottom:10px;}

.p15{padding:15px;}

.pl15{padding-left:15px;}

.pt15{padding-top:15px;}

.pr15{padding-right:15px;}

.pb15{padding-bottom:15px;}

.p20{padding:20px;}

.pl20{padding-left:20px;}

.pt20{padding-top:20px;}

.pr20{padding-right:20px;}

.pb20{padding-bottom:20px;}

.p30{padding:30px;}

.pl30{padding-left:30px;}

.pt30{padding-top:30px;}

.pr30{padding-right:30px;}

.pb30{padding-bottom:30px;}

/* border-color name rule: border(b)-position(l/r/t/b/d)-width(null/2)-style(null/sh)-color(first one letter/first two letter) |-> All colors are safe color*/

.bdc{border:1px solid #ccc;}

.blc{border-left:1px solid #ccc;}

.brc{border-right:1px solid #ccc;}

.btc{border-top:1px solid #ccc;}

.bbc{border-bottom:1px solid #ccc;}

.bdd{border:1px solid #ddd;}

.bld{border-left:1px solid #ddd;}

.brd{border-right:1px solid #ddd;}

.btd{border-top:1px solid #ddd;}

.bbd{border-bottom:1px solid #ddd;}

.bde{border:1px solid #eee;}

.ble{border-left:1px solid #eee;}

.bre{border-right:1px solid #eee;}

.bte{border-top:1px solid #eee;}

.bbe{border-bottom:1px solid #eee;}

/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */

.bgwh{background-color:#fff;}

.bgfb{background-color:#fbfbfb;}

.bgf5{background-color:#f5f5f5;}

.bgf0{background-color:#f0f0f0;}

.bgeb{background-color:#ebebeb;}

.bge0{background-color:#e0e0e0;}

/* safe color */

.g0{color:#000;}

.g3{color:#333;}

.g6{color:#666;}

.g9{color:#999;}

.gc{color:#ccc;}

.wh{color:white;}

/* font-size */

.f0{font-size:0;}

.f10{font-size:10px;}

.f12{font-size:12px;}

.f13{font-size:13px;}

.f14{font-size:14px;}

.f16{font-size:16px;}

.f18{font-size:18px;}

.f20{font-size:20px;}

.f24{font-size:24px;}

/* font-family */

.fa{font-family:Arial;}

.ft{font-family:Tahoma;}

.fv{font-family:Verdana;}

.fs{font-family:Simsun;}

.fl{font-family:'Lucida Console';}

.fw{font-family:'Microsoft Yahei';}

/* font-style */

.n{font-weight:normal; font-style:normal;}

.b{font-weight:bold;}

.i{font-style:italic;}

/* text-align */

.tc{text-align:center;}

.tr{text-align:right;}

.tl{text-align:left;}

.tj{text-align:justify;}

/* text-decoration */

.tdl{text-decoration:underline;}

.tdn,.tdn:hover,.tdn a:hover,a.tdl:hover{text-decoration:none;}

/* letter-spacing */

.lt-1{letter-spacing:-1px;}

.lt0{letter-spacing:0;}

.lt1{letter-spacing:1px;}

/* white-space */

.nowrap{white-space:nowrap;}

/* word-wrap */

.bk{word-wrap:break-word;}

/* vertical-align */

.vm{vertical-align:middle;}

.vtb{vertical-align:text-bottom;}

.vb{vertical-align:bottom;}

.vt{vertical-align:top;}

.vn{vertical-align:-2px;}

/* float */

.l{float:left;}

.r{float:right;}

/* clear */

.cl{clear:both;}

/* position */

.rel{position:relative;}

.abs{position:absolute;}

/*z-index*/

.zx1{z-index:1;}

.zx2{z-index:2;}

/* cursor */

.poi{cursor:pointer;}

.def{cursor:default;}

/* overflow */

.ovh{overflow:hidden;}

.ova{overflow:auto;}

/* visibility */

.vh{visibility:hidden;}

.vv{visibility:visible;}

/* zoom */

.z{*zoom:1;}

/* ------------------- multiply CSS ------------------ */

/* 块状元素水平居中 */

.auto{margin-left:auto; margin-right:auto;}

/* 清除浮 动*/

.fix{*zoom:1;}

.fix:after{display:table; content:''; clear:both;}

/* 基于display:table-cell的自适应布局 */

.cell{display:table-cell; *display:inline-block; width:2000px; *width:auto;}

/* 双栏自适应cell部分连续英文字符换行 */

.cell_bk{display:table; width:100%; table-layout:fixed; word-wrap:break-word;}

/* 单行文字溢出虚点显 示*/

.ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

/* css3过渡动画效果 */

.trans{

	-webkit-transition:all 0.3s;

	        transition:all 0.3s;

}

/* 大小不定元素垂直居中 */

.dib_vm{display:inline-block; width:0; height:100%; vertical-align:middle;}

/* 加载中背景图片 - 如果您使用该CSS小库，务必修改此图片地址 */

.loading{background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;}

/* 无框文本框文本域 */

.bd_none{border:0; outline:none;}

/* 绝对定位隐藏 */

.abs_out{position:absolute; left:-999em; top:-999em;}

.abs_clip{position:absolute; clip:rect(0 0 0 0);}

/* 按钮禁用 */

.disabled{color:#acacac!important; border-color:#acacac!important; text-shadow:1px 1px #fff!important; outline:0!important; cursor:default!important; pointer-events:none;}

.disabled:hover{text-decoration:none!important;}

/*inline-block与float等宽列表*/

.inline_box{font-size:1em; letter-spacing:-.25em; font-family:Arial;}

.inline_two, .inline_three, .inline_four, .inline_five, .inline_six, .inline_any{display:inline-block; *display:inline; letter-spacing:0; vertical-align:top; *zoom:1;}

.float_two, .float_three, .float_four, .float_five, .float_six{float:left;}

.inline_two, .float_two{width:49.9%;}

.inline_three, .float_three{width:33.3%;}

.inline_four, .float_four{width:24.9%;}

.inline_five, .float_five{width:19.9%;}

.inline_six, .float_six{width:16.6%;}

.inline_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

　　

前端CSS的基本素养的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

随机推荐

  1. Python基础学习六 操作MySQL

    python操作数据库,需要先安装模块 1.下载MySQL.Redis模块 2.解压后,在当前目录执行 python setup.py install 3.或是pycharm直接选择安装 import ...

  2. 重命名Docker容器

    重命名Docker容器: Docker rename [Old container name]  [New container name]

  3. POI技术

    1.excel左上角有绿色小图标说明单元格格式不匹配 2.模板中设置自动计算没效果,需要加上sheet.setForceFormulaRecalculation(true); FileInputStr ...

  4. Ubuntu 源使用帮助

    地址 https://mirrors.ustc.edu.cn/ubuntu/ 说明 Ubuntu 软件源 收录架构 AMD64 (x86_64), Intel x86 其他架构请参考 Ubuntu P ...

  5. IP协议、ARP协议等之温故知新

    今天才知道: 1.IP协议的固定部分长度为20字节.(貌似有一家运维工程师面试我的时候,问过我这个问题呢.) 2.IP数据包首部中的协议?? 答:协议:占8位,指出此数据报携带的数据使用何种协议以便目 ...

  6. 默默的发现在网上找到的hook NtQueryDirectoryFile......

    默默的发现在网上找到的hook  NtQueryDirectoryFile...... hook  NtQueryDirectoryFile是为了实现文件隐藏,然后就发现在网上发现的代码版本似乎同一个 ...

  7. 正则表达式复习 (?<=) (?=)

    1.首先值得一说的是"<" 和">" 不是元字符 "."是元字符 ,连接字符"-",即使在字符组内部也不一定 ...

  8. spark源码阅读之network(3)

    TransportContext用来创建TransportServer和TransportclientFactory,同时使用TransportChannelHandler用来配置channel的pi ...

  9. spring的一些配置和重要的接口和类

    spring的配置文件 通常是applicationContext.xml(具体的bean配置会在后面内容中详解) setter方法注入: <property name=“” value=“ja ...

  10. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...