|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
上文：IE7的web尺度计划
IE向来被web尺度的反对者所诟病，而当FireFox横空出生今后，更多的网页制造者入手下手存眷web尺度计划。看着FireFox的市场占据率一直的上升，微软终究推出了IE7。但IE7是不是真的可以力挽狂澜，是不是真的可以失掉用户的信托，是不是真的可以失掉网页计划者的承认呢？
且看《IE7的web尺度之道》系列文章，和你一同见证IE7的改动！
CSS选择符
IE7最令网页计划者镇静的改善，即是撑持更多、更丰厚的CSS选择符（也有翻译为选择器的）了。如许经由过程CSS便可以，更进一步且便利的把持、定位前端布局元素，从而更丰厚、多样的制订款式。
由于一向不喜好套用书籍上的那些很“专业”、“流畅”、“拗口”的名词注释。以是我的博客文章中呈现的名词注释都是一种熊样——俗、普通（忒俗）！用十分直白乃至老土的话来注释这些名词，固然看上往不专业，乃至有所偏向。可是可以让人一看就分明。由于我信任的一点是：让人看不分明的拽文，就是一陀笔墨堆成的屎！请包涵这句话的卑鄙和在理，也请你包涵我上面这些名词注释的老土。
CSS选择符实在人人都见过，乃至都用过。看看上面的例子，就会天然分明了。
运转代码框
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>IE7的web尺度之道示例页面</title><styletype="text/css">#div1{color:red;}.div2{color:blue;}</style></head><body><divid="div1">id选择符示例</div><divclass="div2">类选择符示例</div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
示例中的"#"和"."就是CSS选择符，恰是由于有选择符，白色字体和蓝色字体这两种款式，才正确的定位到了id为“div1”和class为“div2”的两个div标签上。说白了，选择符实在就是CSS为款式找到前台布局元素方针的一种机制。
选择符有良多种，下面的示例中，使用“#”标记的称之为“ID选择符”，由于它是依据前台布局元素的id定位的。使用“.”标记的称之为“类选择符”，由于它是依据前台布局元素的class名定位的。其他的另有“通配选择符”、“范例选择符”、“包括选择符”……更具体的材料请检察这篇文章《CSS基本：CSS选择符》
更多初级选择符
IE7与IE6比拟，撑持了更多的选择符，恰是由于撑持了这些丰厚的选择符，以是使得IE7能够更便利的完成一些，之前在IE6很难完成大概没法完成的效果。上面就让我们看看这些使人镇静的、IE7新撑持的选择符。
相邻同胞选择符
使用“相邻选择符”，能够依据一个元素定位到与之相邻的另外一个元素，并使用款式。说白了，“相邻选择符”就是只对“与本人平行干系的”、“相邻的”、“在我上面的”“哥们元素”起感化。上面的例子，将更有助于你的了解（注重只要处于h1前面的p3，字体色彩产生了变更）。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
h1+p{color:blue}
</style>
</head>
<body>
<pid="p1">这里是我哥们甲的哥们，“我”和它不太熟。</p>
<pid="p2">这里是我哥们甲，它在我后面面，“混”的比我好，以是我就不论它了。</p>
<h1>这里是“我”</h1>
<pid="p3">这里是我哥们乙，它在我前面，“混”的还不如我，以是我要照应它一下。</p>
<pid="p4">这里是我哥们乙的哥们，“我”和它不太熟。</p>
</div>
</body>
</html>
上面是分离在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）的显现效果截图（IE6和IE7共存的办法，能够参考文章《IE6和IE7共存办法（他人是他人的，我是我的）》）。
上面是关于“子选择符”和“儿女选择符”的一些增补材料
良多伴侣把分不清“子选择符”和“儿女选择符”的区分。实在它们的不同仍是蛮年夜的。“儿女选择符”IE6，乃至更低IE版本，就已撑持了。大概你已被这些“拗口”、“深邃”的名词弄含混了。究竟甚么“儿女选择符”呢？实在人人都用过，看看上面的例子就分明了。如今不管是FireFox仍是IE7，关于“子选择符”的撑持还都存在必定的成绩。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
/*儿女选择符*/
#div1p{
color:red;
}
/*子选择符*/
#div1>p{
font-size:150%;
}
</style>
</head>
<body>
<divid="div1">
<pid="p1">我是div1的儿子1
<pid="p1_1">我是div1的孙子</p>
</p>
<pid="p2">我是div1的儿子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包括在“div1”内，那末"p1"和"p2"就是“div1”的儿子，是儿女，而“p1_1”包括在“p1”中，那末“p1_1”是“p1”的儿子，是儿女。而“p1_1”也包括在“div1”中，则“p1_1”是“div1”的孙子，也是儿女。利用“#div1p{color:red;}”（儿女选择器）会将div1上面的一切段落的字体色彩都设置为了白色。不管是孩子仍是孙子，都要听话。“只需是我的儿女，就得听我的话！”——这就是“儿女选择符”。
而“子选择符”则不会那末强横，它尽管它的“儿子”，不会往管“孙子”、“重孙子”、“重重孙子”……
属性选择符
“属性选择符”能够依据某个属性是不是存在，大概属性的值来寻觅元素。奇妙天时用“属性选择符”,将能够轻松的完成良多有用并且壮大的效果。
良多“以用户为中心”的反对者，一向激烈的往失落<a>标签的target属性，其一个很主要的缘故原由就是“没有经由用户的批准，就翻开了新的扫瞄器页面，是一种不尊敬用户的体现。”实在，我团体感到，年夜可不用云云大张旗鼓。由于就算是往失落了这个属性，仍是没法尊敬用户，由于假如有的用户，就是想在新的页面翻开这个链接呢？（倘使，他不晓得利用shift点击链接能够到达目标，并且他也没有安装相似于“拖拽翻开新页面”的扫瞄器大概插件）
实在，利用“属性选择符”，能够对照无效的办理下面的成绩。就是使用“属性选择符”，将会在新窗口翻开的超链接，明白的标识出来，由用户决意是不是往点击超链接。（良多本国的网站已在利用这类体例，并且已构成了一种共鸣：在一个网站各页面之间的跳转链接，不在新窗口翻开。而“会跳转到内部网站的链接”将在新的页面窗口翻开。“会跳转到内部网站的链接”的标识图片也已构成了共鸣，就是这个图标：“”）上面的示例中，即是一种供参考的办理计划：
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
a[target="_blank"]{
padding-right:16px;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/common
/outLink.gif)no-repeatright;
}
</style>
</head>
<body>
<p>
<ahref="#"_fcksavedurl=""#""_fcksavedurl=""#""title="我不会跳转到其他网站，不会再新窗口翻开">我不会跳转到其他网站，不会再新窗口翻开</a>
</p>
<p>
<ahref="http://www.ckuyun.com"title="我会跳转到其他的网站，会在新窗口翻开"target="_blank">我会跳转到其他的网站，会在新窗口翻开</a>
</p>
</body>
</html>
上面是IE7的显现效果截图：
图：“属性选择符”效果表示图，注重第二个超链接后的图标
更壮大的是：“属性选择符”也能够判别一些本人自界说的属性，这关于一些第三方插件开辟的程序员，将是一个极年夜的便利。比方，关于开辟网页“网页翻译”的伴侣，能够将必要翻译的关头字用<span>包起来，然后对这个span设置一个本人的属性。比方中文到英文的翻译，就加个"lang=c2e"，假如是中文翻译到日文，就加个"lang=c2j"。然后经由过程“属性选择符”，将两种情形设置分歧的款式，从而辨别开来。
扩大材料：“属性选择符”初级利用技能
“属性选择符”有着使人惊奇的壮大，它不但可以辨认复杂的属性，判别属性的值。乃至能够依据复杂的正则表达式，来婚配属性的值。看着上面的示例，将会令你感应惊奇。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="YES!B/S!,web尺度,杨正t,博客园,实例代码"/>
<metaname="Description"content="这是一个复杂YES!B/S!文章示例页面,来自杨正t的博客,http://justinyoung.cnblogs.com/"/>
<title>YES!B/S!文章示例页面</title>
<styletype="text/css">
/*以前提字符串开头*/
a[href$=.zip]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_zip.gif)no-repeatcenterright;
}
/*以前提字符串开首*/
a[href^=mailto:]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_mailto.gif)no-repeatcenterright;
}
/*恣意地位包括*/
a[href*="cnblogs"]{
padding:5px20px5px0;
background:url(http://images.cnblogs.com/cnblogs_com/justinyoung/
common/icon_cnblog.gif)no-repeatcenterright;
}
</style>
</head>
<body>
<p>点击下载zip文件——<ahref="download.zip"_fcksavedurl=""download.zip""_fcksavedurl=""download.zip""title="zip文件">zip文件</a></p>
<p>给我发邮件——<ahref="mailto>mailto:123456@163.com">mailto开首</a></p>
<p>来自——<ahref="http://www.ckuyun.com"title="包括博客园网址">包括cnblogs</a></p>
</body>
</html>
上面是IE7的显现效果截图：
假如开动你的脑壳和手指，你将失掉更多令本人惊奇的效果：
伪类选择符和伪工具选择符
这又是使人头疼的“名词”，究竟甚么是“伪类”、“伪工具”呢？究竟“伪”在那里呢？我们仍然从一个人人都用过，很熟习的示例提及：
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
a:link,a:visited,a:active{
color:red;
}
a:hover{
color:blue;
}
</style>
</head>
<body>
<ahref="#"_fcksavedurl=""#""_fcksavedurl=""#""title="测试">鼠标附上往字会酿成蓝色</a>
</body>
</html>
很复杂且罕见的情形，给超链接设置“鼠标移上分歧字体色彩产生变更”的款式。这里的“:link”、“:visited”、“:active”和“:hover”就是“伪类”。之以是说是“伪”，是由于，这些器材必定要依靠在某种标签上（示例中是<a>标签），它们其实不能独自的存在，当它们独自存在的时分将没有任何意义。
在IE6中，只撑持超链接<a>标签的伪类，而在IE7中，则撑持几近一切“可见标签元素”的伪类。也就是说，就算是一个div，你也能够设置div:hover的款式。能够展望的将来是：一些复杂的款式方面的变更，将不再必要js往把持，用css就能够完成复杂的“静态”效果。看上面的例子，将更有助于你的了解。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
#txtName{
border:1pxsolid#eee;
}
#txtName:hover{
border:1pxsolidblack;
}
</style>
</head>
<body>
<inputtype="text"id="txtName"/>
</body>
</html>
下面的示例很复杂，也很经常使用：一个输出名字的文本框，平常形态下，是“灰色”边框，而当用户将鼠标以上往的时分，边框“酿成”玄色，从而到达提示的目标。
上面是IE7和FireFox的显现效果截图。
讲完了“伪类”，上面来说讲“伪工具”。起首“伪工具”也是“伪”，天然也必需依靠其他元素，而不克不及独自存在。而“工具”则意味着“有实体”的器材。最经常使用的“伪工具”就是“:first-letter”（子工具的第一个字）和“:first-line”（子工具的第一行）。上面的示例将有助你了解“:first-letter”和“:first-line”伪工具。
<!DOCTYPEhtmlpublic"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Keywords"content="复杂的XHTML页面"/>
<metaname="Description"content="这是一个复杂的XHTML页面"/>
<title>复杂的XHTML页面</title>
<styletype="text/css">
#div1:first-letter{
font-size:200%;
}
#div1:first-line{
color:red;
}
</style>
</head>
<body>
<divid="div1">
第一行内容，注重这一行的第一个字。<br/>
第二行内容
</div>
</body>
</html>
上面是IE6和IE7的显现效果截图：
关于“:first-line”对出格注重
伪工具“:first-line”指定是第一行，而不是第一段。行的分别是使用<br/>标签，而“段”的分别是使用<p>标签。“:first-line”其实不会对<p>标签分别的段落利用款式。
这个对照反常——由于容器的宽渡过小，而使得第一行“放”不下，而“挤”到第二行的内容，将得到伪工具“:first-line”设置的款式-_-b...看上面的截图，将更有助于你的了解。仍然是下面的谁人示例，可是当将扫瞄器的宽度减少必定水平时，第一行的笔墨被“挤”到了第二行，同时得到了伪工具“:first-line”指定的款式（白色字体色彩）。
图：被“挤”上去的笔墨，将得到伪工具“:first-line”设置的款式
跋文
这些IE6不撑持，IE7才撑持的初级选择符，也是弄定IE6和IE7网页兼容性的无效手腕之一。乃至一些伴侣间接误觉得这些初级选择符，就是CSShack的一种。实在，这些不是CSShack，而是一种改善，一种晋级。以是，利用“初级选择符”手腕到达IE6和IE7的兼容性的办法，能够宁神的利用，不会有csshack的后顾之忧，在微软后续的扫瞄器中必定会撑持的。
开动本人的脑壳，使用这些丰厚的选择符，将可以完成更多，更壮大的效果。IE7只是将舞台帮我们搭好了，怎样唱一出好戏，则是靠人人一同的勉力了。
IE7改善了良多的器材，“更丰厚的选择符撑持”只是个中对照刺眼的一颗罢了。关于其他的，我将在后续的《IE7的web尺度之道》系列文章中持续和人人一同切磋，还请列位伴侣今后多多指教。
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 00:10:25
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜