CSS标准注解详解(依据不一样访问器载入CSS)

日期:2021-03-06 类型:科技新闻 

关键词:小游戏源代码,互动小游戏微信,自制小游戏,html5游戏,制作游戏大概多少钱

因为访问器版本号的不一样,对CSS里一些元素的解释也不1样,对于访问器版本号不一样而挑选不一样CSS的编码,
实际上大家还能够运用标准注解的方式来做到相近的目地,甚么是标准注解,在此简易详细介绍1下,不过便是1些if分辨啦,呵呵,但这些分辨并不是在脚本制作里实行的,而是立即在html编码里实行的,下面来详细介绍1下应用方式吧。


拷贝编码
编码以下:

<!--[if XXX]>
这里是一切正常的html编码
<![endif]–>

这里XXX是1些特殊的东东,在此目录几个出来,详尽详细介绍各有的含意:


拷贝编码
编码以下:

<!–[if IE]> / 假如访问器是IE /
<!–[if IE 5]> / 假如访问器是IE 5 的版本号 /
<!–[if IE 6]> / 假如访问器是IE 6 的版本号 /
<!–[if IE 7]> / 假如访问器是IE 7 的版本号 /

上面是几个常见的分辨IE访问器版本号的英语的语法,下面再来详细介绍1下相对性较为少用的逻辑性分辨的主要参数:
有几个主要参数:lte,lt,gte,gt及!
各有的详尽解释以下:
lte:便是Less than or equal to的简写,也便是小于或等于的意思。
lt :便是Less than的简写,也便是小于的意思。
gte:便是Greater than or equal to的简写,也便是超过或等于的意思。
gt :便是Greater than的简写,也便是超过的意思。

例句:


拷贝编码
编码以下:

<!--[if gt IE 5.5]> / 假如IE版本号超过5.5 /
<!–[if lte IE 6]> / 假如IE版本号小于等于6 /
<!–[if !IE]> / 假如访问器并不是IE /

看到这里坚信大伙儿都早已搞清楚了标准注解的用法了,OK,那来举个事例吧:


拷贝编码
编码以下:

<!-- 默认设置先启用css.css款式表 -->
<link rel="stylesheet" type="text/css" xhref="css.css" />
<!--[if !IE]>
<!– 非IE下启用1.css款式表 –>
<link rel=”stylesheet” type=”text/css” xhref=”1.css” />
<![endif]–>
<!–[if lt IE 6]>
<!– 假如IE访问器版本号小于6,启用2.css款式表 –>
<link rel=”stylesheet” type=”text/css” xhref=”2.css” />
<![endif]–>

界定甚么访问器下显示信息甚么內容。
这个dropmenu(往下拉菜单)实体模型来自cssplay,使历经作者数次的科学研究和不断的检测才做出来的。我想那这个实体模型来实践活动1下标准注解的基本原理。
先看1个最简易的实体模型
下面是xhtm:


拷贝编码
编码以下:

<div class="menu">
<ul>
<li><a class="drop" xhref="../menu/index.html">DEMOS
<!--[if IE 7]><!–>
</a>
<!–<![endif]–>
<!–IE7时显示信息</a>标识–>
<table><tr><td>
<ul>
<li><a xhref=”../menu/zero_dollars.html” title=”The zero dollar ads page”>zero dollars advertising page</a></li>
<li><a xhref=”../menu/embed.html” title=”Wrapping text around images”>wrapping text around images</a></li>
<li><a xhref=”../menu/form.html” title=”Styling forms”>styled form</a></li>
<li><a xhref=”../menu/nodots.html” title=”Removing active/focus borders”>active focus</a></li>
<li><a class=”drop” xhref=”../menu/hover_click.html” title=”Hover/click with no active/focus borders”>hover/click with no borders</li>
<li class=”upone”><a xhref=”../menu/shadow_boxing.html” title=”Multi-position drop shadow”>shadow boxing</a></li>
<li><a xhref=”../menu/old_master.html” title=”Image Map for detailed information”>image map for detailed information</a></li>
<li><a xhref=”../menu/bodies.html” title=”fun with background images”>fun with background images</a></li>
<li><a xhref=”../menu/fade_scroll.html” title=”fade-out scrolling”>fade scrolling</a></li>
<li><a xhref=”../menu/em_images.html” title=”em size images compared”>em image sizes compared</a></li>
</ul>
</td></tr></table>
<!–[if lte IE 6]>
</a>
<![endif]–>
</li>
<!–IE6时显示信息</a>标识–>
</ul>
</div>

CSS


拷贝编码
编码以下:

<link rel="stylesheet" media="all" type="text/css" xhref="final_drop.css" />
<!--[if lte IE 6]>
<link rel=”stylesheet” media=”all” type=”text/css” xhref=”final_drop_ie.css” />
<![endif]–>

选用双款式,给ie和非ie各自界定款式,假如IE情况下,在final_drop.css基本上填补1个final_drop_ie.css
先看看非ie下的css是如何界定的


拷贝编码
编码以下:

.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;
background:#bd8d5e;
}
/*界定电脑鼠标滑过款式*/
.menu ul li:hover ul {
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}

在非IE下,看到电脑鼠标滑落伍候li包括的ul显示信息了,由于这些访问器适用li:hover用法
IE下的css


拷贝编码
编码以下:

.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
/*当电脑鼠标滑落伍li包括的ul显示信息*/
.menu ul li a:hover ul {
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
marg\in-top:1px;
}

承继上面的final_drop.css款式,无电脑鼠标時间情况下li包括的ul无法显示
由于


拷贝编码
编码以下:

<!--[if lte IE 6]>
</a>
<![endif]–>

上一篇:扬州vip会员手机软件 返回下一篇:没有了