Powered by Typecho)))
Optimized by EAimTY
一.使用css缩写
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。
二.明确定义单位,除非值为0
忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。
三.区分大小写
当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。
四.取消class和id前的元素限定
当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:
CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式,这是最常用的应用。但
也可以应用于
XML类的文档,包括SVG和XUL。他负责管理网页的设计和外观。使用CSS,你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜
色,以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和
改进网站。恩,随便看看吧。
Csstutorial
这个站点全部是关于CSS的。万一你不熟悉CSS:CSS是HTML的一种姐妹技术,可以设计你的页面。这些细节都在教程里面,不过现在我就可以说Css可以让你页面看起来更好!
常用CSS缩写语法总结
作者:Gareth 发布时间:July 1, 2008 分类:Design
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
颜色
16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
* property:value1; 表示所有边都是一个值value1;
* property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
* property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
* property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下:
* border-width:1px;
* border-style:solid;
* border-color:#000;
可以缩写为一句:border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下:
* background-color:#f00;
* background-image:url(background.gif);
* background-repeat:no-repeat;
* background-attachment:fixed;
* background-position:0 0;
可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
* color: transparent
* image: none
* repeat: repeat
* attachment: scroll
* position: 0% 0%
字体(fonts)
字体的属性如下:
* font-style:italic;
* font-variant:small-caps;
* font-weight:bold;
* font-size:1em;
* line-height:140%;
* font-family:"Lucida Grande",sans-serif;
可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
* list-style-type:square;
* list-style-position:inside;
* list-style-image:url(image.gif);
可以缩写为一句:list-style:square inside url(image.gif);
最近在测试博客CSS文件的W3C规则,调整代码的时候,遇到了CSS HACK,
在网上找了半天,发现这个是管用的。
去掉其他重复啰嗦的描述,我将符合每个特定浏览器的代码规则总结如下,
在某段需要调整的CSS代码处,可以根据如下规则进行编写。
简单规则如下:
区别FF,IE7,IE6:
FF background:red;
IE7 background:green !important;
IE6 background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;(在需要将IE和FF分别写样式时,IE样式的属性前面加*号。)
IE6能识别*,但不能识别 !important,(在区分IE6,IE7时,属性后面加 !important,注意!important前面有个空格)
IE7能识别*,也能识别!important;(将IE7与IE6,FF区分开来)
FF不能识别*,但能识别!important;(注意不能单独使用!important,避免FF解读它。)
目前IE的最新版本IE8已经面试,但据有经验的网友称,IE8的对CSS的执行效果形如Firefox,于是不用另外考虑IE8,大可以让它与FF共用一套CSS样式。
这篇文章主要写的提高网页在客户端浏览器的渲染速度的CSS部分,暂时总结了10条。
1、*{} #zishu *{} 尽量避开
由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默认属性全部去除,以达到所有签标属性值都统一的效果。所以就有了*通配符。*会遍历所有的标签;
*{margin:0; padding:0}
如果这样写,页面中所有的标签的margin全是0;padding也是0;
#zishu *{margin:0; padding:0}
如果这样写,在id等于zishu下边的所有标签的margin全是0;padding也是0;
这样写的问题是:
a.遍历会消耗很多的时间,如果你的HTML代码写的不规范或是某一签标没有必合,这个时间可能还会更长;
b.很多的标签本来就没有这个属性或属性本身就是统一的,那么更给设置一次,也有时间的开消;
建议的的解决办法:
a.不要去使用生僻的标签,因为这些标签往往在不同浏览器中解释出来的效果不一样;所以你要尽可能的去使用那些常用的标签;
b.不要使用*;而是把你常用到的这些标签进行处理;例如:body,li,p,h1{margin:0; padding:0}
2、滤镜的一些东西不要去用