什么是W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。
W3C的主要规范
到目前为止，W3C已开发了超过50个规范(草案)。这些规范(草案)包括人们早已、耳熟能详的HTML、HTTP、URIs、XML等，也包括针对语义Web的RDF、OWL等。
* HTML/XHTML：HTML是Web的基础之一，基于HTML，Web上开始出现丰富多彩的页面，蕴涵了各种信息。基于HTML，Web以一种简便易用的方式走出了象牙塔，成为全社会的公共资源和财富。W3C先后推出了多个HTML版本，分别是1997年12月的首个版本、1998年4月的更新、1999年12月推出HTML 4.01版。XHTML是对HTML 4.01的扩展，在其中可以使用XML的语义功能。XHTML 1.0已于2000年1月作为推荐标准发布；XHTML Basic是对XHTML1.0的独立于设备(如手机、PDA等)的扩展，于2000年12月发布；随后，2001年5月推出了XHTML的模块化版本——XHTML1.1。
* CSS：CSS负责为网页设计人员提供丰富的款式空间来设计网页。CSS所提供的网页结构内容与表现形式的分离机制，大大简化了网站的管理，提高了开发网站的工作效率。CSS可用于控制任何HTML和XML内容的表现形式。CSS1.0于1996年12月推出，1998年5月CSS2.0发布。
* XML:1998年2月发布的XML 1.0是W3C最具前瞻性和最有影响的标准之一。XML作为下一代Web的第一块重要基石，为分布式的、异构的数据交换提供了强大的功能，并且将数据本身和数据的表现分离，同时，就数据本身而言，数据的值和语义也是适当分离的。事实上，XML已经发展为一族技术，包括2001年5月发布的XML Schema、1999年1月发布的XML Namespaces、1999年11月发布的用于处理XML转换的XSLT和用于在XML文档中定位的XPath，以及2001年6月发布的XLink和XML Base等。此外，XML的出现为程序能够自动地处理Web数据和信息，以及Web服务(WSDL、SOAP、UDDI规范)提供了一种公共基础。
* DOM：DOM为HTML、XML等数据载体和信息载体在内存中的处理提供了一种基本的对象模型，可提供连接到文件的结构、格式、事件等。由于不依赖于任何程序设计语言和网页描述语言，它为有效处理HTML和XML数据提供了一种标准的、独立的接口。DOM先后经历了3个版本，分别是1998年10月发布的DOM Level 1、2000年11月发布的DOM Level 2和2003年发布的DOM Level 3。
W3C标准使用实例
当顶部为：
需注意以下情况，所用前提都是在顶部为是一句基础上而言！
1、所有标签用小写。
建议养成好习惯把ul span li div 都用小写，当然当顶部申明为上面所示，则不严格区分大小写的。
2、头文件meta、link标签。
错误：
正确：
错误：
正确：
正确：
3、JS调用。
错误：
错误：
正确：
正确：
4、表格高度
不要使用如height="101"
正确：
5、正确使用alt、title
南宁大家教
凡是没有带加链接的图片必须加上alt=""如：
6、在声明文件为前面说的情况下，可省略双引号或单引号。
如：
或者
都通过w3c标准的。
7、表单form只使用ID
正确：
错误：
错误：
使用form标签
错误：
正确：
去掉form 多余空部分方法有：
8、input后面>不加斜杠/
错误：
正确：
9、正确使用align,valign值。
错误：align="middle"，可以使用style="text-align:center;"。
正确：align="left",align="left",align="right",align="justify",align="char"
错误：valign="center"
正确：valign="top",align="middle",align="bottom",align="baseline"
10、表格TABLE使用背景图片。
错误：background="/wl_pic/sp2.jpg"
正确：style="background:url(/wl_pic/sp2.jpg);"
错误：bgColor=#eeeeee
正确：bgColor="#eeeeee"
11、站长统计代码不通过的解决办法。把&修改为&
12、FLASH焦点图如何通过W3C?
HTML5 & CSS3初学者指南(2) – 样式化第一个网页
问题：我怎么才能收到你们公众号平台的推送文章呢？
答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。
介绍
我们已经使用基本的 HTML 编写了一个网页。但是，写出来的 HTML 代码的网页看起来很平淡，没有吸引力。
如何改善这种很平淡的页面呢？
让我们开始使用网页的基本样式来改善页面效果，我们将会使用到 CSS 的功能。
正式开始CSS 是层叠样式表的缩写，它是为网页添加样式的通用语言，在所有浏览器中都支持。最新的标准是 CSS3，这与早期版本完全向后兼容。CSS3 的规范是由 W3C开发的，目前仍处于开发阶段，其最新的版本是 CSSSnapshot 2010。
打开你的文本编辑器，键入下图上半部分中显示的 HTML 代码。完成时，保存成 .htm 或 .html 文件，并将其拖入到浏览器中，你将会在网页中看到下图的下半部分。
如果说，你的客户看到了网页，要求最大标题设为蓝色，并且放置在网页的中心，你可以做到吗？单独使用 HTML，毫无疑问是做不到的。
别着急！添加以下 CSS 代码（下图中蓝色的部分）到 HTML 代码中，就能满足客户的需求。
基本的CSS语法
刚才，我们已经添加了一个 CSS 样式到我们的网页中。让我们来看看基本的 CSS 语法。
步骤1-在 head 部分，添加开始标签 。这部分区域将用来设计 CSS 样式规则。
需要注意的是，/ *和* /用于封装 CSS 中的注释。注释是用来解释代码的，浏览器会将其忽略。
第2步-选择我们想要添加样式的 HTML 元素。这个例子中是 标签，在 CSS 的专业术语中，我们将h1称为选择器。h1 后面的 { }，用于将 h1 的样式声明括起来。
第3步-添加2个样式声明，一个用于将的内容设置为 blue，另一个设置为居中显示。
每个声明包含一个属性和一个值，用冒号分隔（：），并以分号结束（;）。在我们的例子，color是属性，blue是值。
介绍完 CSS 的基本语法。让我们一起来看看：
/* End of CSS block */
要添加样式到一个 HTML 元素中，比如
，简单的为选择器 p 添加样式声明，其后的 h1 也是。顺序并不重要。
看到你完成的很好，你的客户又有了新的需求：需要将第二行字设为红色、左对齐。
CSS选择器
CSS 选择器能够帮助我们查找，选择，声明 HTML 元素的样式描述。
元素选择器
在前面的例子中，我们已经通过 HTM L标签使用了 CSS 选择器，就像对 h1，h3 和 p元素应用相应的样式。请记住，一个网页可以包含很多这样的标签，尤其是
标签。P 选择器会将相同的样式应用到整个网页中的所有
标签中，无一例外。这意味着，所有的
标签将是绿色和右对齐的。这种地毯式的样式应用将会让单独段落的定制化样式无法实现，因为所有的段落都受 p 选择器的影响。
（将下面的代码添加到 HTML 文档的描述部分。）
为了克服这种局限性，我们将引入另外2种选择器-ID选择器和类选择器。
ID选择器
每个 HTML 标签都有一个 id属性，具有和其它不一样的命名。例如，HTML 文档中有2个
标签，我们可以将它们中的一个命名为“para1”，而另一个命名为“para2”。要在 CSS 代码中选择它们，需要在 ID 名称之前添加“＃”。命名为“para1”和“para2”的选择器，将会通过“ #para1”和“ #para2”进行区分。我们可以通过 ID 名称作为选择器，来为它们应用不用的 CSS 样式。
你可能已经注意到具有 ID 名称 para1和 para2 的两个段落保持居中属性，即使在各自的选择器中并未设置居中属性。在这种情况下，他们都继承了父级元素的 text-align属性。
注意以下关于 id 选择器的几点：你可能已经注意到具有 ID 名称 para1和 para2的两个段落保持居中属性，即使在各自的选择器中并未设置居中属性。在这种情况下，他们都继承了父级元素的text-align属性。
类选择器
类似地，每个 HTML 标签都有一个class属性，具有和其它不一样的命名。例如，如果 HTML 文档中有4个
标签，我们将其中的两个命名为“group1”。要在 CSS 代码中选择它们，需要在其类名之前添加一个点字符（.）。我们可以通过类选择器名将一组 CSS 样式共享给相同类名的一组 HTML 元素。
类名不要以数字开头注意以下关于类选择器的几点：
选择器的链接
如果一些元素需要设置为相同的样式，我们可以通过最少量的代码将它们一起设置。
CSS的位置
目前，我们都是将 CSS 样式放置在 HTML 文档的头部，这种样式被称为内部样式。实际上还有另外2种放置 CSS 样式表的方式-外部样式和内联样式。
内部样式表
我们已经很熟悉了内部样式表。当一个 HTML 文档具有独特的风格时，可以使用内部样式。然而，当许多 HTML 文档共享同一个样式的情况时，这种方式是非常低效的。为此，我们应该去使用外部样式表。
外部样式表
顾名思义，外部样式表放置在所有 HTML 文档的外部。每个文档都会通过头部的 标签链接到外部样式表。下面，让我们一起看看是如何实现的。
我们会将 HTML 文件中 标签之间的代码剪切并粘贴到一个文本编辑器中。将这个文件命名为“mystyle.css”并保存在 HTML 文档的同一文件夹中。请注意，.css 是外部样式表的文件扩展名。
h1,h2,p{ color:red; text-align:right; }
CSS 样式已经从 HTML 文件中转移出来了。要在 HTML 文件中添加“mystyle.css”链接，需要在 HTML 文档的头部添加如下的代码：
将 HTML 文件拖入浏览器中，将会看到和之前相同的网页。
当我们想要在站点的多个网页中应用相同的样式时，使用外部样式表是很理想的。我们可以在外部样式表中做一个改动，就能改变整个站点的外观和感觉。这大大有助于网站的维护。
内联样式表
内联样式是通过以下代码中 HTML 标签的属性来声明样式的：
Inline Style Sheet
然而，这种在 HTML 标签中内嵌 CSS 也导致了内容呈现的混乱，不利于 CSS 的引进。所以，应该尽可能避免使用内联样式表。
样式表的优先级
不难想象，一个 HTML 元素具有内联、内部和外部样式这三种样式的情形。在这种情况下，其风格应该是混乱的。
下面是起作用的优先级顺序（从高到低）：
请记得我的这个经验法则-“最接近元素的样式，优先级最高”。
CSS属性
在前面的例子中，我们已经使用了“color”和“ text-align"属性。它们只是众多 CSS 属性中的2个。CSS 属性的名称是相当直观的，也就是说，它们会起到它们名称的作用。
下面，我们讨论以下的三种属性（背景/文本/字体）。
CSS背景
可以通过以下的 CSS 背景属性设置网页的背景：
我们使用 backgrounf-color属性来设置任何 HTML 元素的背景颜色，包括 标签。
我们使用 backgroung-image属性将背景图像嵌入到任何 HTML 元素，添加以下代码片段到 HTML 文件中，修改 url 参数使其指向一个图像文件：
body{background-image:url("logo250x135.gif");}
背景显示在浏览器中，整个网页的背景是图像的平铺效果。
需要背景图像水平重复的，使用 background-repeat:repeat-x。
body{ background-image:url("logo250x135.gif"); background-repeat:repeat-x; }
需要背景图像垂直重复的，使用 background-repeat属性repeat-y。
background-repeat:repeat-y;
如果不需要左上角的 backgroung-image有任何重复，改变背景重复属性值为no-repeat。
background-repeat:repeat-y;
背景位置
需要固定背景图像到屏幕的某些位置上，设置 backgroung-position属性为“top right”。
body{ background-image:url("logo250x135.gif"); background-repeat:no-repeat; background-position:top right; }
CSS文本
网页上的任何文本效果，都可以通过以下的 CSS 属性来设置：
color属性用于设置任何 HTML 元素的文本颜色。
text-align 属性用于设置文本的水平对齐方式。可以采用以下的四个值的一个：center、left、right、或 justified。
text-decoration属性用于设置或者取消任何 HTML 内容元素的装饰。可以采用以下的四个值的一个：overline、line-through、underline、none.
DOCTYPE html><html><head><style>
#overline{text-decoration:overline;}
#strikethrough{text-decoration:line-through;}
#underline{text-decoration:underline;}style>head><body>
<p id="overline">Under one roofp>
<p id="strikethrough">Cancel an appointmentp>
<p id="underline">On solid footingp>body>html>
none值用于移除超链接的默认下划线。
text-transform用于将任何 HTML 元素的文本内容转换为大写，小写，或根据值设置是否大写。
text-index 属性是用于指定文本的首行缩进量。
CSS字体
文本的字体效果可以通过以下的 CSS 属性来设置：
字体系列
font-family 属性用于 HTML 文档中的文本的字体。有两种类型的font-family：
以下是常见的几种 font-family 属性的风格名称。字体列表用逗号分隔。对于名称中有空格的字体，使用引号将其括起来，如"Times New Roman"：
font-family:"Times New Roman",Cambria,Serif;
如果浏览器不支持第一个字体，则会尝试下一个。经验法则是，你应该总是以你想要的字体风格名称开始，并以通常字体系列结尾。这将允许浏览器在所有字体不可用的情况，选择近似的字体集合。
试试下面的例子，并在浏览器上查看结果。
字体样式
font-style 属性可以采用以下三个值中的一个-normal，italic或 oblique。将以下 CSS 代码添加到之前的例子中查看各自的效果。
.serif{ font-family:"Times New Roman",Georgia,serif; font-style:normal; }.sansserif{ font-family:Arial,"Century Gothic",sans-serif; font-style:italic; }.monospace{ font-family:"Courier New",Monaco,monospace; font-style:oblique; }
字体大小
我们可以使用 font-size 属性并通过以下三个不同的测量单位来设置文本的大小：pixel、em或percentage。
让我们一起检查一下浏览器的输出。第一段是100%的字体大小，默认使用 CSS 中的 body 选择器。相比较，第二段为50％的字体大小。对于第3段和第4段，他们的字体大小相同。查看他们各自的 CSS 声明，它们被设置为 16px 和 1em。换句话说，1em 等同于 16px。
注意事项
让我们一起回顾一下今天的学习要点：
第二次的学习就到这里。
完成了本节知识的学习，能帮助我们掌握如何使用CSS样式化我们的页面。在进行样式化网页等开端开发时，还可以借助一些前端开发工具。如Wijmo，这是一款大而全面的前端 HTML5 / JavaScript UI控件集，能为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。
原文链接：
