Azuresky

HTML5的新标签

Wed, 07 Jul 2010 11:53:55 +0000

关注Web发展的人们都几乎都知道html5的强大，都在讨论html5是否会取代并淘汰flash。
本文并不对html5是否取代flash进行讨论，我们来看看html5除了有名的标签外，还有什么新成员添加到html标签大家族。

HTML5新增的标签分别有：

图形媒体：canvas标签　audio标签　embed标签　video标签　source标签
文档结构：header标签　nav标签　section标签　footer标签
文档内容：article标签　aside标签　details标签　summary标签　hgroup标签　time标签　figure标签　figcaption标签
表单元素：command标签　datalist标签
其他文本：ruby标签　rp标签　rt标签　keygen标签　mark标签　meter标签　output标签　progress标签

............

Tags - html , html5

让IE8以IE7的渲染模式来渲染CSS

Sun, 08 Mar 2009 02:50:03 +0000

极少时候，需要用到IE8 CSS hack
但是网络搜索到的都是标题党，所提供的并不是真正的IE8 CSS hack
难道IE8没有专有的识别字符？

答案我也不知道，未发现。
但是可以通过另外一种途径，使你的网页能像IE7那样显示。
虽然我明白，IE8比IE7进步很多，网页标准的支持也更大
渲染CSS上与Firefox非常接近了，在IE8上所见与Firefox几乎无异（极少差异，但却存在）。
但是因为IE这个家族的其他两位重要成员IE6、IE7还是非常多人在使用，特别是IE7。
目前截至2009年05月为止，IE7占有率为44.51%，IE6占有率为17.52%，IE8为3.99%
IE6、IE7是网页设计师们重点的网页测试对象（这里所说的网页测试，是在浏览器中CSS布局的定位是否精确）。
但是我们也得考虑IE8，IE8是的成熟是未来几年升级的对象，因该会有部分用户从IE6直接升级到IE8。
因此我们一定要考虑IE8，把它纳入网页测试对象。

以上是我针对性的分析，言归正传。

微软IE设计团队在设计IE8的时候就为IE8浏览增加了兼容模式、IE7浏览模式。
因此我们用微软提供的下代码可以在IE8浏览器中使用IE7的渲染模式来渲染CSS

这是一个“思想”倒退的办法，但是能暂时解决在IE8中遇到的问题。

其实很少需要用到以上方法，前面说过，IE8上所见与Firefox几乎无异（极少差异，但却存在）。
这个“几乎”就让我使用了一次“让IE8以IE7的渲染模式来渲染CSS”
Tags - ie7 , ie8

使IE6中DIV(或其他容器)设置高度(height)为100%

Wed, 04 Mar 2009 05:33:38 +0000

当你在制作网页中用CSS定义一个DIV(或者其他容器，如table等...)的height:100%
在IE6中此定义无法达到预期纵向(y)100%显示效果时
以下方法可以帮你解决

首先请用CSS定义

body{height:100%}

此定义是为了让本身body就具有height为100%

然后
再定义你想让其达到高100%纵向满屏的DIV(或者其他容器)的父DIV(或者其他容器)
其高度亦为height:100%

注意加重字体所表达的意思

即：
你要定义一个DIV的高100%纵向满屏
那么请先将其上级的DIV的高定义为100%
上级有多少个DIV，你都要定义它们的高为100%
这样才能达到包含在里面的DIV的高为浏览器高100%的纵向满屏效果。

Tags - xhtml , css , div , ie6 , height

CSS网页设计解决方案(Hacks Issues)

Fri, 13 Jun 2008 13:20:13 +0000

    1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。

    2、浏览器特定的选择器

    英文地址：  http://www.solidstategroup.com/page/1592

    当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。

    IE6以下

   *html{}

    IE 7 以下

*:first-child+html {} * html {}

    只对IE 7

*:first-child+html {}

    只对IE 7 和现代浏览器

html>body {}

    只对现代浏览器(非IE 7)

html>/**/body {}

    最新的Opera 9以下版本

html:first-child {}

Safari

html[xmlns*=”"] body:last-child {}

    要使用这些选择器，请在样式前写下这些代码。例如：

#content-box {
　　width: 300px;
　　height: 150px;
}
* html #content-box {
　　width: 250px;
}
/* 重写上面的代码并且把宽度改为250px
在IE6以下版本中适用。 */

    3、在IE6中使用透明PNG图片

    IE6的一个很难处理的BUG就是它不支持透明PNG图片。

    你可能需要用一个重写的CSS的滤镜来解决这个问题：

*html #image-style {
　　background-image: none;
　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”filename.png”, sizingMethod=”scale”);
}

    4、去掉连接虚线框

    当你点击链接时，Firefox会在链接周围产生一个虚线外框。
　　
    这个很好解决，只需在a标签中添加outline:none就可以了。

a{
　　outline:none;
}
注：此样式定义对IE6、IE7无效。但IE8有效
    5、对inline元素应用宽度。

    如果你对一个inline元素使用宽度，它将只在IE6下起作用。

    所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有< strong>和Block标签包括
和

    你不能控制inilne标签的宽带，不过有一个方法是把标签属性从inline改为Block。

span{
　　width:150px;
　　display:block;
}

    应用display:block能够把span标签变成block标签，从而控制它的宽度。

    6、使一个固定宽度的网站居中。

    为了让你的网站在浏览器中居中，可以为最外层Div添加position:relative属性，然后将margin设为auto。

#wrapper {
　　margin: auto;
　　position: relative;
}

    7、图片替换技术

    对于头部来说，永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用，尽管依然使用很普通的文字，这可以联想到所有的优点。

HTML：

Main heading one

CSS:

h1 {
　　background: url(heading-image.gif) no-repeat;
}
h1 span {
　　position:absolute;
　　text-indent: -5000px;
}

    正如你所见，我们对H1标签使用普通的HTML代码，用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处，从而用户看不到它们

    8、最小宽度

    IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用，特别是对于100%宽度的可变模板来说，因为他告诉浏览器停止收缩。

    对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如：

.container {
　　min-width:300px;
}

    要让这些在IE6下起作用的话你要添加额外的努力！你需要创建两个DIV，一个包含着另一个。

Content

    然后你需要设置外面层的min-width：

.container {
　　min-width:300px;
}

    现在又要IE hack起作用了，你需要写下以下代码：

* html .container {
　　border-right: 300px solid #FFF;
}
* html .holder {
　　display: inline-block;
　　position: relative;
　　margin-right: -300px;
}

    当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时，这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

    9、隐藏水平滚动

    要去除水平滚动条，可以在body中插入overflow-x:hidden属性。

body {
　　overflow-x: hidden;
}

    这在你决意要用一个比浏览器款的图片或Flash时很有用。
Tags - css , css滤镜 , code , 解决方案

较常用的CSS层叠样式表缩写总汇

Fri, 13 Jun 2008 12:42:34 +0000
善用CSS层叠样式表缩写可以有效地把CSS文件的大小减小。

CSS缩写的主要规则如下：

颜色(color)
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

容器填充(padding)与边距(margin)
通常有下面四种书写方法:
    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:5px;
margin:5px 6px;
margin:5px 6px 4px;
margin:5px 6px 4px 6px;

边框(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);

Tags - css , code , css缩写

Mozilla给网站制作朋友们的CSS书写顺序建议

Fri, 13 Jun 2008 12:22:30 +0000
css显示样式定义属性
display
list-style
position
float
clear

css容器、块等自身样式定义属性
width
height
margin
padding
border
background

css文本样式定义属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
Tags - xhtml , css , mozilla

XHTML+CSS布局可调用JS实现实时样式风格替换

Fri, 28 Dec 2007 14:08:24 +0000
如果大家常常泡论坛的话，估计也知道现在这些论坛（不论是 Discuz!或者是PHPWind等等）都支持在论坛底部有一个选择风格的列表菜单链接！
如果你的网站页面是以层叠样式表来定义网页的样式风格的话
又制作了多个层叠样式表（css）就可以用以下的方法来增加你的网站的风格可选性
这样的话浏览者就可以根据自己心情来更换论坛的风格！
下面就是要教大家怎样实现这样的功能！一共有四步。

首先是JavaScript文件：
replaceStyle.js
function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
        if(a.getAttribute("title") == title) a.disabled = false;
      }
    }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
    && a.getAttribute("rel").indexOf("alt") == -1
    && a.getAttribute("title")
    )
    return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);

其次是在网页（head标签中）中调用你已经为你的网页定义好样式风格的CSS文件（假如有3个css）

style1.css
style2.css
style3.css

再次是在网页（head标签中）中调用上面写好的Script文件

最后让浏览者在页面中实现选择风格（body标签中）

风格1
风格2
风格3

以上就是XHTML+CSS布局可调用JS实现替换样式风格
Tags - 风格 , style , xhtml , css , javascript

用CSS控制DIV透明

Thu, 27 Dec 2007 06:28:21 +0000
如果要控制DIV透明度，就需要用到CSS的滤镜
其中的Alpha属性就是来实现透明的
甚至可以达到渐变透明效果。
引用

用滤镜filter的Alpha属性实现透明。表达格式如下：

filter: alpha(opacity=?，finishopacity=?，style=?，startX=?，startY=?，finishX=?，finishY=?);

各项赋值说明：
opacity代表透明度，可选值从0到100，0代表完全透明，100代表完全不透明;
finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100;
style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形;
startX和startY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。

Tags - xhtml , css , css滤镜 , div