HTML简介
在一开始的时候…
自成立以来，HTML一直主要关注在线表示文档的结构。通过这个，我的意思是它允许作者识别标题，段落，列表等，但它没有提供（非常多）设施来指定如何呈现信息（字体，颜色，间距，文本流等） ）。
在早期，这很好; Web主要由技术人员用于发布文章和文档，而不太强调文档的外观。随着对网络兴趣的激增，观众和作者都发生了变化。许多为Web编写和设计的人希望对其文档的表示施加更多的控制。这使结构与表现的问题急剧缓解。
HTML是结构
问题是HTML（用于在万维网上编码文档的主要标记语言）实际上仅用于表达文档的结构。
通过使用表格和各种其他技巧，可以对演示文稿施加一些控制，但这样做会模糊文档的结构视图。向HTML添加新的表示标签也没有帮助。演示标签进一步模糊了文档的底层结构，并可能迅速导致多个不兼容的HTML变体。
样式表是演示文稿
样式表在接下来的几个月中应该在Web上变得司空见惯，它提供了一种方法，可以以不损害文档底层结构的方式将表示信息与文档的结构元素相关联。
样式表是一组浏览器指南，指示应如何呈现文档的各种元素。
你能做什么？
CSS1样式表包含五种基本类型的表示信息，称为属性：
l 前景和背景颜色和背景图像。
l 字体属性。
l 文本属性（字间距，字母间距等）。
l 框（边框元素，浮动元素等边框和边框）。
l 分类（控制列表样式和元素的格式 - 例如，它们是应该以内联方式显示还是显示为块）。
除了你可以指定的问题之外，还有它会产生什么影响的问题。答案很大程度上取决于解释样式表的程序的功能。在CSS1规范中，作者仔细使用术语“用户代理”而不是“浏览器”来描述解释文档的程序。如果文档仅由纯文本浏览器或盲文阅读器或语音合成工具处理，而不是由全彩色图形浏览器处理，则样式元素的呈现（和有意义）将是非常不同的。
本文不是规范，我选择使用术语“浏览器”而不是“用户代理”，因为在这种情况下不太正式是合理的。为了记录，我致力于支持每个人都可以访问Web文档的所有努力，当我说“浏览器”时，我的意思是“用户代理”。
在给定的浏览器中，您可能会遇到其他限制。期望大小或长度的大多数属性都接受正值和负值以及百分比。每个浏览器都可以自由地对可接受的值范围施加特定于实现的限制。当遇到冲突或不合逻辑的属性值时，不同的浏览器也可能会做稍微不同的事情。浏览器甚至可以根据文档使用的语言或本地用户设置实现不同的行为。
最重要的是，样式是建议，如果你愿意的话，提示给浏览器。没有规定强制执行演示文稿的任何方面。您不能再保证使用样式表查看文档的其他用户看到的内容与您目前可以保证的相同，如果他们在不同浏览器或平台上没有样式表的情况下查看您的文档。
如何包括你的样式表？
l 样式信息可以通过多种方式包含在文档中：
<LINK REL = STYLESHEET TYPE =“text / css”HREF =“http：// ...”>
l 具有样式表<LINK>在<HEAD>文档的：
l 在文档的<HEAD>中的<STYLE>元素中。
l 直接在文档的各个元素的STYLE属性中。不鼓励使用此方法，因为它将表示信息直接混合到文档中。请注意，可以通过其ID为单个元素提供样式信息，而不管其上下文如何。
l 样式表中的@import命令允许一个CSS1样式表显式导入另一个。
如何为元素分配样式？
但是，导入样式表，样式表本身的内容是包含规则和可能的注释的文本文档（使用C语言样式/ *注释* /表示法）。
简单风格规则
简单样式规则具有以下形式：
元素名称{property：list}
其中元素名称是HTML标记的名称（H1，P，DIV等），属性列表是关联的样式命令。（稍后我们将更详细地介绍具体属性。）
遗产
应用于元素的许多属性值都由放置在其中的元素继承。例如，如果您指定标题中的文本应为红色，则标题中的强调文本也将为红色。
上下文中的元素
虽然没有用于识别上下文中的元素的一般机制（父母，子女，兄弟姐妹等），但是提供了一种简单的方案来指定基于父元素的表示（您可以在H1内指定EM的格式，例如，作为不同的来自EM其他地方）。
如果在格式设置规则中列出一系列元素名称而不是单个名称，则该规则仅适用于列出了所有父项的元素。例如，
DIV H1 EM {properties}
仅当 指定属性出现在DIV内部的H1内时，才将指定的属性分配给EM。请注意，其他干预元素是可能的; 此规则也适用于DIV内的TABLE内部的EM内部。如果应用多个嵌套，则最长的嵌套获胜。
子类元素
有时希望以不同方式处理元素的特定实例。例如，您可能希望以不同的方式显示警告，或者对指向另一台服务器上的URL的链接具有特殊格式。
由于HTML没有为此目的提供丰富的结构，因此CSS1具有CLASS属性的钩子，可以将其放置在任何元素上以将特定角色分配给元素。例如，前面的情况可能编码如下：
<P CLASS =警告>
<A class="offsite" HREF="http://..."> ...... </A>
要指定特定类的元素的样式，请将类名添加到样式表中带有句点的元素名称：
警告{properties}
A.offsite {properties}
子类和嵌套是独立的操作。您可以在样式表中自由混合它们。
按ID进行子类化
另一种子类形式是ID。这种机制允许您避免在文档中嵌入特定样式信息，即使对于唯一元素也是如此。如果您具有必须唯一处理的特定元素，则可以为其指定ID：
<P ID =“特殊情况”>
然后使用＃：将样式信息分配给该元素：
＃special-case {properties}
请注意，ID 必须在文档中是唯一的。当前浏览器可能不会强制执行此要求，但这是对真正符合要求的文档的要求。如果你有几个需要特殊处理的元素，那就是CLASS。
伪类
演示文稿的某些方面严格依赖于文档的结构，而是浏览器或用户交互的功能。例如，您可能希望控制段落第一行的格式或访问链接的显示。
在CSS1中，表示的这些方面由伪类控制。与类一样，它们使用样式表中的元素指定。伪类使用：作为分隔符。类和伪类可以混合使用：
答：访问过{properties}
P.initial：第一个字母
{properties}
这里的第一个示例更改了访问过的HTML链接的属性，第二个示例使用CLASS“initial”更改了段落第一个字母的属性。
仔细研究一下房产
CSS1中的属性由属性名称后跟属性值组成。属性名称和值由冒号分隔。某些属性可能具有多个值，在这种情况下，所选值取决于某些本地条件（例如，特定字体或图像的可访问性）。
可以通过包括由分号分隔的多个属性名称，值对来指定多个属性。以下示例选择顶部标题的蓝色文本上的黄色和块引号中的段落的斜体字体：
H1 { background: blue;
color: yellow }
BLOCKQUOTE P { font-style: italic }
前景和背景颜色和背景图像
指定颜色有两个属性：color 和background。
的颜色属性控制元素的前景色。通常这是元素文本的颜色。可以通过名称或RGB值来识别颜色。
的背景属性控制的元件的背景颜色或纹理。指定图像用作纹理时，可以控制其位置，滚动方面和可重复性。
字体属性
有五个属性可以控制使用哪些字体：
font-family
标识要使用的字体系列或字体。可能会要求提供一系列名称; 将使用第一个可用的字体。有五类“通用”字体可以指定为最后的手段，衬着像Times Roman这样的带衬线的面孔; 对于像Servetica这样的san-serif面孔的sans-serif ; serif为固定宽度的字体等信使; 像Zapf Chancery这样的斜面monospace，以及其他难以分类的面孔如Grunge或Western的幻想。
font-style
标识面部, normal, italic,和 oblique的样式。
font-variant
识别脸部的另一种变化 - CSS1中的正常或小型上限。
font-size
脸的大小。字体大小可以绝对单位或相对于“当前”大小指定。
font-weight
重量或字体的大胆，与任一个关键字（指定粗体或更大胆的，例如）或作为有序系列100,200，300中的一员。。。，900，其中较高的数字相应较暗。
文字属性
有几个文本属性可用：
word-spacing
修改默认的字间距.
letter-spacing
修改默认的字母间距。
text-decoration
选择下划线，上划线，链接或闪烁属性.
vertical-align
调整元素的垂直对齐方式。
text-transform
将文本移至大写或小写.
text-align
指定左对齐，右对齐，居中对齐或对齐对齐.
text-indent
确定文本块第一行的缩进量.
line-height
指定连续文本行的基线之间的距离.
盒
SS1建议的格式化模型是同心矩形之一。每个元素都有一个边距，边距内部是可选的边框，边框内部是可选的填充，而填充内部是元素的实际格式化内容。框属性允许您指定矩形的性质，并确定如何格式化元素的内容以适合所提供的空间。
margin-top，margin-bottom，margin-left，margin-right，margin
整元素顶部，底部，左侧和右侧的填充量。设置margin同时调整所有这些
border-top，border-bottom，border-left，border-right，border
选择元素顶部，底部，左侧和右侧边框的性质。设置边框可同时调整所有边框。您可以指定边框的大小，颜色和样式。
width, height
标识包含格式化内容的矩形的宽度和高度。如有必要，图像应缩放到指定的大小。
Float
标识应浮动到文本流左侧或右侧的元素，允许文本在其周围流动
Clear
指定浮动元素相对于元素可能出现的位置。例如，指定clear： left表示元素左侧可能没有浮动元素; 例如，这将强制元素从浮动在显示器左侧的图像下方开始。
分类
有三种分类属性，display，list-style和white-space：
Display
许您指定元素所属的对象类别：它是块元素，如标题或段落; 内联元素，如重点或锚点; 或列表项块元素，如LI。另一个类别是none，表示根本不应显示元素的内容。
list-style
影响列表中数字或项目符号的选择。除了选择其中一个内置枚举或项目符号样式之外，您还可以指定一个图像以用作项目符号字符。您还可以根据文本流影响列表标记的位置。一个outside清单上发生的整个列表项目的左侧，而文本的下包inside 标记
white-space
标识如何完成元素的换行。可能的值是正常的，其中空白空间仅用于界定根据周围元素的对齐格式化的元素; pre，所有空白区域都很重要; 和nowrap ，其中空格主要用作分隔符，但除了出现<BR>元素外，不进行包装。
浙公网安备 33010602011771号