HTML和CSS中容易忽视的一些东西

一、选择器的效率

  • id选择器(#myid)
  • 类选择器(.myclassname)
  • 标签选择器(div,h1,p)
  • 相邻选择器(h1+p)
  • 子选择器(ul< li)
  • 后代选择器(li a)
  • 通配符选择器(*)
  • 属性选择器(a[rel="external"])

伪类选择器(a:hover,li:nth-child)
由上至下,效率递减!

二、选择器的优先级
选择器的优先级是用数值表示的,
下面是基本项的对应值
element style = 1000
#id = 100
.classname = 10
tag = 1

对于符合的情况则使用值的相加,例如
p .classname 其对应的数值为1+10=11。所以在做优先级比较的时候,使用11去和其他的样式优先级比较,如果大于其他的则渲染,覆盖原样式,否则不渲染。

三、浏览器的样式渲染机制
1、从上到下
浏览器的样式渲染,是从上到下的(至少ie如此),所以CSS中,对于类似样式的覆盖,还有个就近原则。它就是依据此的。
2、比较优先级数值,觉得是否渲染
在从上到下渲染过程中,比较样式优先级。然后选择是否渲染。就这样在不停的覆盖中,最终形成最终正确的样式。

以上两点是同时起作用的,不分谁先谁后。

四、浏览器的选择器解析机制
浏览器读取选择器的顺序是由右到左的。
比如:

#div p .classname

浏览器是先选出所有的classname,然后看是不是p,把是p的取出,然后最后看看这个p集合,里面是不是有在一个id=div的标签之下的,有的话,则渲染对应的这个。

、Link 标签的media属性
这个属性常常被人忽略,但是在设备多样化的今天,又有了它的用武之地!

<link media="screen" />

样式表内的写法:

@media print{
     #header {border:1px solid #000}
}

相关链接:http://www.w3school.com.cn/tags/att_link_media.asp

六、HTML中head相对于浏览器的角色
Q:http中的header和页面上的head有什么关系?
A:其实有点关系,
HTML中的head和HTTP中的header的都会对浏览器形成影响,但是HTML的head更大的是做HTTP header的补充。一般来说HTTP header主要传送些服务器的信息和要求。但是对于像Link之类的,这种就和HTTP协议无关了,但是他们的加载,又会影响到显示效果,所以为了弥补这些不足,所以就有了head。然后,浏览器就会先解析head的内容,再解析body的内容,所以Link一般写在body里面。又因为head的控制项是后于HTTP header的,所以,在head中写的内容会重置HTTP header的一些要求。比如Content-Type:text/html;charset=utf-8;,这时,浏览器会根据这个来决定使用uft8,但是如果你在head中,写了:

<meta http-equiv=Content-Type content="text/html;charset=gbk">

注意这里的charset是gbk,这样浏览器就会用gbk显示了。
对于HTML的Head来说,他有如下常用标签,
<base><link><meta><script><style>, 以及 <title>
这里着重说下meta标签,
其有三个主要属性,分别为name,http-equiv;content,其中content是必有属性,主要是信息的内容。
对于name和http-equiv是作为content的名称,与content形成键值对。name和http-equiv不会同时出现。并有不同的语义。
name:利用name属性和content组成键值对,用来保存一些对读者有用的信息,主要是开发者自己随意使用的。在SEO主要认keywords,这个有点类似约定俗成。因为html和xhtml都没有定义过。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv:顾名思义,是用来发送新增或覆写http的header信息的,会在实际呈现body内容前,告诉浏览器。往往和http的header有很强对应关系。
例如:

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

相应的发给浏览器的header就是:

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2007

七、通用选择器的效率是ok的。

* { color : red; }

八、伪类支持最好的a标签,所以可以针对a使用伪类,其他的就算了。

a { color: blue; }		/* 未访问的链接*/
a:link { color: blue; }	/* 未访问的链接*/
a:visited { color: purple; }	 /* 已访问的链接*/
a:hover { color: red; }	 /* 鼠标悬停在链接上*/
a:active { color: yellow; }	 /* 鼠标点击链接时*/

九、使用rgb(x,x,x)来标记颜色
有时候不想转换成#FF6600这样格式的色值时,可以采用rgb(x,x,x)的形式。
例如:

.classname{
     color:"rgb(128,128,128)";
}

但是要注意,rgb外面要有引号

十、padding、margin等的顺时针规律
例如:

padding:10px 5px 15px 20px;

这里对应的分别是上10px,右5px,下15px,左20px
这里是顺时针规律,同时,上和右、下和左,这两个组可以合并。变成:
上下和右左,对于

padding:10px 5px;

其实就是:上下 10px ,右左 5px。
对于下面的情况是怎么样的?思考下。

padding:10px 5px 15px;

答案:上10  右5 下15  ,左找到右上了(合并),所以左为5

十一、display:none和visibility:hidden的区别
前者是脱离文档流的,后者是保留在文档流,两者都是不显示。直观上来说,前者从显示上看不到,以为不存在。后者看上去像个空白区域。

十二、常见的CSS hack

#test{
  color:red;		/* 所有浏览器都支持 */
  color:red !important; 	/* Firefox、IE7+支持 */
  _color:red; 			/* IE6支持 */
  *color:red; 			/* IE6、IE7支持 */
  *+color:red;		 /* IE7支持 */
  color:red\0; 		/* IE8支持 */
  color:red\9; 		/* IE6、IE7、IE8 、IE9支持 */
}

十三、表示字体尺寸的多种形式

%
In,cm,mm
em,ex
pt,pc
px

十四、普通流、浮动和定位的区别
普通流:根据标签的特性(Block还是Inline),进行从上到下,从左到右的排列。

浮动:光有普通流,无法有效进行布局,所以有了float,将block型的标签,变为Inline的。整体还是依照普通流的规律的。这里只是改变了标签的属性。

定位:absolute和fixed定位是将标签脱离文档流,也即不依照普通流走,感觉上像游离在之外的。relative是保留在文档流中的。并且会占用未偏移时候的位置。偏移后的位置,感觉像浮动出来的。static是默认的position属性,不指定position时,就是这个。

fixed和absolute的差别在于前者是基于窗体偏移的,后者是基于上一级的带有postion属性(非static)的容器偏移的。

这里,详细说明下relative和absolute的。两者的差别在于,偏移的根据。前者是只原本在文档流中的位置(relative是不会脱离文档流的),这里你可以理解为当position为relative的时候,如果left,right为0时候,就和static的情况一样,同时即便偏移了,原本left,right为0的位置,也会留出元素的位置(占位,未脱离文档流),而真正的偏移图像,则是看似是浮在其他文本上的。 而后者是根据其往父级找,找到的第一个含position属性(非static)的那个元素偏移的。同时,它是不属于文档流中的,不会有占位置情况。

具体的使用可参见:http://www.w3school.com.cn/css/css_positioning.asp

 





 » 订阅本站:RSS订阅

发表评论

您也可以使用微博账号登陆

无觅相关文章插件,快速提升流量