段正淳的css笔记(4)

1、css代码的简写

css缩写的语法,对新手有一定帮助,老鸟就不用看了.

1.1: 0px不需要单位,直接:margin:0

1.2:盒模型的缩写,语法是margin:上 右 下 左;.甚至可以简写成margin:上 (右左) 下,当然右左的值应该是一样的

1.3:css属性的最后一项”;”号省略。(不建议 ^_^)

1.4:字体宽度normal用400代替,bold用700代替。

1.5:16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#0044DD可以缩写为#04D;

1.6:border边框的缩写,语法是border:width style color,类似boder:1px solid red;
1.7:背景background的缩写,语法是color image repeat attachment position.类似:background:#f00 url(background.gif) no-repeat fixed 0 0( 为什么我从不写fixed呢?)

1.8:字体的缩写,类似font:italic small-caps bold 1em/140% “SimSun”,sans-serif,可以省略到最简单font:12px “SimSun”.

1.9:list的属性缩写,语法list-style:square inside url(image.gif) ,不过一般咱们都不用.

1.0:想凑10条, 还真难.就把删除无用换行符和空格算一个吧

时间: 2025-01-21 02:17:07

段正淳的css笔记(4)的相关文章

段正淳的css笔记(5)

一天大家在团队中讨论"未知图片垂直居中"的问题,突发奇想用vertical-align:middle这个属性来实现,于是抽了时间做了下面这个不成熟的例子: CSS: div{ width:140px; height:140px; text-indent:-8px; text-align:center; line-height:138px; background:red; font-size:12px; *font-size:120px; *text-indent:-60px; } im

段正淳的css笔记(2)

1.圆角的做法. 为了这个圆角,前段开发们付出的努力是在是太多了.又要考虑http连接数,又要考虑css与html的代码量与语义. 贴出的是最近考虑替换现有圆角做法的方案,可能还有许多未考虑的状况.但是大体的编写方式便是如下. 好处是便于维护,只有一个图片.还可以某种程度上的任意缩放.缺点是多了无意义的html代码. ------css-----– .c,.c i,.c i i,.c b,.c b b,.c p{ background-image:url(purple.png);/*背景图片*/

段正淳的css笔记(1)

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片"旷世奇文"分享给大家.无奈寡人年世已高,真是有点力不从心了.于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了. 现在就来说个淘宝首页上的一个小技巧. 1.类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种. 1.背景图 在a标签设置一个padding 用宽1px高不等的背景图来position到右侧. 缺点:最后一个还是要用class来隐藏掉背景. 2.符号 在每个a标签之间用""

淘宝段正淳的css笔记大全第1/4页_经验交流

试想过总结出这几年来写css与xhtml的经验 ,汇总成一片"旷世奇文"分享给大家.无奈寡人年世已高,真是有点力不从心了.于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了. 现在就来说个淘宝首页上的一个小技巧. 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种. 背景图在a标签设置一个padding 用宽1px高不等的背景图来position到右侧.缺点:最后一个还是要用class来隐藏掉背景. 符号在每个a标签之间用"|"符号来填充.缺

段正淳的css笔记(6)-浅谈css框架开发

个人总结了在开发css框架中的一点经验,献丑了.希望大家的讨论能使我们共同进步.:) 1.css框架 中国的互联网行业已经发展了10年,浏览器也从最早流行的NS到现在的FF3.IE7等等--前端开发工程师的职位也诞生了.近几年在web开发中,有个非常火的词--"框架".YUI.JQuery.Prototype这些javascript框架在开发网站时,确实成为前端开发工程师的手中利器.为什么呢?因为框架是包含工具.函数库.约定,以及尝试从常用任务中抽象出可以复用的通用模块,让设计师与程序

段正淳的css笔记(3)

1.标题右侧"更多"的实现 曾经做上图所示的效果,会使用到position来相对定位到h2标签的右侧.这样的做法,代码确实会多好几行. 其实可以用个笨一点的办法来实现的: 譬如html代码如下: < h2>< a h ref="#" >标题< /a> < span>更多-< /span> < /h2> 使用potsition的css差不多如下: h2{ position:relative; he

段正淳的css笔记(7)-表单在各个浏览器下的表现统一

http://ued.taobao.com/blog/wp-content/uploads/2008/01/input.html 在工作之余抽了点时间写了一下这个,在ie6-ie7-ff下显示位置基本都一致了. (发现demo页面用栅格线做背景,调试还真的容易得多 .热力推荐!这个栅格是从photoshop里拷贝来的.) 这样子定义了input等标签,做提交表单的时候就不用担心ie6-ie7-ff下radio.checkbox.text等高低不平,参差不齐的状况了. 但是有一点疑惑.这样根据in

CSS笔记-除了a标签外的hover属性的应用

以下写的可能对于大部分网友来说可能很简单,但是我自己确实是不知道的. 有一段这样的html: <div> <a href="http://j5c.cnblogs.com/index.php#"> <img alt="i am an img" src="img.jpg"/> </a> </div> 一般hover这个css伪类对于除a标签外的标签是不起作用的(FF浏览器下可以起作用,IE6

CSS样式管理笔记

css|笔记  参考很多站点的方案,综合了自己的理解,注意最后修改时间. 仅仅是笔记,不是结论.希望各位都是能够独立思考的好青年. style_global* { font:12px Arial; color:#000;} html { border:0; overflow-x:hidden; border-right:1px #fff solid;}body { margin:0;}body>table,body>div { margin-left:auto; margin-right:au