`

XHTML+CSS的基础知识学习(一)

阅读更多

一、xhtml css基础知识

 

(1)文档类型
当我们用dreamweaver新建一下html格式文档时,查看源代码,会发现代码最上部有如下这句话:

<!--ubb-begin-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 

这句话标明本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML的语法。许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。因为这种DTD还允许我们使用表现层的标识、元素和属性,也比较容易通过W3C的代码校验。

(2)语言编码

接下来我们还会发现这样一句话:

 

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

 

它表式文档的语言编码,这里的gb2312告诉浏览器,本文档采用简体中文编码;还有一种常用的编码是UTF-8编码,它是国际通用的编码。不管我们采用哪种编码,有一点就是包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。

标准的XML文档语言定义:

 

<?xml version=”1.0″ encoding=” utf-8″?>

 

针对老版本的浏览器的语言定义:

 

<meta http-equiv=”Content-Language” content=” utf-8″ />

 

(3)html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束,有些单一的标签在本身的结尾打上/来结束,这是xhtml代码编写的规范。

 

 成对的标签:

 

<head>{...}</head> 
<body>{...}</body> 
<div>{...}</div> 
<span>{...}</span> 
<p>{...}</p> 
...... 

 

单一的标签:

 

<img src="" /> 
<br /> 
....... 

 

还需说明一点的是按xhtml规范,标签必须用小写。

 

(4)css样式

加载css样式有以下四种
a.外部样式

 

<link href="layout.css" rel="stylesheet" type="text/css" /> 

这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接。它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式。

 

b.内部样式

 

<style> 
h2 { color:#f00;} 
</style> 

 

这种形式是内部样式表,它是以<style>和</style>结尾,写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

 

   c.行内样式

 

<p style="font-size:18px;">行内样式</p>

 这种在标签内以style标记的为行内样式,内部样式只针对标签内的元素有效,因其没有和内容相分离,所以不建议使用

 

   d.导入样式

 

@import url("/css/global.css"); 

 

链接样式是以@import url标记所链接的外部样式表,它一般常用在另一个样式表内部。如layout.css为主页所用样式,那么我们可以把全局都需要用的公共样式放到一个global.css的文件中,然后在layout.css中以@import url("/css/global.css")的形式链接全局样式,这样就使代码达到很好的重用性

 

(5)css优先级

a. id优先级高于class
b. 后面的样式覆盖前面的
c. 指定的高于继承
d. 行内样式高于内部或外部样式
总结:单一的(id)高于共用的(class),有指定的用指定的,无指定则继承离它最近的

 

(6)css盒模型组成

学习web标准,首先要弄懂的就是这个盒模型,这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁,表现和内容相分离,维护方便,能兼容更多的浏览器,比如PDA设备也能正常浏览。
那么它为什么叫盒子呢?先说说我们在网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。


 

我们可以把它想像成现实中上方开口的盒子,然后从正上往下俯视,边框相当于盒子的厚度,内容相对于盒子中所装物体的空间,而填充呢,相当于为防震而在盒子内填充的泡沫,边界呢相当于在这个盒子周围要留出一定的空间,方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所见的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成,这是许多朋友容易搞混的地方。
这里的边界我们也称之为:外边距、外补丁;填充也叫:内边距、内补丁。

二、如何开始学习web标准?
1)有HTML和CSS基础
学习本系列教程前,要求您有一定的html和css基础,制作过网页,会用表格进行网页布局,这样学习起来才会很轻松。如果您对这些还不懂,建议先学习这些知识,然后再来学习本教程。
2)转变观念
在以前我们制作网站时,总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的,相反最终用户在访问网页时的体验才是优先要考虑的。一个由div+css布局且结构良好的页面可以通过css定义成任何外观,在任何网络设备上(包括手机、PDA和计算机)上以任何外观表现出来,而且用div+css布局构建的网页以够简化代码,加快显示速度。
所以要想学好div+css,首先要转变观念,需要抛弃传统的表格(Table)布局方式,采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。
3)多动手、多动脑
这一期就先说到这了。
PS:有些时候有些同学提问的一些问题太没水平了,稍微动下脑筋就明白了,或者自己动手一试就知道了,但他就懒得试。举个简单的例子,拿浏览器兼容来说吧,你写个样式之后,在IE和火狐分别打开看一下不就明白了,但就是不去做。
所以在这里告诫大家,一定要多动手、多动脑,不要怕麻烦。另外在学习完一节教程后,一定要自己做一遍实例,这样能更快掌握。

 

本文转自:http://bbs.chinaz.com/Design/thread-1609883-1-1.html

  • 大小: 10.8 KB
分享到:
评论

相关推荐

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

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

    xHTML+CSS+Dreamweaver CS3标准网站构建实例详解

    接着,会介绍CSS的基础知识,包括选择器、属性和值,以及如何将CSS应用到xHTML文档中。随着章节的深入,读者会接触到更高级的主题,如浮动布局、定位、响应式设计,以及Dreamweaver的高级功能。 通过实践每一个实例...

    XHTML+CSS标准化网页开发.rar_XHTML+CSS标准化网页开发_网页界面开发

    学习和掌握XHTML+CSS标准化网页开发,不仅可以提升网页的视觉效果,还能为后续的JavaScript交互和响应式设计打下坚实的基础,是每个前端开发者必备的技能之一。通过深入理解和实践,开发者可以创造出更符合用户需求...

    XHTML+CSS页面布局学习笔记

    XHTML+CSS 页面布局学习笔记 ...这篇学习笔记为我们提供了一个系统的 XHTML 和 CSS 学习指南,涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型和块状元素等内容,对于页面布局设计和开发非常有价值。

    xhtml +css网站模板

    《XHTML+CSS网站模板:构建现代网页设计的...通过深入研究和实践,不仅可以掌握XHTML和CSS的基础知识,还能提升网页设计和开发的综合能力。所以,如果你对网站制作充满热情,那么这个"网页模板"无疑是一个绝佳的起点。

    XHTML+CSS+DREAMWEAVER CS3

    《XHTML+CSS+DREAMWEAVER CS3》是一份综合性的学习资源,主要针对网页设计初学者和专业人士,旨在通过实例代码帮助用户掌握XHTML、CSS以及Dreamweaver CS3这三种核心技术。这份资源深入浅出地阐述了如何构建高效、...

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

    《Dreamweaver8系列DIV+CSS教程XHTML_CSS基础知识》是一个综合性的教学资源,主要针对网页设计初学者,旨在帮助他们掌握XHTML和CSS的基础知识,以及如何在Adobe Dreamweaver 8环境下进行实践操作。这个教程涵盖了...

    两天驾驭DIV+CSS.pdf

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

    XHTML+CSS(DIV+CSS)入门布局教程.pdf

    首先,了解基本的HTML知识是必要的,因为XHTML是基于HTML的,掌握HTML的基础标签和语法规则能更好地理解和编写XHTML文档。 在进行网页布局时,通常会使用到术语如CSS、HTML、DHTML和XHTML。CSS用于控制页面的样式,...

    HTML+XHTML+CSS2_基础教程_PDF文件

    它是网页内容的结构化...通过这个“HTML+XHTML+CSS2_基础教程”,初学者将能够系统地学习前端开发的基础知识,逐步掌握创建静态网页的技能。这份PDF文件对于想要踏入前端开发领域的学习者来说,无疑是一份宝贵的资源。

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

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

    div+css网页布局入门+XHTML与CSS基础

    本教程将引导你入门`div+css`网页布局,并深入理解`XHTML`与`CSS`的基础知识。 首先,我们来了解一下`div`元素。`div`(Division)是HTML中的一个块级元素,用于组织和分隔页面内容。通过使用`div`,我们可以创建...

    很可爱的两行两列布局XHTML+CSS模板

    一、XHTML与CSS基础 XHTML是一种更严格、更纯净的HTML版本,它增强了HTML的语义性,使得网页结构更加清晰。CSS则负责控制网页的样式,如颜色、字体、布局等,实现了表现与内容的分离,提高了代码的可维护性和可重用...

    50个经典XHTML+CSS模版

    本资源包"50个经典XHTML+CSS模版"为学习者提供了一个丰富的实践平台,旨在帮助初学者快速理解和掌握这两项技术的运用,同时也为经验丰富的设计师提供了灵感来源。 XHTML是一种增强了HTML(HyperText Markup ...

    两天学会网页布局(Xhtml+Css)

    综上所述,从基础知识到实战课程再到实用技巧,`xHTML+CSS`布局的学习是一个逐步深入的过程。掌握这些核心知识点不仅能帮助开发者高效地完成网页设计任务,还能进一步提升网站的整体质量和用户体验。

    html+xhtml+css

    在这个压缩包中的“网页制作大全-html标签大全-CSS详解.chm”文件,很可能就是这样一个集合了HTML、XHTML、CSS详细信息的综合教程,对于学习和查阅相关知识非常方便。 总之,HTML、XHTML和CSS是构建现代网页不可...

    DIV+CSS入门教程

    标题中的"DIV+CSS入门教程"指的是学习使用HTML中的DIV元素配合CSS(层叠样式表)进行网页布局的基础教程,适合初学者。通常,这种布局方式被称为“Div+CSS布局”,但实际上是不准确的术语。 在描述中提到,"DIV+CSS...

    div+css网页布局学习

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

Global site tag (gtag.js) - Google Analytics