菜鸟学习笔记——前端开发（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⽂件⽅式：（斜体字均为摘抄，不太理解，后⾯再看）
jquery学习在线教程
⽅法⼀：link
在<head>标签内（不是在<style>标签内）使⽤<link>标签将CSS样式⽂件链接到HTML⽂件内，这样最⼤化的发挥了css出现的优势，当然".css"⽂件⽂件的命名要有⼀定的意义，⽅便后⾯的修改或增强其可读性，如"main.css"
1. <link href="main.css"rel="stylesheet"/>
⽅法⼆：@import
这种⽅式会在整个页⾯加载完成时才引⼊css⽂件，很明显的问题就是页⾯的"裸奔"现象，这个当然从交互和体验的⾓度考虑是绝对不能接受的
1. <style type="text/css">
2.    @import url(demo.css);
3. </style>
⽅法对⽐：
@import这种⽅式还应注意下载HTML和CSS⽂件中的不同，在HTML中需要加上<style type="text/css"></style>，⽽在css⽂件中就可以直接@import来添加路径使⽤了，这就出现了⼀个点：对应样式⽂件较多的项⽬，我们可以选择先主后次，把主要的样式先渲染出来，⼀些次要的可以放在css⽂件中进⾏import，这样也可⼀定程度上缓解服务器的压⼒，虽然⽂件不⼤，但能优化还是好的。本质上这两种外部引⼊⽅式并没太多区别，但有时为了项⽬中编辑站点的样式⽅便，较多的使⽤link的⽅式。
————————————————菜鸟教程——————————————————感觉之前对HTML、CSS有⼀点点的了解，所以直接从CSS实例开始学习
（1）：设置页⾯的背景颜⾊
练后感：有点简单，<h1>、<p>、background-color
（2）：设置不同元素的背景颜⾊
练后感：还是可以做出来的，对CSS选择器的写法有点模糊。<div> <p> class/id
（3）⾼级背景的例⼦
练后感：查了backgound、border的格式后⼤概做出来了，但是和⽰例的代码不同。⽰例中⽤了两层div嵌套，⽬前不太理解是什么原理。。
*  background格式：    background：#191919 url('../img/timg.jpg') no-repeat top left；
background的属性：color、image、repeat（repeat默认；repeat-x；repeat-y；no repeat；inherit）、attachment（scroll默认；fixed；inherit）、position
*  img图⽚的引⼊：图⽚在img⽂件夹中，需要从当前CSS⽂件夹出去(../)
*  border格式：    border：1px black solid；
*  margin和padding的区别：
第⼀天的练习到此结束。。期待第⼆天！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。