一步步搭建物联网系统——无处不在的CSS
无处不在的CSS
或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。
CSS
下面就是我们之前说到的代码，css将Red三个字母变成了红色。
HTML<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="para" style="color:red">Red</p>
</body>
<script type="text/javascript" src="app.js"></script>
</html>
只是，
javascriptvar para=document.getElementById("para");
para.style.color="blue";
将字体变成了蓝色，CSS+HTML让页面有序的工作着，但是Javascript却打乱了这些秩序，有着唯恐世界不乱的精彩，也难怪被冠以小三之名了——或许终于可以理解，为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室，也就是CSS，这时还没有Javascript。
关于CSS
这不是一篇专业讲述CSS的书籍，所以我不会去说CSS是怎么来的，有些东西我们既然可以很容易从其他地方知道，也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码，不过有些重复是不可少的，也是有必要的，而通常这些东西可能是由其他地方复制过来的。
到目前为止我们没有依赖于任何特殊的硬件或者是软件，对于我们来说我们最基本的需求就是一台电脑，或者可以是你的平板电脑，当然也可以是你的智能手机，因为他们都有个浏览器，而这些都是能用的，对于我们的CSS来说也不会有例外的。
CSS(Cascading Style Sheets)，到今天我也没有记得他的全称，CSS还有一个中文名字是层叠式样式表，事实上翻译成什么可能并不是我们关心的内容，我们需要关心的是他能做些什么。作为三剑客之一，它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面，也可以像我们的书本一样简单，不过如果要和我们书本一样简单的话，可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的，我们还可以继续用上面说到的编辑器，又或者是其他的。如果你喜欢DreamWeaver那也不错，不过一开始使用IDE可无助于我们写出良好的代码。
忘说了，CSS也是有版本的，和windows，Linux内核等等一样，但是更新可能没有那么频繁，HTML也是有版本的，JS也是有版本的，复杂的东西不是当前考虑的内容。
代码结构
对于我们的上面的Red示例来说，如果没有一个好的结构，那么以后可能就是这样子。
HTML<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p>
<p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p>
</body>
</html>
虽然我们看到的还是一样的:
于是我们就按各种书上的建议重新写了上面的代码
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style type="text/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;
}
</style>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
总算比上面好看也好理解多了，这只是临时的用法，当文件太大的时候，正式一点的写法应该如下所示:
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<style type="text/css" href="style.css"></style>
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
我们需要
HTML<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<p class="para2">那么以后可能就是这样子。。。。</p>
</body>
</html>
然后我们有一个像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便带入了更多的括号，不过这是一种简洁的表达方式，也许我们可以在其他语言中看到。
regex\d{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文件
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<div id="content">
<p class="para2">那么以后可能就是这样子。。。。</p>
</div>
</body>
</html>
还有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的例子
<div id="content">
<p class="para2 para_bg">那么以后可能就是这样子。。。。</p>
</div>
我们只是添加了一个黑色的背景
.para_bg{
background-color:#000;
}
重新改变后的网页变得比原来有趣了很多，所谓的继承与合并就是上面的例子。
我们还可以用CSS3做出更多有趣的效果，而这些并不在我们的讨论范围里面，因为我们讨论的是be a geek。
或许我们写的代码都是那么的简单，从HTML到Javascript，还有现在的CSS，只是总有一些核心的东西，而不是去考虑那些基础语法，基础的东西我们可以在实践的过程中一一发现。但是我们可能发现不了，或者在平时的使用中考虑不到一些有趣的用法或者说特殊的用法，这时候可以通过观察一些精致设计的代码中学习到。复杂的东西可以变得很简单，简单的东西也可以变得很复杂。
在线查看:一步步搭建物联网系统
图灵-电子书版一步步搭建物联网系统
一步步搭建物联网系统——无处不在的CSS的更多相关文章
- 一步步搭建自己的博客 .NET版（2、评论功能）
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- 按照Enterprise Integration Pattern搭建服务系统
在前一篇文章中,我们已经对Enterprise Integration Pattern中所包含的各个组成进行了简单地介绍.限于篇幅(20页Word以内),我并没有深入地讨论各个组成.但是如果要真正地按 ...
- 一步步搭建react-native环境(苹果OS X)
因重新升级了系统,一步步搭建react-native环境. 1.安装Homebrew 打开终端命令->ruby -e "$(curl -fsSL https://raw.githubu ...
- flow.ci + Github + Slack 一步步搭建 Python 自动化持续集成
理想的程序员必须懒惰,永远追随自动化法则.Automating shapes smarter future. 在一个 Python 项目的开发过程中可能会做的事情:编译.手动或自动化测试.部署环境配置 ...
- 一步步搭建docker私有仓库并从私有仓库中下载镜像
一步步搭建docker私有仓库 #下载镜像 docker pull registry#查看镜像 docker images #运行私有仓库,指定端口和数据卷 docker run -d -p : -v ...
- ELK+FileBeat+Log4Net搭建日志系统
ELK+FileBeat+Log4Net搭建日志系统 来源:https://www.zybuluo.com/muyanfeixiang/note/608470 标签(空格分隔): ELK Log4Ne ...
- 30余套系统模版|DIV+CSS网页模板|简洁大气系统模板
30余套系统模版|DIV+CSS网页模板|简洁大气系统模板.都是一些后台系统的模版,很适合开发一些管理系统,办公系统,网站后台系统等.使用很广泛,很实用的系统模版. 下载地址: 点击下载
- 基于SRS+OBS搭建直播系统
这段时间与视频,直播相关的技术不可谓不热,今天我们就近距离接触下,尽早搭上这班车! 我们先看一张效果图 左边是OBS 推流端,右边是VLC播放器,稍微有延迟! 本文是基于VMware(12.5.7)+ ...
- 物联网系统与CoAP之Hello,World
物联网系统与CoAP Hello,World 关于CoAP与物联网系统我们在上一篇中(ps:CoAP与物联网系统)中做一个简单的介绍,接着我们便開始试试CoAP协议的应用 CoAP应用 開始之前我们须 ...
随机推荐
- vue项目部署到IIS服务器上
前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...
- jq获取不包含某些属性的元素
最近写项目,有个功能实现checkbox全选,但是被禁用的checkbox不能选中 点击全选后发现禁用checkbox的也被选中了,不符合需求. 但是想了半天,属性选择器都是判断某个属性值的,没有判断 ...
- LeetCode-009-回文数
回文数 题目描述:给你一个整数 x ,如果 x 是一个回文整数,返回 true :否则,返回 false . 回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数.例如,121 是回文,而 1 ...
- 对element-ui的table组件的二次封装
首先,使用过element-ui的table组建的同学都知道,每次使用的时候表头字段都要一个一个的去写,写起来很麻烦,既不美观又浪费时间,基于以上原因,对table组件进行二次封装,使我们在使用的时候 ...
- mxnet源码阅读笔记之include
写在前面 mxnet代码的规范性比Caffe2要好,看起来核心代码量也小很多,但由于对dmlc其它库的依赖太强,代码的独立性并不好.依赖的第三方库包括: cub dlpack dmlc-core go ...
- vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
- spring——整合Mybatis
一.Mybatis整合spring 步骤: 导入相关jar包 junit mybatis mysql数据库 spring-webmvc aop织入 mybatis-spring spring-jdbc ...
- go语言学习入门篇1---go语言的主要特性与发展
1.1 影响 Go 语言发展的早期编程语言 正如 "21 世纪的 C 语言" 这句话所说,Go 语言并不是凭空而造的,而是和 C++.Java 和 C# 一样属于 C 系.不仅如此 ...
- VT 入门番外篇——初识 VT
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- List 和 Map 区别?
表面来看,List是一个只是存放单个元素的集合,List集合所包含的元素可以重复,元素按放入的先后顺序来存放,程序可以通过元素的索引来读取元素,因此List相当于一个动态数组:Map则是一个存放key ...