Techyou labs
真正的爱应该超越生命的长度、心灵的宽度、 灵魂的深度
常用标签
您正在查看:标签 css 下的文章
October 18, 2010

CSS(层叠样式表)是一种简单的设计语言,能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式,这是最常用的应用。但
也可以应用于
XML类的文档,包括SVG和XUL。他负责管理网页的设计和外观。使用CSS,你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜
色,以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和
改进网站。恩,随便看看吧。

   Csstutorial
Csstutorial
这个站点全部是关于CSS的。万一你不熟悉CSS:CSS是HTML的一种姐妹技术,可以设计你的页面。这些细节都在教程里面,不过现在我就可以说Css可以让你页面看起来更好!

November 13, 2009

常用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代码处,可以根据如下规则进行编写。

简单规则如下:

区别FFIE7IE6

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、滤镜的一些东西不要去用