XHTML+CSS页面布局学习笔记资源-CSDN文库

5星 · 超过95%的资源需积分: 10 196 浏览量 2012-07-19 11:23:42 上传评论收藏 284KB DOCX 举报

XHTML+CSS 页面布局学习笔记这篇学习笔记主要讲解了 XHTML 和 CSS 在页面布局中的应用，涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型、块状元素和内联元素等内容。一、基础知识 1. 什么是 W3C？ W3C 是 World Wide Web Consortium 的缩写，中文是 W3C 组织或万维网联盟。 2. 什么是 W3C 标准？ W3C 标准并不是一个标准，而是一系列标准的集合，包含 3 部分标准：结构标准、表现标准和动作标准。结构标准是 XHTML，表现标准是 CSS，动作标准是 JavaScript。二、CSS 控制页面样式 CSS 控制页面样式有四种方式： 1. 行内样式：<p style="color:#f00; background:#ccc;font-size:12px;"></p> 2. 内嵌样式：<head><style type="text/css">body,div,a,img {font-size:12px}</style></head> 3. 链接样式：<link type="text/css" rel="stylesheet" href="style.css" /> 4. 导入样式：在 html 初始化的时候，采用 import 方式导入 CSS 样式表四种样式的优先级遵循就近原则，行内样式 > 内嵌样式 > 链接样式 > 导入样式。三、CSS 选择器 1. 标签选择器 2. ID 选择器 3. 类选择器 4. 通用选择器通用选择器有个特殊的用法，例如 `{margin:0; padding:0}`，是为了保证页面能兼容多种浏览器，要对 HTML 内的所有标签进行重置。四、盒子模型盒子模型是 CSS 中的一个重要概念，它是指一个 HTML 元素的样式是由 content area、padding、border 和 margin 四个部分组成的。五、块状元素和内联元素块状元素是指可以容纳其他元素的容器，例如 div 和 p，它们可以容纳内联元素和其他块状元素。块状元素排斥其他元素与其同一行，宽度和高度起作用。内联元素只能容纳文本和其他内联元素，例如 a，它允许其他内联元素与其同一行，但宽度和高度不起作用。六、实例实例中展示了如何使用 XHTML 和 CSS 构建一个简单的页面，包括 CSS 选择器、盒子模型和块状元素的应用。这篇学习笔记为我们提供了一个系统的 XHTML 和 CSS 学习指南，涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型和块状元素等内容，对于页面布局设计和开发非常有价值。

资源推荐

资源详情

资源评论

XHTML+CSS 页面布局学习笔记

一、基础知识

什么是 

平时我们说的  就是  的缩写，中文是  组织或万维

网联盟。

什么是  标准？

 标准并不是一个标准，而是一系列标准的集合，包含  部分标准：结构标准，表

现标准和动作标准。

结构标准 表现标准 动作标准 !"

 如何控制页面

# 如何控制页面样式，有几种方式？

行内样式：$!"%&'()*++,-.(),*"/(!0,'1$2!1

内嵌样式：在$31$231之间用$"%1$2"%1进行声明

$31

$"%"%!&'"0"2'1

%4 44.5*"/(!06

$2"%1

$231

链接样式：$-"%!&'"0"2'&'"%3"'3*&'"%'21

7导入样式：在 3" 初始化的时候，采用 !" 方式导入  样式表

8四种样式的优先级：【就近原则】行内样式1内嵌样式1链接样式1导入样式

# 选择器

标签选择器

9: 选择器

类选择器

7通用选择器此选择器有个特殊的用法

5.(+,!.(+6

就是为了保证页面能兼容多种浏览器，要对  内的所有标签进行重置，

会将下面的  代码加到  文件的顶端

为什么要这么用呢，因为每种浏览器都有自带的  文件，如果一个页面在

被浏览器加载后，如果发现没有  文件，那么浏览器会自动调用它本身的 

文件，但不同的浏览器自带的  文件又都不一样，对不同标签定义的样式不一

样，如果我们想要设计出的页面在不同的浏览中显示的效果一致。我们就需要对

3" 标签重置，就是上面的代码了，但这样也有不好的地方，因为 7+ 中

有 ;< 个标签，所以相当于我们在页面加载的时候，先要对着 ;< 个标签都加上

5.(+,!.(+6，在这里不建议这么做，因为 ;< 个标签需要重置的的标签是

少数，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签，如下：

=%4!4 45.(+,!.(+64用到哪些就写那些，这点也可以看作衡量页面重

构师制作页面水平的高低，以及是否专业的一个方面。

） 选择器命名

如下页面常用模块命名

剩余6页未读，继续阅读

内容反馈

未止H2O

2013-12-27

资源还不错，值得学习
csdn大号

2014-03-10

这个笔记不错,对学习html+css很有帮助!推荐下载!
ansfogel

2014-07-02

很不错,很细节,但是感觉内容有点老.

咚菰

粉丝: 0
资源: 2

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip