`
- 浏览:
39387 次
- 性别:
- 来自:
广州
-
- 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;
- position:absolute绝对定位,默认参照浏览器的左上角,配合top、right、bottom、left(TRBL)进行定位。
- position:relative相对定位,是默认参照父级的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。
- 总结:如果用定位来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding属性的影响,也可以用relative,计算时不要忘记padding的值。
- CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法,是一种方法。
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
DIV+CSS教程——第一天XHTML_CSS基础知识
接着,会介绍CSS的基础知识,包括选择器、属性和值,以及如何将CSS应用到xHTML文档中。随着章节的深入,读者会接触到更高级的主题,如浮动布局、定位、响应式设计,以及Dreamweaver的高级功能。 通过实践每一个实例...
在网页开发领域,XHTML(Extensible Hypertext Markup Language)与CSS(Cascading Style Sheets)是两个至关重要的技术,它们共同构成了网页的标准化开发基础。这个“XHTML+CSS标准化网页开发”压缩包文件,显然是...
《XHTML+CSS网站模板:构建现代网页设计的...通过深入研究和实践,不仅可以掌握XHTML和CSS的基础知识,还能提升网页设计和开发的综合能力。所以,如果你对网站制作充满热情,那么这个"网页模板"无疑是一个绝佳的起点。
基础篇 1.1 必须知道的基础知识 知识一 DIV+CSS的叫法是不准确的 标准叫法是xHTML+CSS 知识二两大误区 误区一用了Table就不标准。误区二DIV标签越多越好 Table是为了存储数据DIV是为了架设...
首先,了解基本的HTML知识是必要的,因为XHTML是基于HTML的,掌握HTML的基础标签和语法规则能更好地理解和编写XHTML文档。 在进行网页布局时,通常会使用到术语如CSS、HTML、DHTML和XHTML。CSS用于控制页面的样式,...
Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识.pdf
通过XHTML,你可以创建结构化的网页内容,为CSS样式化提供基础。 接着,CSS(Cascading Style Sheets)是用于控制网页样式的语言,使网页的布局、颜色、字体、大小等视觉表现得以独立于内容。CSS允许开发者将样式...
它是网页内容的结构化...通过这个“HTML+XHTML+CSS2_基础教程”,初学者将能够系统地学习前端开发的基础知识,逐步掌握创建静态网页的技能。这份PDF文件对于想要踏入前端开发领域的学习者来说,无疑是一份宝贵的资源。
《Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识》是一个综合性的教学资源,主要针对网页设计初学者,旨在帮助他们掌握XHTML和CSS的基础知识,以及如何在Adobe Dreamweaver 8环境下进行实践操作。这个教程涵盖了...
本教程将引导你入门`div+css`网页布局,并深入理解`XHTML`与`CSS`的基础知识。 首先,我们来了解一下`div`元素。`div`(Division)是HTML中的一个块级元素,用于组织和分隔页面内容。通过使用`div`,我们可以创建...
一、XHTML与CSS基础 XHTML是一种更严格、更纯净的HTML版本,它增强了HTML的语义性,使得网页结构更加清晰。CSS则负责控制网页的样式,如颜色、字体、布局等,实现了表现与内容的分离,提高了代码的可维护性和可重用...
在网页设计领域,XHTML(Extensible HyperText Markup Language)和CSS(Cascading Style Sheets)是两大不可或缺的基础技术。本资源包"50个经典XHTML+CSS模版"为学习者提供了一个丰富的实践平台,旨在帮助初学者...
综上所述,从基础知识到实战课程再到实用技巧,`xHTML+CSS`布局的学习是一个逐步深入的过程。掌握这些核心知识点不仅能帮助开发者高效地完成网页设计任务,还能进一步提升网站的整体质量和用户体验。
这篇学习笔记主要讲解了 XHTML 和 CSS 在页面布局中的应用,涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型、块状元素和内联元素等内容。 一、基础知识 1. 什么是 W3C? W3C 是 World Wide Web Consortium ...
标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...
在这个压缩包中的“网页制作大全-html标签大全-CSS详解.chm”文件,很可能就是这样一个集合了HTML、XHTML、CSS详细信息的综合教程,对于学习和查阅相关知识非常方便。 总之,HTML、XHTML和CSS是构建现代网页不可...
【网页制作技术——深入理解XHTML+CSS】 在网页制作领域,"DIV+CSS"的表述经常被提及,但实际上这是一个不准确的术语。...只有深入理解这些基础知识,才能在实际工作中游刃有余,创造出符合现代网页设计要求的作品。