资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/一步步搭建物联网系统——无处不在的CSS

一步步搭建物联网系统——无处不在的CSS

andot / 2557人阅读

摘要：与类选择器最常一起出现的是选择器，不过这个适用于比较高级的场合，诸如用控制的时候就需要用到选择器。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统

无处不在的CSS

或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。

CSS

下面就是我们之前说到的代码，css将Red三个字母变成了红色。

HTML




    
Red

只是，

javascriptvar para=document.getElementById("para");
para.style.color="blue";

将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室，也就是CSS，这时还没有Javascript。

如果没有一个好的结构

那么以后可能就是这样子。。。。

然后我们有一个像app.js一样的style.css放在同目录下，而他的内容便是

CSS.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}
.para2{
    font-size:44px;
    color:#3ed;
    text-indent: 2em;
    padding-left: 2em;
}

这代码和JS的代码有如此多的相似

javascriptvar para={
    font_size:"22px",
    color:"#f00",
    text_align:"center",
    padding_left:"20px",
}

而22px、20px以及#f00都是数值，因此：

javascriptvar para={
    font_size:22px,
    color:#f00,
    text_align:center,
    padding_left:20px,
}

目测差距已经尽可能的小了，至于这些话题会在以后讨论到，如果要让我们的编译器更正确的工作，那么我们就需要非常多这样的符号，除非你乐意去理解:

lisp(dotimes (i 4) (print i))

总的来说我们减少了符号的使用，但是用lisp便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。

regexd{2}/[A-Z][a-z][a-z]/d{4}

上面的代码，是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式，就会觉得那个很复杂。

这门语言可能是为设计师而设计的，但是设计师大部分还是不懂编程的，不过相对来说这门语言还是比其他语言简单易懂一些。

样式与目标

如下所示，就是我们的样式

css.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}

我们的目标就是

如果没有一个好的结构

所以样式和目标在这里牵手了，问题是他们是如何在一起的呢？下面就是CSS与HTML沟通的重点所在了:

选择器

我们用到的选择器叫做类选择器，也就是class，或者说应该称之为class选择器更合适。与类选择器最常一起出现的是ID选择器，不过这个适用于比较高级的场合，诸如用JS控制DOM的时候就需要用到ID选择器。而基本的选择器就是如下面的例子:

p.para{
    color:#f0f;
}

将代码添加到style.css的最下面会发现“如果没有一个好的结构”变成了粉红色，当然我们还会有这样的写法

p>.para{
    color:#f0f;
}

为了产生上面的特殊的样式，虽然不好看，但是我们终于理解什么叫层叠样式了，下面的代码的重要度比上面高，也因此有更高的优先规则。

而通常我们可以通过一个

p{
    text-align:left;
}

这样的元素选择器来给予所有的p元素一个左对齐。

还有复杂一点的复合型选择器，下面的是HTML文件




    CSS example
    


    
如果没有一个好的结构

    

        
那么以后可能就是这样子。。。。

还有CSS文件

.para{
    font-size: 22px;
    color:#f00;
    text-align: center;
    padding-left: 20px;
}
.para2{
    font-size:44px;
    color:#3ed;
    text-indent: 2em;
    padding-left: 2em;
}

p.para{
    color:#f0f;
}
div#content p {
    font-size:22px;
}
更有趣的CSS

一个包含了para2以及para_bg的例子

    

        
那么以后可能就是这样子。。。。

我们只是添加了一个黑色的背景

.para_bg{
    background-color:#000;
}

重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。

我们还可以用CSS3做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。

或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。

在线查看:一步步搭建物联网系统

图灵-电子书版一步步搭建物联网系统

GPU云服务器 云服务器 一步步搭建物联网系统 一步步搭建框架 物联网系统的应用 如何搭建自己的物联网云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55065.html

相关文章

  • 一步步搭建物联网系统——无处不在的CSS

    摘要：与类选择器最常一起出现的是选择器，不过这个适用于比较高级的场合，诸如用控制的时候就需要用到选择器。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统 无处不在的CSS 或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。 CSS 下面就是我们之前...

    dreambei 评论0 收藏0

  • 一步步搭建物联网系统——无处不在的HTML

    摘要：也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统 某一天，正走在回学校的路上的我突然想到：未来将会是一个科技的时代——虽然现在也是——只是在未来，科技将会无处不在。如果我们依旧对周围这些无处不在的代码一无所知的话，或许我们会成为黑客帝国之中被控制的普通人。于是开始想着，有一天人们会像学...

    高胜山 评论0 收藏0

  • 一步步搭建物联网系统——无处不在的HTML

    摘要：也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统 某一天，正走在回学校的路上的我突然想到：未来将会是一个科技的时代——虽然现在也是——只是在未来，科技将会无处不在。如果我们依旧对周围这些无处不在的代码一无所知的话，或许我们会成为黑客帝国之中被控制的普通人。于是开始想着，有一天人们会像学...

    iamyoung001 评论0 收藏0

  • 一步步搭建物联网系统——无处不在的HTML

    摘要：也可以补充好之前在这个最小物联网系统缺失的那些东西，给那些正在开始试图去解决编程问题的人。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统 某一天，正走在回学校的路上的我突然想到：未来将会是一个科技的时代——虽然现在也是——只是在未来，科技将会无处不在。如果我们依旧对周围这些无处不在的代码一无所知的话，或许我们会成为黑客帝国之中被控制的普通人。于是开始想着，有一天人们会像学...

    JerryC 评论0 收藏0

发表评论

登陆后可评论

0条评论

andot

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<