`

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是解决页面不能很好兼容多种浏览器的技巧方法,是一种方法。
分享到:
评论

相关推荐

    DIV+CSS教程——第一天XHTML_CSS基础知识

    DIV+CSS教程——第一天XHTML_CSS基础知识

    Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.zip

    Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.zip

    两天驾驭DIV+CSS.pdf

    基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...

    Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.pdf

    Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.pdf

    十天学会DIV+CSS(WEB标准)

    第一天 XHTML CSS基础知识 第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS...

    div+css十天学会

    第一天 XHTML CSS基础知识 第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS表单设计...

    div+css网页布局学习

    二、CSS基础知识 * CSS是层叠样式表的简称,用于控制网页的样式和布局 * CSS的主要特点是将样式和结构分离,提高了网页的可维护性和可读性 * CSS的基本选择器包括标签选择器、类选择器、ID选择器等 三、Div标签的...

    WEB前端技术从零学起 PPT格式 大学教授课件

    JSP程序设计教程 第一章 Web开发设计概述 第二章 HTML基础知识 ... 第四章 XHTML+CSS基础知识 第五章 XHTML+CSS实例训练 第六章 JS+DOM基础知识 第七章 JS+DOM实例训练 第八章 JSP基础知识

    XHTMLCSS基础知识.pdf

    XHTMLCSS基础知识.pdf

    十天学会DIV+CSS(WEB标准).CHM

    第一天 XHTML CSS基础知识 第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS...

    XHTML CSS基础知识

    学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局。如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂。

    div+css网页标准布局实例教程

    一、XHTML CSS 基础知识 1. 文档类型 在 Dreamweaver 中新建 HTML 格式文档时,代码最上部会出现一句声明文档类型的语句:`&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    第一天_XHTML_CSS基础知识

    这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。许多朋友在制作页面时,往往喜欢把这句删除掉...

    Div+css 手把手教你

    在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好...

    十天学会DIV+CSS(WEB标准) CHM格式文件

    第十天 div+css网页标准布局实例教程(二) 第十天 div+css网页标准布局实例教程(一) 第九天 CSS表单设计 第八天 下拉及多级弹出菜单 第七天 横向导航菜单 ...第五天 超链接伪类 ...第一天 XHTML CSS基础知识

    Div+CSS经典速成教程.pdf

    在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好...

    Div+CSS布局入门教程

    在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思,构思好...

    css基础知识word版

    CSS初级教程包括:CSS语法,CSS颜色,CSS文本与CSS字体,CSS边框,CSS列表等基础知识. CSS高级教程包括:CSS选择符,CSS相关特性,CSS盒模式,标准网页设计与页面排版,CSS伪类与伪元素等. 通过梦之都的CSS教程,你将学会怎样...

Global site tag (gtag.js) - Google Analytics