菜鸟学习笔记——前端开发（HBuilder）——CSS（1）

前端开发学习的~日常记录1

1、开发工具：看到很多同事（老鸟&菜鸟）用了一款叫做HBuilder的神奇开发软件，打算尝试一下，看看能否让我燃起热爱前端的小火苗。

2、学习方式：菜鸟教程+同事那里偶尔来的小练习

3、学习目标：HTML、CSS、JS、Jquery 融会贯通，给啥做啥！

4、当前基础：几年前看过html、css，处于勉强能看懂，但写起来就忘的状态！这种基础大概也算菜鸟吧

————————————【一】HBuilder初体验————————————

新手学什么都觉得很新奇，竟然还有这么666的操作，amazing！

div#page>div.logo+ul#navigation>li*2>a 输入后按下Tab键，就变成下面的代码段了！！amazing！

初步分析：#代表 id .代表class >代表下一层级

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

ctrl+shift+F 整理代码

ctrl+Z 撤销 ctrl+Y 取消撤销

———————————【二】体验告一段落，开始尝试写点东西————————————

新建了一个CSS文件，写了一点样式，然而刷新后发现页面没有任何变化，WHY？

我的原因：没有引入CSS文件

引入CSS文件方式：（斜体字均为摘抄，不太理解，后面再看）

方法一：link

在<head>标签内（不是在<style>标签内）使用<link>标签将CSS样式文件链接到HTML文件内，这样最大化的发挥了css出现的优势，当然".css"文件文件的命名要有一定的意义，方便后面的修改或增强其可读性，如"main.css"

<link href="main.css" rel="stylesheet" style="text/css"/>

方法二：@import

这种方式会在整个页面加载完成时才引入css文件，很明显的问题就是页面的"裸奔"现象，这个当然从交互和体验的角度考虑是绝对不能接受的

<style type="text/css">
@import url(demo.css);
</style>

方法对比：

@import这种方式还应注意下载HTML和CSS文件中的不同，在HTML中需要加上<style type="text/css"></style>，而在css文件中就可以直接@import来添加路径使用了，这就出现了一个点：对应样式文件较多的项目，我们可以选择先主后次，把主要的样式先渲染出来，一些次要的可以放在css文件中进行import,这样也可一定程度上缓解服务器的压力，虽然文件不大，但能优化还是好的。本质上这两种外部引入方式并没太多区别，但有时为了项目中编辑站点的样式方便，较多的使用link的方式。

————————————————菜鸟教程——————————————————

感觉之前对HTML、CSS有一点点的了解，所以直接从CSS实例开始学习

菜鸟教程CSS实例：http://www.runoob.com/css/css-examples.html

（1）：设置页面的背景颜色