很久前就想写CSS入门，但是每次都写了开头就发现太难写写不下了。
其实html也好css也好，都是极简单的语言，简单到C/C++程序员要鄙视那些把html和css成为计算机语言的人。正因为简单，所以更难写教程，如同教授1+1=2一般。
所以这篇博文不是教程，只是收集整理了一些资料，然后加上枫影自己的理解写出来的。希望大牛表拍我，每个人都不是一开始就什么都会的，都是需要经过漫长的学习过程的。
不废话了。直接一、HTML
参考维基百科的定义如下：
超文本置标语言（英文：HyperText Markup Language，简称为HTML）是为「网页创建和其它可在网页浏览器中看到的信息」设计的一种置标语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用置标语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。
以我个人的理解，就是一种标记性语言，整个html文件就是有多个标记“<tag></tag>”来组成的。“<tag>”是标记的开始，“</tag>”是标记的结束，另一个tag形式是<tag/>，以"/"作为整个标记的结束，浏览器会解析这些标记，并通过内置的标记的含义来显示该标记的内容。比方说“<textarea></textarea>”这个标记是用来显示多行文本框的，效果如下：
<textarea></textarea>
整个html文件是一颗docment tree（也称dom树，数学意义上的树），根节点为<html>。一个基本的html页面由以下几个固定的节点组成：
<html>
<head>
</head><!--一般head标记里面放各种链接，meta等属性的定义-->
<body>
</body><!--body标记里面显示的就是显示在浏览器里面我们可以看到的内容-->
</html>
接下来介绍属性，attribute。“<input type="text" name="username" value="请输入用户名"/>”
在这个语句里面，有一个标记<input>，他拥有多个属性，type，name，和value。type="text"表示这个input标签的类型是text，也就是我们和常见到的那些要求输入用户名的框框。
大致一个标准的html可以这样子写：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>Hello World~!</p>
</body>
</html>
保存以上代码为test.html文件，然后在浏览器里面打开，就会看到显示“Hello World~!”字样。至于其他的，比方顶部规定了DOCTYPE以及head定义了charse之类的属性则不在入门之列，大致的意思是，使用HTML 4.01版本，设置页面的字符集为UTF-8字符集，入门时只要知道设置UTF-8就不会使中文乱码即可，更深入的可以google之或者我以后写文可能会讨论到。
然后介绍两个重要的属性id和class。
与我们后面要介绍的CSS有很大关联。
对于任何一个标记我们都可以给他一个id属性或者class属性。
比方<input id="usernameinput" type="text" name="username" value="请输入用户名"/>
则这个提示我们输入用户名的框框的id就是usernameinput，我们将可以在css中使用“#usernameinput”这样的方式来对这个标记的样式进行定义，简而言之，就是这个input标记的名字。同样的我们也可以设置他的class为usernameinput，比如：
<input type="text" class="usernameinput" name="username" value="请输入用户名"/>
在CSS中我们就使用“.usernameinput”这样的方式来对这个标记的样式进行定义。那么id和class的区别在哪里呢？从标准上来说，一个id在整个dom树里面只允许出现一次，即唯一的，而class则可以多次。
举个例子，我们有一个输入用户名密码的表单：
<input id="username" type="text" name="username" value="请输入用户名"/>
<input id="password" type="password" name="username" value="请输入密码"/>
那么我们这么写是对的，但是如果把密码那个框框的id也改成username，那么就是错的，因为username作为id不能出现两次，跟身份证号码一样，不可能有重复的。不过目前的浏览器是不会对重复ID报错的，这点不太好。
那么class呢？例子如下：
<input id="username" type="text" name="username" value="请输入用户名"/>
<input id="password" type="password" name="username" value="请输入密码"/>
同样是那个表单，这里class="formclass"出现了两次，但是是合法的，我们在CSS里面，使用.formclass来定义样式的时候，就会一次定义了两个标记的样式。
总结：id是身份证，只能有一个值，不会有相同的id。而class是类，一个类名，允许有多个标记的class重名，因为他们是同类的。
这里可以还不太能明白，看到后面的CSS就会比较明白了。
另外列出一份HTML的标记的表格：
然后下面是我整理的常用的几个标记：
input 输入标记
type属性为text则输入字符串，password则输入字符时会显示为*号或者圈圈以隐藏字符，button则为按钮，radio则为单选，checkbox为多选
name属性是改输入标记的名字，用于在后台程序语言获取该值
div 容器，用来装各种内容，可以认为他是一个透明的盒子。
p 用于存放文字
ul 无序列表
ol 有序列表
li 放在ul和ol标记里面作为一个表项（list）
更多内容可以参考维基百科。
二、CSS
维基定义如下：Cascading Style Sheets（层叠样式表／串樣式列表），简写为CSS，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS 2.1，为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。
CSS作为面向设计师的语言，简易是他的特点，不过貌似现在的设计师还是不太习惯通过代码来控制界面。
一个简单的CSS的代码块可以如下：
#username{
margin: 5px 4px 3px 2px;
color: #000000;
font-size: 14px;
}
其中“#username”是选择器，selector，用来确定在“{}”里面的定义是针对那个标记的，这里是针对id="username"的标记进行定义，如果要对class="username"的进行定义，则使用“.username”，那么所有把class属性命名为username的那些标记都会被这个代码块控制。
接下来看里面的定义，首先我们把一个<div></div>这样的标记成为容器，这也是目前常用的Html标记之一。假设这个容器的id设置为username，那么margin定义的是该容器对外部的距离，“:”后面的四个数字分别是上右下左，也就是说，margin: 5px 4px 3px 2px;这句话表示该容器距离外部容器的距离是上面5像素，右边4像素，其他类推。
color定义的是字体的颜色，采用“#”加十六进制数表示，#000000表示黑色。font-size表示字体大小。
所以，简单地看，CSS就是由选择器和定义来构成的，只要记住了这些定义我们就可以使用CSS来控制我们的页面显示的样式了。
其他更多内容的建议阅读《CSS禅意花园》和《超越CSS》这两本书。
更多内容可以参考维基百科。
Select Language