HTML（HyperText Markup Language），即超文本标记语言，是一种用于创建网页的标准标记语言。自1990年由蒂姆·伯纳斯-李在欧洲核子研究中心 （CERN） 提出以来，HTML历经多个版本演进，现已成为万维网 信息呈现的核心技术。HTML通过标签结构组织文本、图像、链接、表格等元素，定义网页的语义结构，由浏览器解析并渲染为可视化页面 。它与CSS、JavaScript协同工作，构成现代网页开发的基础 。HTML5作为当前主流版本，增强了对多媒体、语义化和交互功能的支持，广泛应用于网页及移动应用界面设计 。HTML文档为纯文本格式，可跨平台运行，支持Unicode字符集，并通过DOCTYPE声明文档类型 。其标准化由万维网联盟（W3C）和WHATWG共同维护。
魏哥有本事现在过来给我配了CSS（层叠样式表，Cascading Style Sheet）是一种用于描述HTML或XML文档外观和格式的样式语言， 由W3C组织于1996年12月发布第一版标准（CSS Level 1）1990年，Tim Berners-Lee与Robert Cailliau共同发明Web。随着HTML的发展，页面标记中嵌入大量显示属性，导致代码臃肿混乱。1994年，哈坤·利在芝加哥的一次会议上首次提出CSS建议，旨在解决HTML样式混杂问题。同年，伯特·波斯正在开发Argo浏览器，二人决定合作设计CSS。CSS首次引入“层叠”概念， 允许样式从多个来源继承并按优先级覆盖，实现作者与用户样式的灵活融合。从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。 02:38 CSS：让你的网页颜值飙升 1994年哈坤·利提出了CSS的最初建议。而当时伯特·波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。 其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。 哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。 同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯·莱尔顿(Thomas Reaxdon)，他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。 1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。 [4-5] 编程开发 播报 编辑 编程工具 记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。 [6] Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。 语言特点 播报 编辑 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。 总体来说，CSS具有以下特点： （1）丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。 04:55 11.9 设置CSS文本属性 （2）易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。 另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。 （3）多页面应用 CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。 （4）层叠 简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。 （5）页面压缩 在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间。 优势 播报 编辑 网页 网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS 最主要的目的是将文件的内容与显示分隔开来。这有许多好处： 文件的可读性加强； 文件的结构更加灵活； 02:07 「前端小技巧」Flexbox 布局：让CSS布局更灵活 作者和读者可以自己决定文件的显示； 文件的结构简化了； 另外，在 HTML 中： 一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便。不同的读者可以有不同的样式，比如有的读者需要字体比较大。HTML 文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息。CSS 还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。 缺点 播报 编辑 CSS 明显的缺点包括： 浏览器不同的支持 浏览器对 CSS 的支持没有统一，造成不同的浏览器显示效果不同。例如在微软Internet Explorer的旧版本 6.0，有许多独有的 CSS 2.0 属性，但错误显示很多重要的属性，例如：width，height，和float。许多 CSS 编写人员为了尽可能在常用的各个浏览器中达到一致的版面编排，要写很多针对各个浏览器的不同的 CSS 代码。当版面编排很复杂时，要在各个浏览器里获取相同效果是不可能的。 CSS 没有父选择器 CSS 选择器无法提供元素的继承性。先进的选择器（例如XPath）有助于复杂的样式设计。然而，浏览器的性能和增加渲染的问题，关系着父层选择器，却是 CSS 的工作组拒绝建议的主要原因。 而CSS4则计划包括类似功能。 不能明确地指定继承性 样式的继承性，创建在浏览器中 DOM 元素的层级和具体的规则上。 垂直控制的局限 元素的水平放置普遍地易于控制，垂直控制则不然。简单来说，垂直地围绕一个元素、页脚的放置不能高于可见视窗（viewport，视窗或屏幕的可见范围）的底部范围。这需要复杂的样式规则，或是规则简单，但不被广泛支持。 没有算术功能 直至 CSS 2.1 的 CSS 没有办法明确简单地进行计算（例如：margin-left: 10% - 3em + 4px;）。计算功能在很多情况下都是非常有用的，例如：总字段中计算字段的尺寸限制。 工作原理 播报 编辑 CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。 04:09 码小花讲前端2-11-1初识CSS(1) 样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。 名称CSS中的“层叠（cascading）”表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。 01:09 「前端面试题」简述一下CSS选择器的优先级规则 语言基础 播报 编辑 属性和属性值 属性 属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color是文本的颜色属性，而text-indent则规定了段落的缩进。 要掌握一个属性的用法，有六个方面需要了解。具体叙述如下： ①该属性的合法属性值（legal value）。显然段落缩进属性text-indent只能赋给一个表示长度的值，而表示背景图案的background．image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。 ②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为孩属性取它的默认值。 ③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续的空白字符被忽略，而且不自动换行。 ④该属性的值是否被下一级继承（inherited）。 ⑤如果该属性能取百分值（percentage），那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。 ⑥该属性所属的媒介类型组（media groups）。 属性值 ①整数和实数 这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。 ②长度量 一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。 相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。 另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。 ③百分数量（percentages） 百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。 选择器 类型选择器 CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素： 03:38 CSS选择器是什么？ 1 H1{color:red} 简单属性选择器 CLASS属性 CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。 类选择器以标志符（句点）开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语，标志符表示“带有类名的元素”。 ID属性 ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。 需要注意的是，ID选择器的标志符是散列符号（#）。标志符用来提醒浏览器接下来出现的是ID值。 STYLE属性 尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。 通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内（或在外部进行链接）。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。 组合选择器类型 可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求：它必须是正确的类型和正确的类以便使样式规则可以作用于它。 外部信息：伪类和伪元素 在CSS1中，样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。 设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。 伪类和伪元素都不存在于HTML；也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充；也就是说实现更多的效果。 语言标准 播报 编辑 在CSS 2.1规范中，识别符（包括选择符中的元素名、类、ID）只能包含A～Z、a～z、0～9等字符，加上连字符“-”、下划线“_”。识别符不能以数字开头，以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时，其他元素名称、类和ID标识符也不允许用连字符开头。 CSS的识别符也需要用反斜杠“\”规避特殊字符，这些规避字符遵循IS010646规范。特殊字符的规避方法有两种：第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠，例如，“AT&T”变为“AT\&T”；另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起，规避特殊字符，例如，“AT&T”变为“AT\26T”。 技术应用 播报 编辑 在HTML文件里加一个超级链接, 引入外部的 CSS 文档。这个方法最方便管理整个网站的网页风格, 它让网页的文字内容与版面设计分开。只要在一个CSS文档内（扩展名为 CSS） 定义好网页的风格,然后在网页中加一个超级链接连接到该文档,那么网页就会按照在CSS文档内定义好的风格显示出来。 语言评价 播报 编辑 层叠样式表（Cascading Style Sheet，CSS）有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从（X）HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。 CSS简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。 词条图册更多图册 分享你的世界查看更多 1 你知道Web的构件有哪几部份吗？ 对于每个网站设计者来说，都需要知道Web的构件有哪些。目前Web由HTML 5、CSS、XHTML、XML和XSLT、客户端脚本、服务器端脚本、SQL管理数据八大部分组成，我们生活中浏览的网页，都是它们共同工作运营的结果。只有熟练的掌握这些构件，才能设计出一个 娱乐小小羊 词条评价 参考资料 1张爱华，吕京涛．CSS快速入门．青岛出版社．2000年09月．2 2黄雪琴,耿强,陈显军.,．基于CSS+DIV的自适应宽度网页布局方法[J].．计算机与现代化．2014(6) 3维姆莱，波斯．CSS权威教程（第三版）．清华大学出版社．2009.1．第3页 4祝红涛，张钦．CSS网络大讲堂．清华大学出版社．2013.05．2 5黄斯伟．CSS完全使用详解．人民邮电出版社．2007年07月第1版．2 6祝红涛，张钦．CSS网络大讲堂．清华大学出版社．2013.05．4 CSS的概述图（1张） 科普中国 致力于权威的科学传播 本词条认证专家为 李华青 副教授 审核 西南大学电子信息工程学院 权威合作编辑 “科普中国”科学百科词条编写与应用工作项目 “科普中国”是为我国科普信息化建设塑造的全... 什么是权威编辑 词条统计 浏览次数：1471852次 编辑次数：12次历史版本 最近更新： 度1995316