XHTML CSS基础知识

一、xhtml css基础知识
首先说一下我们这节课的知识点

1、文档类型
2、语言编码
3、html标签
4、css样式
5、css优先级
6、css盒模型组成
1）文档类型
当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：

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

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码
接下来我们还会发现这样一句话：

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

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

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

成对的标签：

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

单一的标签：

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

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

4）css样式
加载css样式有以下四种

外部样式
内部样式
行内样式
导入样式
<link href="layout.css" rel="stylesheet" type="text/css" />

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

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

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

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

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

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

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

5）css优先级
id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的
6）css盒模型组成
css盒模型是本节教程的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

web标准(复习)--1的更多相关文章

  1. web标准(复习)--6 html列表

    今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序 ...

  2. web标准(复习)--8

    今天我们开始学习下拉及多级弹出菜单,包含以下内容和知识点: 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一.带下拉子菜单的导航菜单下拉菜单在一些企业网站应用尤为广泛 ...

  3. web标准(复习)--2 列布局

    今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分, ...

  4. web标准(复习)--7 横向导航菜单

    今天我们开始学习html列表,包含以下内容和知识点: 横向列表菜单 用图片美化的横向导航 css Sprites 一.横向列表菜单前边学习过纵向导航菜单,又学习了float属性,那么要实现横向导航菜单 ...

  5. web标准(复习)--5 超链接伪类

    今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...

  6. web标准(复习)--4 纵向导航菜单及二级弹出菜单

    今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...

  7. web标准(复习)--3 二列和三列布局

    今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三 ...

  8. web标准之道——笔记

    字体设置 sans和sans-serif为通用字体,具体哪个字体被最终应用由浏览器决定,通用字体只有在其他字体都无效时才会被当作代替方案.通用字体应该放在最后面 sans衬线字体 容易阅读,一般使用在 ...

  9. 【转载】跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    跟随 Web 标准探究DOM -- Node 与 Element 的遍历 这个是 Joyee 2014年更新的,可能是转战github缘故,一年多没有跟新了.这篇感觉还挺全面,就转载过来,如以前文章一 ...

随机推荐

  1. 解决VS2013中“This function or variable may be unsafe”的问题

    1.在VS2013中编译代码时出现如上错误信息,下面就介绍下如何解决This function or variable may be unsafe的问题. 2.用VS2013打开出现错误的代码文件 3 ...

  2. 怎么看时序图--nand flash的读操作详解（转载）

    出处:http://blog.chinaunix.net/uid-28852942-id-3992727.html这篇文章不是介绍 nand flash的物理结构和关于nand flash的一些基本知 ...

  3. restful-----------------------------接口设计方式（一种风格）

    http动词: GET(SELECT):从服务器取出资源(一项或者多项) POST(CREATE):在服务器创建一个资源 PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)完整更新 ...

  4. ThreadLocal<T>类

    ThreadLocal<T>类                                        -------每个线程有仅拥有一个T对象                   ...

  5. hdu 4856 Tunnels

    http://acm.hdu.edu.cn/showproblem.php?pid=4856 这道题就是搜索BFS+状压dp,把所经过的隧道的状态用二进制表示,然后dp就行.bfs求出每两个隧道的最短 ...

  6. RAILS ON

    我是按照下面这个URL来轻快安装的. http://lxiaodao.iteye.com/blog/1579992 (1)RVM官方网站应该是改版过一次, 使用 curl -L https://get ...

  7. 使用Userlock监控用户访问 增强学校网络安全

    随着网络技术的不断进步,一方面,拥有广泛教学资源的各大大中院校纷纷升级校园网络技术,保护学校的网络安全.另一方面,网络安全面临的威胁也层出不穷.面对来自网络内外的安全威胁,负责中小学.大学院校网络安全 ...

  8. bzoj2741【FOTILE模拟赛】L

    http://www.lydsy.com/JudgeOnline/problem.php?id=2741 分块或可持久化trie 可以先看看这个:高斯消元解XOR方程组 分块做法: 我们先求出前i个数 ...

  9. 通过JS触发TextBox的ontextchanged事件，并获取TextBox所在GridView的那一行

    protected void txtInsNum_TextChanged(object sender, EventArgs e) { TextBox t = (TextBox)sender; Grid ...

  10. cf581B Luxurious Houses

    The capital of Berland has n multifloor buildings. The architect who built up the capital was very c ...