HTML+CSS 新手快速入门

本篇文章，严格意义上来说，这是我的第一篇技术博客，我将写一些有关HTML+CSS 的基础。

我有过前端布道师的经历，带过的学生到目前为止至少在1000+，所授课程基本都会有HTML+CSS布局，所以我对这个技术点，应该可以说是比较熟悉的了。

首先，我个人是比较赞同内容（HTML）和样式（CSS）分离的思想，在页面中呈现的内容使用HTML插入，内容的样式使用CSS来操控，这种思想，对于一个初学者来说，是非常容易理解的。无论是HTML标签，CSS选择器刚开始都不要过多去了解，标签只要三个div、a、img即可，选择器只需要会两个，即类名选择器和通用选择器，这时就可以开始网页布局了，而且，市面上很多的页面都可以只使用这些东西来布局，当对于CSS 的属性已经比较熟悉，对于HTML+CSS布局基本熟练时，再去了解大量的不同功能的标签和选择器，这种学习方法，会事半功倍。

　　接下来，我来表述一下刚开始需要做哪些事情：

　　第一步：创建一个index.html的文件，创建一个index.css的文件。

　　第二步：在index.html文件中，先写入HTML的文档结构，这里推荐初学者使用windows环境下的sublime编辑器，可以键入一个‘！’，再键入一个‘tab’键，这时，就会生成一个HTML5的文档结构，文档结构中会有一个<body></body>标签，想要在页面中显示的内容，都是要写入到这个标签内的。

　　第三步：在<title></title>标签下面，写入link标签，键入‘link’四个字母，再键入‘tab’键。该标签的目的是将index.css引入到index.html中。如果第一步创建的两个文件在同一文件加下，则代码为：

<link rel="stylesheet" href="index.css">

　　第四步：在index.css文件中写入以下代码：

1  /*通用选择器*/
2 *{       
3 　　  /*去除一些标签的默认样式*/
4      padding:0;margin:0; 
5      /*去除a标签的下划线*/
6      text-decoration:none;  
7  }

第五步：HTML中使用div、a、img标签写入内容，CSS中使用类名选择器选择到每一个元素，去分别赋予样式。代码片段，如下：

index.html

<div class=”one”></div>

index.css

1 .one{
2            width:200px;
3            height:200px;
4            background:red;
5 }

　　第六步：在浏览器中打开index.html，我们将看到一个宽高均为200px的红色块，接下来就需要开始大量的学习CSS属性，这些属性，可以让我们非常方便的将HTML标签变成任意的样式。

　　本篇内容到这里就结束了，从下一篇文章开始，将会一一讲解重要的CSS属性。