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