admin管理员组

文章数量:1794759

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

菜鸟学习笔记——前端开发（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实例：www.runoob/css/css-examples.html

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

    练后感：有点简单，<h1>、<p>、background-color

    （2）：设置不同元素的背景颜色

    练后感：还是可以做出来的，对CSS选择器的写法有点模糊。<div> <p> class/id

    CSS选择器参考（下方贴图仅为一部分）：www.w3school/cssref/css_selectors.asp

    （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的区别：

        

    第一天的练习到此结束。。期待第二天！

    本文标签： 菜鸟学习笔记cssHBuilder

    版权声明：本文标题：菜鸟学习笔记——前端开发（HBuilder）——CSS（1） 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971242a123902.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。