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属性。

posted @ 2017-04-01 16:57  蓝度飞  阅读(1785)  评论(0编辑  收藏  举报