断桥残雪部落格css

引入CSS 的两种方式：link和@import的区别

断桥残雪 — Sun, 20 Jun 2010 04:37:44 +0000

引入css外部文件的两种方法为在html页面通过link，src属性（注意空链接时的陷阱！），再者是通过CSS文件本身通过@import url()引入，虽然这两种方式都可以加载进来CSS文件，可是link和@import也存在着细微的差别。

隶属上的差别

link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。此处注意浏览器的link src为空时候时会导致页面加载次数增多。

@import次数限制

传闻在IE6下，@import只能引入31次css文件，可是可以通过在css文件中再次import来垂直扩展，断桥残雪没有测试过，不过如果出现这样的情况，说明这个写代码的人也挺变态的。

加载顺序的不同

当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS文件会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显，@import这点跟把CSS文件放在页面结尾效果相同，不过如果我们一些样式开始页面并不会出现，而是在交互时才出现的CSS样式，可以通过这个方法引入，时间上错开。例如：Ajax的html，交互时的弹出框，弹出div等

兼容性上的差别

由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题（似乎影响不大~）。

使用DOM控制样式时的差别

当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

所以，无特殊情况推荐使用link来引入样式，尽量避免使用@import，而如果进行Ajax或者交互的样式，则可以通过@import引入

悼念地震，网站变灰CSS代码

断桥残雪 — Tue, 20 Apr 2010 10:15:07 +0000

为了悼念地震中遇害的同胞，国家规定明天开始悼念日~下面贴出来使用CSS的IE滤镜代码实现网站变灰白的效果代码，只在IE下有效~
首先确定贵网站使用的是标准的doctype头，下面是html开头代码：

然后使用下面的CSS代码

html {
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
}

如果贵网站有Flash，那么请在和<&/object>之间插入一下代码：

使用CSS设置文字反选的背景颜色

断桥残雪 — Mon, 22 Feb 2010 03:51:39 +0000

在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：

反选默认样式

能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。查看示例(请在非IE浏览器下查看)

从博客里可以看到PPK给出了如下的CSS代码：

::-moz-selection{    /*针对Firefox*/
    background:#cc0000;
    color:#fff;
}
 
::selection {
    background:#cc0000;
    color:#fff;
}
 
code::-moz-selection {  /*code是标签选择器，可以换成p或span等*/
    background: #333333;
}
 
code::selection {
    background: #333333;
}

通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，

CSS+jQuery实现滑动幻灯片实例详解

断桥残雪 — Tue, 09 Feb 2010 02:18:01 +0000

今天我看见一个比较不错的jQuery幻灯片教程，比我之前的文章《两个简单的jQuery幻灯片实例》写的更为详细，并且有框架布局的演示图片，特地转载来，部分英文不翻译了，很简单的~

HTML部分代码

Start with having a wrapping container div called main_view, and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.

css+jQuery实现滑动幻灯片实例教程

CSS部分代码

Take a look at the comments below for an explanation of the styles.

/*--Main Container--*/
.main_view {
	float: left;
	position: relative;
}
/*--Window/Masking Styles--*/
.window {
	height:286px;	width: 790px;
	overflow: hidden; /*--Hides anything outside of the set width/height--*/
	position: relative;
}
.image_reel {
	position: absolute;
	top: 0; left: 0;
}
.image_reel img {float: left;}
 
/*--Paging Styles--*/
.paging {
	position: absolute;
	bottom: 40px; right: -7px;
	width: 178px; height:47px;
	z-index: 100; /*--Assures the paging stays on the top layer--*/
	text-align: center;
	line-height: 40px;
	background: url(paging_bg2.png) no-repeat;
	display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
}
.paging a.active {
	font-weight: bold;
	background: #920000;
	border: 1px solid #610000;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

JS部分代码

The following script contains comments explaining which jQuery actions are being performed.
1.Setting up the Image Slider
Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.

//Show the paging and activate its first link
$(".paging").show();
$(".paging a:first").addClass("active");
 
//Get size of the image, how many images there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
 
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

2.Setting up the Slider Function and Timer
We first create the function for the slide event by itself (rotate). Then create another function (rotateSwitch) that will rotate and repeat that slide event (rotate).

//Paging  and Slider Function
rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 
    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );
 
}; 
 
//Rotation  and Timing Event
rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (7 seconds)
};
 
rotateSwitch(); //Run function on launch

Take a look at this tutorial for an explanation of how the timer (setInterval) works.

3.Hover and Click Events
In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.

//On Hover
$(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
}, function() {
    rotateSwitch(); //Resume rotation timer
});	
 
//On Click
$(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotateSwitch(); // Resume rotation timer
    rotate(); //Trigger rotation immediately
    return false; //Prevent browser jump to link anchor
});

css+jQuery实现滑动幻灯片实例教程

查看演示

一些网站实例

Below are some sites that use similar techniques, check them out for inspiration!

Less—让CSS如此简单

断桥残雪 — Mon, 08 Feb 2010 01:47:27 +0000

写CSS 最痛苦的是要搞定一堆浏览器兼容bug ，其次就是要面对CSS 不是programming language 这现实，不存在其他程式语言常见的变数、运算、继承等概念，使原本简单的工作变得冗长，并且使维护工作变得麻烦。
less 的出现便是为了解决这个问题：在现有CSS syntax 的基础上，为CSS 加入程式语言的特性，包括变数、scope、nested rules、运算、继承。
看例子你便会明白：

@brand_color: #F0F;
 
#container {
div {
color: @brand_color;
border: none; }
p {
color: @brand_color;
}
}

这例子应该很容易理解吧，相等于以往的：

#container div {
color: #F0F;
border: none;
}
#container p {
color: #F0F;
}

坏消息是，用less 写成的档案需要在Unix based 的电脑上编译过后方能变成真正的CSS；好消息是，有人写了个小工具less.app 可以完成这项工作，使不懂得用terminal的用户也能够使用。在 window 下貌似没有简单的解法…
less 官方网站：http://lesscss.org/
less.app (GUI): http://incident57.com/less/

png在IE6下透明的几种方法

断桥残雪 — Fri, 15 Jan 2010 02:47:44 +0000

断桥残雪在《IE6 PNG图片不透明问题的解决方法》中提到了使用js来解决IE6下PNG图片不透明的问题，今天我总结一下png在IE6下透明的方法：css方法、js方法、htc方法。

png透明针对IE6一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用IE的滤镜来解决的。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有以下几种：

1、css方法

css：

.pngs {
height: 90px;width: 90px;
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
}

xhtml：

这种方法的优点就是使用简单方便，但是不能作为背景，且只能用作单个png图片的使用。如果要作为背景，需要新增加一个div层，并设置其position:relative;

css：

.png div{position:relative;}

xhml:



CSS 背景PNG透明 及 链接失效问题解决

这种方法可以使用在那些png图片不多，且不需要repeat的情况下。

2、js方法

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
    var arVersion = navigator.appVersion.split(“MSIE”)
    var version = parseFloat(arVersion[1])
    if ((version >= 5.5) && (document.body.filters))
    {
       for(var j=0; j”
             img.outerHTML = strNewHTML
             j = j-1
          }
       }
    }
}
window.attachEvent(“onload”, correctPNG);

这种js先判断是否IE，然后判断ie版本，版本在6.0下则判定函数，给png的图片添加滤镜。
使用起来的确方便，无论多少图片都可以解决，但是依然无法repeat。

3、htc方法

htc相当于完全通过插件的方法修复的IE6的bug，功能强大，支持repeat，背景等功能，使用起来也很方便。
使用一个iepngfix.htc 文件，和一个透明的gif文件。

使用方法：


  //在这里可以加入其他用到png图片的id或者class

ps：如果需要repeat背景，往往需要设置这个div 宽度为100%。

关于iepngfix.htc的详细用法以及Demo，请狂点此处

总结

总结这几种方法，第三种方法（htc方法）是最简单实用，且容易推广的方法，建议可以做个公共的地址，有产品需要，只需要应用这个公共地址就行了。

CSS清除浏览器默认样式注意点

断桥残雪 — Sat, 05 Dec 2009 02:15:20 +0000

今天看了岁月如歌的一片文章《KISSY CSS Reset 1.0》其中写到了css重置的代码

/*
KISSY CSS Reset
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：1. 适应中文；2. 基于最新主流浏览器。
维护：玉伯, 正淳
Revision: 276
*/

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, simsun, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

/** 重置列表元素 **/
ul, ol { list-style: none; }

/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }

sup { vertical-align: text-top; } /* 重置，减少对行高的影响 */
sub { vertical-align: text-bottom; }

/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

而我在腾讯webteam中看到一篇文章《border:none;与border:0;的区别》中提到

1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在
【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏
总结：
1. 对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

2. 如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，
对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。

所以建议大家根据自己的实际情况做判断使用border:none; 或者 border:0;

CSS 3.0 参考手册 (中文版)下载

断桥残雪 — Mon, 23 Nov 2009 01:33:32 +0000

原文来自：腾讯webteam

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

手册难点

中文资料少，对英文翻译功底要求较高；
基础语法要求字斟句酌，避免产生歧义；
兼容性列表涉及浏览器及版本众多；
草案中的Grid布局被业界同仁普遍认为比“天书”还难…

CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

下载：

CSS 3.0 参考手册 (中文版) 下载 (366k)

断桥残雪部落格css

引入CSS 的两种方式：link和@import的区别

隶属上的差别

@import次数限制

加载顺序的不同

兼容性上的差别

使用DOM控制样式时的差别

相关文章

悼念地震，网站变灰CSS代码

相关文章

使用CSS设置文字反选的背景颜色

相关文章

CSS+jQuery实现滑动幻灯片实例详解

HTML部分代码

CSS部分代码

JS部分代码

一些网站实例

相关文章

Less—让CSS如此简单

相关文章

png在IE6下透明的几种方法

1、css方法

2、js方法

3、htc方法

总结

相关文章

CSS清除浏览器默认样式注意点

相关文章

CSS 3.0 参考手册 (中文版)下载

手册难点

备受期待的 CSS 3 新功能

CSS 3.0 参考手册 (中文版) 预览：

下载：

相关文章