CSS+DIV入门学习精华总结

需积分: 6 141 浏览量更新于2024-07-31 收藏 2.67MB PDF 举报

"这是一份关于CSS+DIV学习的总结笔记，内容涵盖了CSS的基本概念、标准发展以及其对比传统HTML的优势。" 在Web开发中，CSS（层叠样式表）和DIV是构建现代网页布局不可或缺的技术。CSS是1996年由万维网联盟（W3C）审核并通过的标准，其目的是为了美化网页样式，让设计者能够更灵活地控制页面布局，同时将内容（HTML）与表现（CSS）分离。这种分离使得网页更具可维护性和可扩展性。 CSS1.0规范在1996年12月发布，随后在1998年5月发布了CSS2.0规范。目前，CSS的发展已经进入2.1版和3.0版。尽管W3C的规范不具备强制执行力，但CSS已成为业界标准，被广泛应用于网页设计。然而，不同浏览器对CSS的支持程度不一，这给设计师带来了一定挑战。传统的HTML在没有CSS时，对于页面样式的控制相对繁琐。例如，如果要改变一个<h2>标题的颜色和字体，需要使用<font>标签，如示例所示。这种方式在处理大量内容时会变得极其复杂，因为每个元素都需要单独设置样式。此外，这种内联样式的方式还可能导致代码冗余，不利于页面维护。对比之下，CSS允许设计者在一个中央样式表中定义所有元素的样式，然后通过类选择器、ID选择器或元素选择器应用到页面上的特定部分。这样，即使有多个相同的标题或段落，只需一次定义即可统一设置样式，大大提高了工作效率。例如： ```css h2 { color: #0000ff; font-family: "幼圆"; } p { /* 正文内容的样式 */ } ``` 在HTML中，只需简单引用这些样式： ```html <!DOCTYPE html> <html> <head> <title>演示</title> <style> /* CSS样式放在这里 */ </style> </head> <body> <h2>这是标题文本</h2> <p>这里是正文内容</p> <h2>这是标题文本</h2> <p>这里是正文内容</p> <h2>这是标题文本</h2> <p>这里是正文内容</p> </body> </html> ``` 这样，整个页面的样式管理就变得更加有序和高效。通过CSS，还可以实现更复杂的布局，如浮动元素、定位、响应式设计等，以及更高级的特效，如过渡、动画和伪类等。 CSS+DIV的学习对于理解Web前端开发至关重要。这份学习总结笔记详细介绍了CSS的核心概念，有助于初学者快速入门，掌握网页设计的新高度。

WEB 开发 www.onlyfed.com

第 11 页共 64 页

<html>

<head>

<style>

#bold{

font-weight:bold;

}

#green{

font-size:30px;

color:#009900;

}

</style>

</head>

<body>

</body>

</html>

第二行与第三行都显示了 CSS 的方案，ID 选择器也可以用于多个标签，但将 ID 选择器用于多个标签是错误的。

因为每个标签定义的 id 不只是 CSS 可以调用，javascript 等其它脚本也可以调用。如果一个 html 中有两个相同的

id 的标签，那么将会导致 javascript 在查找 id 时出错，例如函数 getElementById()。

正因为 javascript 等脚本语言也能调用 html 中设置的 id，因此 ID 选择器一直被广泛的使用。网站建设者在编写

CSS 代码时，应该养成良好的编写习惯，一个 id 只能赋予一个 html 标签。

P.S.：同一个 html 标签不能同时应用多个 id 选择器。

用 id 选择器做一个简单的页面布局

<body>

</div>

</body>

CSS 文档为：

#container{

width:768px;

border:1px solid green;

margin:auto;

background:url(../img/girl.jpg) no-repeat center center;

}

#header{

height:60px;

background:red;

}

#mid{

http://www.foxitsoftware.com For evaluation only.

剩余63页未读，继续阅读

mj20050749

粉丝: 2
资源: 21

CSS+DIV入门学习精华总结

精通CSS+DIV网页布局：从基础到实战

CSS+DIV网页布局实战：从入门到精通

CSS+DIV网页样式与布局详解：176页PDF教程

CSS+DIV说课稿.pdf

css+div代码讲解.pdf

CSS+DIV布局案例.pdf

HTML+CSS+Div测试习题.pdf

php+MYSQL+HTML+DIV+CSS.pdf

HTML+ css+javascript复习题.pdf

详细的HTML+CSS+JavaScript网页设计.pdf

最新资源