古语有云:不以规矩,不成方圆。不管是国还是家还是...都得有规矩加以约束。同样,在我们程序猿的代码中也有一定的规矩——W3C标准,但是我今天不会讲那么高深的道理,我只想说说,我近些日子在开发中所总结出来的CSS一些书写规范:
一、善用css缩写规则
1. 边距(4边):
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px(省略 左等于右)
1px 2px (省略 上等于下)
1px(四边都相同)
2. 缩写(border)特定样式:
border:1px solid #ffffff;/*粗细 样式 颜色*/ border-0 1px 2px 3px;/*上、右、下、左*/
3. 关于文字的缩写规则:
font-style:italic; /*斜体形式*/ font-variant:small-caps/normal; /*变体样式:小型大写字母/正常*/ font-weight:bold;/*粗体*/ font-size:12px;/*字体大小*/ line-height:1.2em(120%)/1.5em(150%);/*行高*/ font-family:arrial,sans-serif,verdana;/*字体样式*/ /*缩写成:*/ font:italic small-caps bold 12px/1.5emarrial,sans-serif; /*注意:Font-size和Line-height用斜杠组合在一起不能分开写。*/
4. 关于背景图片的:
background:#FFF url(log.gif) no-repeat fixed top/cover; /*颜色 背景图 是否平铺 固定于可视区 上对齐/铺满整个盒子*/
6. 关于列表:
list-style-type:square/none; list-style-position:inside; list-style-image:url(filename.gif); /*缩写成:*/ list-style:none inside url(filename.gif);
二、运用4种方法来引入CSS样式
1.link
<link rel=”stylesheet” type=”text/css”href=”a.css”> /*rel 关系 type 数据类型 href 路径*/ /*部分浏览器支持候选样式,关键字:alternate:*/ <link rel=”stylesheet” type=”text/css”href=”a.css”> <link rel=”alternate stylesheet”type=”text/css” href=”b.css”> <link rel=”alternate stylesheet”type=”text/css” href=”c.css”>
2.内部样式块
<style rel="stylesheet" type="text/css"> h1{ color:red; } </style>
3.@import url{a.css
注意:此指令必须放在<style>容器中,并且在所有样式之前
建议放在一个html注释中,<!– –>浏览器会不显示注释内的内容,而import等css代码能正常工作
4.内联样式
<p style=”color:red;”>
使用情景:
行内样式=>本地调试
内部样式=>单页面样式
外联样式=>企业大型项目 便于后期维护
三、选择器
选择器是css的一个基本概念,基本规则如下:
1.规则结构:h1 {color:red;}选择器 {属性:值;}
这是元素选择器,基本可以包括所有html的元素
属性值可以包括多个元素,如:border:1px solid red;
2.常用语法
2-1.分组:选择器和声明都可以分组:
h1,h2,h3{color:red;background:#fff;} ,选择器用“,”分割开,属性用”;”分割
2-2类选择器,即通过class=”stylename”应用的声明
定义:.stylename{color:red;}
注意:在html中可以使用多类选择:如class=”cn1 cn2 cn3″
3.ID选择器,即与id属性对应的样式
定义:#a{color:red;} ->这个定义对用id=”a”的元素
4.这部分都是我们常见的css语法,下面谈一下我们不常见的选择器语法
1)父子结构,跟文档结构图对应(后代/子代选择器)
如p span{border:1px solidred;}对应的是<p>下面的<li>标签,这个很用用途,可以准确定位.
一些特殊应用(IE7支持):
(1) p > span{},匹配所有p下所有的span
(2) p + span{} ,匹配紧接着p元素后出现的第一个span标签,2者要有相同的父标签
2)属性选择器:(注意:属性选择器ie7才开始支持,以下版本并不支持,其他的浏览器基本可以)
语法:img[alt]{border:1pxsolid;}
表示对应有alt属性的img标签,当然可以支持多个属性对应,如img[alt][title]{};表示这个2个属性都有的img标签,
也可以与具体值对应:如:img[alt=”摄影”]{};
属性选择器中的高级应用,特殊匹配:
(1)img[class~=”b”], ~= : 与属性中的一个值对应的,即与<img class=”a b c”>对应
(2)[class^=”a”],以a开头的
(3)[class$=”a”],以a结束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a(a-)开头的
(6)[class="a"] 选择所有class属性等于'a'的某元素
3)伪类和伪元素
日常使用中主要是<a>标签的几个伪类:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:动态伪类可以应用到任何元素,如,input:focus{background:red;}当input标签获得焦点时背景变红
以上语法组合使用,就能实现定位准确、简单间接的样式了
注:尽量使用子选择器减少id和class的定义
四、选择器优先级:
初级:ID选择器>class选择器>元素选择器>通配符选择器(*)
注:优先级相同时,会按代码执行顺序进行样式覆盖
后代选择器扩展优先级:
1.当ID选择器个数不相等,ID选择器个数多的优先级较高
2.当ID选择器个数相等时,就比Class选择器个数,个数多的优先级较高
3.当Class选择器个数相等时,就比元素选择器,个数多的优先级较高
选择器基本原则:
精准控制元素=>越精准的优先级越高=>精准度一样时,遵循上面的规则
注:!important会提升优先级,但是不建议使用
样式优先级:
行内样式>内部样式=外联样式(也就是说,内部和外联样式的优先级遵循选择器优先级)
五、CSS的命名规范
1. id的命名
(1)页面结构
容器: container 页头:header
内容:content/container 页面主体:main
页尾:footer 导航:nav
侧栏:sidebar 栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
2.导航
导航:nav 主导航:mainnav
子导航:subnav 顶导航:topnav
边导航:sidebar 左导航:leftsidebar
右导航:rightsidebar 菜单:menu
子菜单:submenu 标题: title
摘要: summary
3.功能
标志:logo 广告:banner
登陆:login 登录条:loginbar
注册:regsiter 搜索:search
功能区:shop 标题:title
加入:joinus 状态:status
按钮:btn 滚动:scroll
标签页:tab 文章列表:list
提示信息:msg 当前的: current
小技巧:tips 图标: icon
注释:note 指南:guild
服务:service 热点:hot
新闻:news 下载:download
投票:vote 合作伙伴:partner
友情链接:link 版权:copyright
2. class的命名
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
一律小写;尽量用英文;不加中杠和下划线;2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写(eg:mainContent);尽量不缩写,除非一看就明白的单词.
3. 主要的站点css文件
主要的 master.css 模块 module.css
基本共用 base.css(root.css) 布局,版面 layout.css
主题 themes.css 专栏 columns.css
文字 font.css 表单 forms.css
补丁 mend.css 打印 print.css
六、如果文字过长,则将过长的部分变成省略号显示
<style=”120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”>
七、并不是所有样式都要简写
当样式表前定义了如p{padding:1px2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{paddingtop:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义
了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。(此种方法对后期修改样式很重要)
八、几个常用到的CSS细节处理上的样式
1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;
2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行,不过只能
处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。
万能强制换行:white-space:normal;word-break:break-all
禁止换行:white-space:nowrap
强制换行:word-wrap:break-word; word-break: normal;
.AutoNewline{ /*word-break: break-all; 方法一必须*/ /*word-wrap:break-word;overflow:hidden; 方法二*/ /*word-wrap:break-word; word-break: normal;方法三 */ word-wrap:break-word; word-break:break-all; } .NoNewline{ /*word-break: keep-all; 方法一必须*/ white-space:nowrap; }
3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。
4)<acronym title=”输入要提示的文字”style=”cursor:help;”>文字</acronym>
用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。
5)图片设为半透明:
.halfalpha { background-color:#000000;filter:Alpha(Opacity=50); } /*在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;*/
6)FLASH透明:
选中swf,打开原代码窗口,在</object>前输入<paramname=”wmode” value=”transparent”>
以上是针对IE的代码。针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:
.pictures img { filter: alpha(opacity=45); } .pictures a:hover img { filter: alpha(opacity=90); }
8)层在浏览器中居中对齐问题
body { text-align: center; } #content { text-align: left; width: 700px; margin: 0 auto; }
9)单行内容在层中垂直对齐问题
#content{ height:19px; line-height:19px; }/*缺点是要内容不要换行。*/
10)层在浏览器中垂直居中对齐问题
缺点是:水平、垂直方向上不能出现滚动条,只能是在一屏的情况下
其实解决的思路是这样的:
div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid red; }
除了上述思路,还有其他方法:
/*1.固定盒子宽高,将margin的值通过计算写死*/ /*2.定位一:*/ div{ position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; }/*(不支持IE7以下)*/ /*3.vertical-align*/ div{ margin:auto; text-align:center; line-height:XXpx; } div > p{ vertical-align:middle; } /*4.flex弹性盒模型:*/ div{ display:flex; justify-content:center; align-items:center; } /*5.box弹性盒模型:*/ div{ display:-webkit-box; -webkit-box-pack:center; -weibkit-box-algin:center; } /*6.table布局居中*/ /*7.font-size居中*/ div{ text-algin:center; } div > p{ display:inline-block; vertical-algin:middle;/*(IE6,IE7)*/ } /*8.定位2:*/ div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* 50%为自身尺寸的一半 */
11)CSS控制图片自适应大小
div img { max-width:600px; width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto"); overflow:hidden; }
九、使用float属性的元素要注意的问题
1. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
2. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
3. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。
4. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
5. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
十、浏览器的兼容性问题(针对FF/IE6/IE7)
1.CSS hack:区分IE6,IE7,firefox,区别FF,IE7,IE6:
div{ background:green !important; background:orange; *background:blue; } /*IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
另外再补充一个,下划线”_“,IE6支持下划线,IE7和firefox均不支持下划线。于是大家还可以这样来区分firefox,IE7,IE6*/
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
2.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法
div{ margin:30px!important; margin:28px; } /*注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:*/ div{ maring:30px; margin:28px; } /*重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;*/
3.条件性注释来选择不同的浏览器(比CSS hack简洁)
<!–[if IE 6]->
<link rel=”stylesheet” type=”text/css”href=”ie6.css” mce_href=”ie6.css”>
<![endif]–>
4.区分IE8
.color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/ background-color: #0066FF; /*IE6、IE7会变为蓝色*/ _background-color: #009933; /*IE6会变为绿色*/ } /*IE8兼容IE7 [metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/] 在[title]的上面,注意:把[]换成<>*/