燕之庐网站建设 » css http://www.yanzhilu.com/blog 优质网站设计公司 Sat, 31 Jul 2010 07:40:49 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 CSS 3备受期待的8大功能 http://www.yanzhilu.com/blog/archives/3660 http://www.yanzhilu.com/blog/archives/3660#comments Fri, 29 Jan 2010 11:40:32 +0000 changboter http://www.yanzhilu.com/blog/?p=3660 CSS 3仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合W3C标准的旧浏览器的问题。CSS3备受期待是肯定 的，CSS Tricks做了一次投票调查，票选备受期待的CSS功能，一共有7000人参与，结果如下。有趣的是结果的前三名非常的接近。

备受期待的CSS 3功能调查

1、圆角 (22.0%, 1,541 票)

这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。

2、多背景(22.0%, 1,523 票)

这个功能是我最期待的，但向后兼容会是一个很大的问题。

3、@font-face (21.0%, 1,424 票)

Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。

4、动画与渐变(12.0%, 818 票)

Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。

5、渐变色 (8.0%, 535 票)

定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。

6、Box 阴影(4.0%, 271 票)

阴影也是一种渐变色，以往是通过背景图片实现的，如果考虑到多方向的阴影，事情会变得更复杂，Box 阴影机制让一切问题迎刃而解。

7、RGBa – 加入透明色 (3.0%, 234 票)

RGBa 中的 a 代表透明色，透明对设计者来说非常重要，目前除了 IE，这一功能正在被广泛采用。

8、文字阴影(2.0%, 140 票)

也属于渐变色的概念，让文字拥有阴影，以前甚至无法通过图片背景实现，因此这将为设计者带来前所未有的方便。

9、其它 (2.0%, 168 票)

网站建设

]]> http://www.yanzhilu.com/blog/archives/3660/feed 0 css开发手册 http://www.yanzhilu.com/blog/archives/1163 http://www.yanzhilu.com/blog/archives/1163#comments Tue, 20 Oct 2009 13:07:16 +0000 changboter http://www.yanzhilu.com/blog/?p=1163 基础篇：

一、三种样式选择器

属性选择器 p {color:red;}

类选择器 .p {color:red;}

ID选择器 #p {color:red;}

二、transparent

Background:transparent; 防止定义背景被覆盖

三、Netscape4.X（IE/WINDOWS4.0以前的版本）下错误的透明背景理解

Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿

四、字体默认选择：

Body {font-family:”lucida Grande”,Verdana,Lucida,Arial,Helvetica,sans-serif; }

按顺序调用不同平台的默认字体

五、如何解决旧浏览器不支持CSS的情况

使用群选择器 例如：p,td,ul,ol,li,dl,dt,dd {font-size:small;}

六、使用netscape4友好规则

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

七、方法重载细节规则：

Body {font-family:Verdana,sans-serif;}

p,td,ul,ol,li,dl,dt,dd {font-size:small;}

p {font-family:times,”Times New Roman”,serif;}

八、内容（派生）选择器

Li strong {font-style:italic; font-weight:normal }

例如：strong {color:red;} h2{color:red;} strong h2 {color:blue;}

例如：#sidebar {color:red} #sidebar p {color:blue;}

例如：.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;}

CSS嵌入

一、  外联样式表：

<link rel=”StyleSheet” href=”/css/basic.css” type=”text/css” media=”all”>

<style type=”text/css” media=”all>

@import url(“/Styles/mystylesheet.css”);

</style>

注意：使用@import用来对IE4.0以下浏览器进行屏蔽

二、  嵌入式样式表：

<head>

<style type=”text/css” >

<!- -

Body {color:red;}

- ->

</style>

</head>

注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中）

CSS混合布局应用

www.i3forum.com

一、  Margin（框距）padding（边框距）

margin属性设置顺序：上左下右

padding属性设置顺序：上左下右

margin:25px 0 25px 0;

简写：margin:25px 0;

二、Display显示属性设置

（1）、Display属性none  (隐藏)

.alt {display:none;}

<span class=”alt”>Content List Part</span>

（2）、Display属性block  (块/区域)

Img {display:block;}

<img href=”1.gif”></img>

块级元素：存在自身的“盒”中，后面跟随一个默认的回车

内联元素：是流的一部分，后面不跟随回车

（3）、Display属性inline

区别block元素，使用inline状态时，显示方式按照内联元素显示

三、  动态链接属性设置：

a:link {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:visited {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:hover {

font-weight : bold;

text-decoration : underline;

color: #f60;

background: transparent;

}

a:active {

font-weight : bold;

text-decoration : none;

color: #f90;

background: transparent;

}

（1）             文字修饰属性（text-decoration）

Text-decoration:underline overline none;

Underline:链接时有下划线

Overline:连接时有上划线

None:连接时无下划线

（2）             动态连接属性顺序

（LVHA）－ LoVe－HA！

（3）             IE/WINDOWS的伪装欺骗性

应避免使用a:active属性：出现bug 连接会出现冻结现象

四、  如何设置行高（line-height）

Line-height:1.5;

五、  如何设置文章位置（text-align）

可选择属性（left middle right）

IE6/WINDOWS的BUG会错误使文档居中

六、  对于字体的完整CSS应用

Font:13px/1.5 Georigia,”New Centeury Schoolbook”,Times,serif;

七、  设置页面分界限

（1）         vertical-align:middle; 等于 <td valign=”middle”>设置垂直对齐

（2）         background:none 等于 background:url(images/1.gif) repeat;

八、  设置显示器设备

<style type=”text/css” media=”screen”> media属性

使用HTML4.01转换到XHTML1.0过渡式transitional

（早期的基于Gecko核心的浏览器如：netscpae6.0 Mozilla1.0）

一、  在Gecko核心浏览器清除CSS间隙

规则如下：

Img {display:block;} 使用块级元素清楚间隙

.inline {display:inline;} 使用内联元素显示方式

页面如下：

<img class=”inline” alt=”/” />

也可用

Td img {display:block;}

二、在Gecko核心img默认作为内联函数处理

在内联元素下方默认留有空白，这是为了给所包含的块下行字母流出的空间

盒模型、Bug和工作区

CSS四个区域：内容、边框距、边界和边距

在使用CSS设置表格之前：

{width:400px; height:75px;}

错误的理解：表格面积＝400px; height:75px;

实际上CSS设置的表格：

Width:400px height:75px 内容为 Content

那么整个盒的面积为：Content＋padding*2+border*2

盒模式失效及解决办法：（IE4到IE5.5/Windows）

正确理解盒模式的浏览器

（IE6/WIN,IE5/MAC,Netscpae6+,Mozilla,Chimera,Kmeleon,Opera5+）

Float漂浮属性用来使用在两在不同ID选择器中相连

{float:left;}

对于使用padding的表格将使用以下解决方法：

Oprea友好规则（Box盒状模型）

解决办法：

#nav

{

width:151px;/* False value for IE4-5.x/Win */

voice-family:”\”}\”";

voice-family:inherit;

width:100px;   /* Actual value for conformant browsers */

}

html>body #nav {

width:100px;/* be nice to Opera */

}

IE上的空白Bug

解决方法：缩进代码，<td><a href=”#foo”><img src=”1.gif” alt=”/” /></a></td>

IE6/Windows上的漂浮Bug

解决办法：使用JavaScript id名称：content

If (document.all && window.attachEvent)

Windows.attachEvent (“onload”,fixWinIE);

Fuction fixWinIE() {

If (doucument.all.cotent.offsetHeight) {

Doucument.all.content.style.display=”block”;

}

}

嵌入Flash的Bug：

解决办法：在XHTML中嵌入以下代码：

<object type:”application/x-shockwave-flash” data=”movie.swf”

Width=”400px” height=”300px”>

<parma name=”movie” value=”movie.swf”>

</object>

Flash空白故障（IE/WIN 5,5.5,6 Version）

解决办法：使用JavaScript的doucuemnt来欺骗效验系统

<script type=”text/javascript”>

//[CDATA[

If (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){

Doucument.write (‘<object src=”/media/yourflashmovie.swf”……</object>);

}

关键字Fahrner方法：（IE5.x/Winodws 提供伪关键字号）

解决办法：

P {

font-size:x-small;

/* flase value for WinIE4/5 */

Voice-family:”\”}\””;

/* trick WinIE4/5 into thinking the rule is over */

Voice-familt:inherit;

/* recover from trick */

Font-size:small;

/* intended value for better browsers */

}

Html>p {
font-size:small;

/* be nice to opera */

}

区别alt属性与title属性

Alt:注释文档不显示

Title:显示文档不注释

提高可访问性（WAI与508条款）

Bobby的可访问性测试

http://bobby.watchfire.com

能帮助你使网页适应WAI或508条款

为非鼠标用户提供一个选择

解决办法：使用JavaScript

<form action=”fooaction”>

<input type=”button” onclick=”setActiveStyleSheet(‘default’);

Return false; onkeypress=”setActiveStyleSheet(‘default’);

Return false; />

Onkeypress对于非鼠标用户就相当于onclick

对于不能使用JavaScript的用户

<noscript>

<p class=”vs15”><a href=”/daily/1.html”></a></p>

</noscript>

Tabindex属性提供连接到属性的快捷方法

使用Tab换档键的屏幕阅读器，可迅速查询相关内容

区域显示和隐藏效果

解决办法：

http://www.zeldman.com/j/nu.js

Function toggle (targeted ) {

If  (doucument.getElementById ) {

Targeted = doucument.getElementById (targeted);

If (target.style.display = “”;

} else {

Target.style.display = “none”;

}

Xhtml部分：

<p><a href=”/” onclick=”toggle (‘outside2’) ;return false;” onmouseover=”changeImages

(‘ch’,’/i/p/cho.gif ‘);return ture;

Title=”hide or show Relevant Externals (below).”> Toggle Externals </a></p>

定义CSS规则：

<dl id=”outside2” style=”display:none;”>

<dt>Relevant Externals:</dt>

<dd><a href=http://www.somesite.com titile=”Description” >Site NameS</a></dd>

我们把规则写入CSS外联表中

#outside2 {

Display:block;

}

如果你需要一个元素在页面中是不可见的但仍需其占据空间

解决办法：visibility:hidden;

动态菜单（下拉和展开）

下拉式菜单解决办法：http://www.gazingus.org/html/menuDropdown.html

展开式菜单解决办法：http://www.gazingus.org/html/menuExpandable2.html

不支持Javascritp脚本的浏览器，如何实现正常浏览

解决办法：在<head></head>之间插入

<script type=”text/javascritp”>

<!– //

If (!doucument.getElementById) {

Window.location = http://www.somesite.com/somepage/

}

当浏览器不支持Javascript时，window.location将跳转到一个提示页面或者是一个不需要Javascript脚本的纯网页

]]> http://www.yanzhilu.com/blog/archives/1163/feed 0 十条速记口诀学习CSS http://www.yanzhilu.com/blog/archives/955 http://www.yanzhilu.com/blog/archives/955#comments Fri, 16 Oct 2009 05:32:25 +0000 changboter http://www.yanzhilu.com/blog/?p=955 如果在用CSS设计布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？

一、IE边框若显若无，须注意，定是高度设置已忘记；

二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中；

三、三像素文本慢移不必慌，高度设置帮你忙；

四、兼容各个浏览须注意，默认设置行高可能是杀手；

五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览；

六、学布局须思路，路随布局原理自然直，轻松驾驭html，流水布局少hack，代码清爽，兼容好，友好引擎喜欢迎。

七、所有标签皆有源，只是默认各不同，span是无极，无极生两仪—内联和块级，img较特殊，但也遵法理，其他只是改造各不同，一个*号全归原，层叠样式理须多练习，万物皆规律。

八、图片链接排版须小心，图片链接文字链接若对齐，padding和vertical-align:middle要设定，虽差微细倒无妨。

九、IE浮动双边距，请用display：inline拘。

十、列表横向排版，列表代码须紧靠，空隙自消须铭记。

]]> http://www.yanzhilu.com/blog/archives/955/feed 0