欢迎光临
我们一直在努力

html+css知识点回顾

W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:结构标准、表现标准和动作标准。与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。

当我们将一个成品的网页设计制作成一个静态页面的时候,就要符合前面两种标准,结构标准和表现标准,那么制作出来的页面就是标准页面,用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”!

我们常说的“DIV+CSS”其实是一种不准确的叫法,是国人给这种布局标准页面的方法起的名字,是对技术理解不够透彻导致的,而标准的叫法是什么呢?呵呵,没错,是xHTML+CSS!

css回顾

四种样式的优先级按照“就近原则”:行内样式 > 内嵌样式 > 链接样式 > 导入样式。

CSS选择器最基本的有四种:标签选择器、ID选择器、类选择器、通用选择器。

ID选择器:<p id=”one”> #one{….}
类选择器: class=”one” .one{….}
标签选择器:p{….}
通用选择器:*{margin:0; padding:0;}

通用选择器慎用
以上面代码为例,HTML4.01中有89个标签,所以相当于在页面加载CSS的时候,先对这89个标签都加上了{margin:0; padding:0;},在这里我不建议大家这么做,因为89个标签中需要重置的标签是很少数,没有必要将所有的标签都重置,用到哪些标签就定义哪些标签 如:
body,div,p,a,ul,li{margin:0; padding:0;}

css hack:
!important
用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。
height:960px !important;height:900px;
IE7/IE8/IE9/FireFox 执行960px(绝对优先级);;IE6对!important无视会执行900px。
*(星号)
IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况
height:960px;*height:900px;
IE8/IE9/FireFox不能识别附加有*的CSS属性语句,IE6/IE7可以识别附加有*的CSS属性语句.

首行文字缩进”text-indent:2em;”属性,只能加在块状元素上面,内联元素是不起作用的。

页面布局有两种方式:
1)浮动Float
IE6双倍边距BUG,满足下面3个条件才会出现这个BUG:
1)要为块状元素;
2)要左侧浮动;
3)要有左外边距(margin-left);
解决这个BUG很容易,只需要在相应的块状元素的CSS属性中加入“display:inline;”
2)定位Position
absolute(绝对定位)和 relative(相对定位)
absolute绝对定位:
(父级要设定Position属性)以父级左上角为原点进行定位,父级的padding对其根本没有影响。
position:relative相对定位
默认参照父级的原始点为原始点(不论父级有没有设置Position),当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。

html 回顾
盒子模型,是XHTML+CSS布局页面中的核心!盒子模型的四要素就出来了分别是:content(内容)、border(边框)、padding(内边距)、margin(外边距)。
HTML标签分成两种,块状元素和内联元素
块状元素
一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。
内联元素
内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”。(内联元素加上一个属性display:block,高宽设置才会起作用)

常见的块状元素与内联元素:http://www.w3cfuns.com/portal.php?mod=topic&quickforward=1&topicid=21

页面模块的常用命名
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
小技巧:tips

赞(0)
未经允许不得转载:衡水seo博客 » html+css知识点回顾
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

建站优化更专业 更敬业 更负责

建站报价联系我们