CSS与HTML学习精要：外部样式表、类与ID的区别、span与div的应用

需积分: 15 107 浏览量更新于2024-11-19 1 收藏 53KB DOC 举报

"学习CSS与HTML主要内容的总结，适合初学者" 在Web开发领域，HTML（超文本标记语言）和CSS（层叠样式表）是构建网页布局和样式的基石。本文将概述这两个技术的关键概念，以帮助初学者快速入门。首先，HTML用于创建网页结构，它由一系列标签组成，每个标签都有特定的含义。在HTML头部分，有几个特殊标签用于引入外部资源，如样式表。例如，`<link>`标签允许我们链接到外部CSS文件，这样就能统一管理网站的外观： ```html <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> ``` CSS的使用不仅限于外部样式表，还可以内联样式（直接在HTML元素中使用`style`属性）和内部样式表（在`<head>`中的`<style>`标签内）。然而，外部样式表是最佳实践，因为它提供更好的代码组织和可维护性。 CSS类是用于选取和应用样式的工具，可以在HTML元素上使用`class`属性指定。例如，下面的代码将链接应用了名为"B3da"的样式： ```html <span class="B3da"><a href="./wz.action">文字作品</a></span> ``` 当HTML标记名与CSS类名相同时，不会自动套用类定义的格式，因为CSS选择器具有更高的优先级。必须明确地在CSS中引用该标记并定义样式。在HTML中，`id`和`class`都是用于选中元素的方式，但有显著区别。`id`是唯一的，每个页面只能有一个元素拥有相同的`id`，而`class`可以重复，允许多个元素共享同一类样式。例如： ```html <div id="uniqueElement"></div> <div class="commonClass"></div> <div class="commonClass"></div> ``` `div`和`span`是两种常见的HTML元素，它们主要用作布局工具。`div`通常用于大块内容的分组，可以设置属性或应用CSS样式；而`span`适用于行内元素，用于在文本中进行精确的样式控制。例如： ```html <div class="democrats"> <ul> <li>富兰克林·D·罗斯福</li> ... </ul> </div> ``` CSS的基本语法由选择符、属性和值构成，如下所示： ```css selector { property: value; } ``` 选择符可以是HTML元素、类（`.class_name`）、ID（`#id_name`）或其他更复杂的组合。例如，以下CSS规则将所有段落的文本颜色设为红色，对居中段落的文字进行居中： ```css p { color: red; } .centered { text-align: center; } ``` 此外，选择符组允许一次性定义多个选择符的共同样式，类选择符则让我们可以按需定义和复用样式。理解并熟练掌握HTML和CSS的基础知识是网页设计的第一步。通过学习这些概念，初学者能够创建基本的静态网页，并逐步进阶到更复杂的设计和交互。

仅有几个标签在 的头部分是合法的。它们是：

和 。

对  的使用。

使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。







对  类的使用。可以通过  的类名来使用如：!"

#$%文字作品

" 的标记名和  里面的类名一致的时候是否自动套用该类定义的格式？

& 的区别：

即某一个元素定义了 ，那么这个网页中其它的元素的  就不能定义成 ，而  则可以。

' 可以反复使用而 () 在一个页面中仅能被使用一次

*，+ 的作用域

+经常用来对多块  元素定义属性或者是 。

用来对一块  元素定义属性或者是 。

如：

+%

,

富兰克林-)-罗斯福

哈利-.-杜鲁门

下载后可阅读完整内容，剩余6页未读，立即下载

dzpdai

粉丝: 0
资源: 1

CSS与HTML学习精要：外部样式表、类与ID的区别、span与div的应用

HTML和CSS学习资料及项目源码大全

探索CSS和HTML的学习之旅

初学者必看：大一网页设计使用HTML和CSS技术教程

网页sheji-CSS初学总结

css详细资料，适合初学者学习

如何制作网页-初学者入门HTML+CSS

Html和css笔记，这是我自己整理所得，希望对大家有所帮助

HTML学习：css命名规则

CSS初学者教程（全套）

CSS 初学者常犯错误汇总

最新资源