微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

HTML5--link、selector、!important

8月10日

<link rel="shortcut icon" href="图片位置" type="">:显示浏览器标签上的图标

图片

.ico,type="image/vnd.microsoft.icon"

.gif,type="image/gif"

.png,type="imgae/png"

在测试中ico/gif/png可以在chrome显示,而IE9只能显示ico,IE11能显示三种。

在rel中,可以写rel=“icon”,icon和shortcut icon的区别:

为了保证发ficonde出现,shortcut icon字符串会被大多数遵循标准的浏览器识别为icon(而shortcut挥别忽略),写这个是为了让IE也能识别,因为IE会将shortcut icon作为一个单独的名称。(so只是为了IE)

例子:

<link rel="shortcut icon" href=".icon" type="image/vnd.microsoft.icon">

<link rel="shortcut icon" href=".gif" type="image/gif">(这一行作为备用的显示

在浏览器中会优先显示icon的图片。\


!important的应用:

认情况下,CSS规则按级层覆盖,例如在.CSS文件中的定义可以被html文件中<style type="text/css"></style>里的定义覆盖,反之不行;书写在下面的定义可以覆盖写在上面的定义,反之不行。 然而,对覆盖平衡而言,加上一个“!important”就优先于正常的CSS规则。

ie7~ie11,Firefox,chrome高端浏览器可以识别!important属性,但ie6不能识别。

例子

a{

border:20px solid #fff !important;

border:20px solid #000;

}

在该样式中,浏览器优先执行!important这一条。显示为#fff。但在IE6中不能显示。只有重写才可以

例子:

a{

20px solid #fff !important

}

a{20px solid #000 

}这样IE6才会显示第一条。



css选择器

种类:7种

html选择器:html标签。类选择器:.class。  id选择器:#id。关联选择器:html.class 或者是html#id

组合选择器:html,.class,#id(在组合选择器中,必须用号隔开)

伪选择器:a.hover{}只有a和p标签才有伪选择器。

选择器之间的优先级别:

html#id>html.class>html html


伪元素的介绍:

a.link{}未访问链接

a.visited{}已访问链接

a.hover{}鼠标移动到链接

a.active{}选定的链接

注意的问题:a:hover必须放在a:link和a:visited之后才有效;a:active必须放在a:hover之后才有效。

P标签的伪元素

1、:first-letter:选择p元素的首字母并设置样式。2、:first-line:选择p的首行并设置样式

3、:before:在每个p元素之间插入内容。           4、:after:在每个p元素之后插入内容

暂时写这几个。。。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。