xhtml+css基础知识

  • CSS控制HTML页面有4种方式:行内样式、内嵌样式、链接样式、导入样式。优先级就近原则。
  • CSS四种选择器:标签选择器、ID选择器、类选择器、通用选择器(*)。一个标签可以有多个选择器用空格分开,例如:<div class="one two three">...</div>。也可以ID和class一起用<div id="one" class="main"></div>
  • *{margin:0;padding:0;}放到CSS文件的最顶端对HTML内的所有标签进行重置。因为每种浏览器都有自带的CSS文件,如果一个页面在浏览器加载页面后,发现没CSS文件,浏览器就会自动调用它本身自带的CSS文件,但是不同的浏览器自带的CSS文件又都不一样,对不同标签定义的样式不一样,如果我们想让作出的页面能够在不同的浏览器显示出来的效果都是一样,那么我们就需要对HTML标签重置。但是这样有不好的地方,因为HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上{margin:0;padding:0;},但89个标签中需要重置的很少数,没必要都加上该样式,可把用到的标签重置,例如:body,div,p,a,ul,li,dl,dt,dd{margin:0;padding:0;}
  • 无论什么的选择器只要有公共的CSS代码,就可以用“选择器的集体声明”,起到精简代码的作用。不同的部分单独定义,保证风格统一,这也是优化CSS代码的一个方法。
  • 命名法:骆驼命名法:第一个单词首字母小写,其他单词首字母大写newName。帕斯卡命名法:所有单词首字母都大写NewName。匈牙利命名法:需要在名称前面加上一个或多个小写字母作为前缀new_newName。
  • 盒子模型四要素:content内容、border边框、padding内边距、margin外边距。
  • 块状元素:一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)和高度(heigth)起作用。常见块状元素为div和p.
  • 内联元素:只能容纳文本或其他内联元素,允许其他内联元素与其位于同一行,但宽和高不起作用,常见的元素有a span td img 
  •  内联元素转化为块级元素样式加上:display:block;IE下认为转为块状元素换行加上float:left同行效果一样
  •  块级元素转化为内联元素可以用浮动定位,样式加上: float:left ;解决IE6下双边距再加上display:inline;
  • 清除浮动:clear:both;
  • position:absolute绝对定位,默认参照浏览器的左上角,配合top、right、bottom、left(TRBL)进行定位。
  • position:relative相对定位,是默认参照父级的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
  • 总结:如果用定位来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding属性的影响,也可以用relative,计算时不要忘记padding的值。
  • CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法,是一种方法。

你可能感兴趣的:(XHTML)