物联网系统的搭建(三)
来源:互联网 发布:mac打开mpp 编辑:程序博客网 时间:2024/05/16 14:56
无处不在的CSS
或许你觉得CSS一点儿也不重要,而事实上,如果说HTML是建筑的框架,CSS就是房子的装修。那么Javascript呢,我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。
1 CSS
下面就是我们之前说到的代码,css将Red三个字母变成了红色。
<!DOCTYPE html><html><head></head><body> <p id="para" style="color:red">Red</p></body> <script type="text/javascript" src="app.js"></script></html>
只是,
var para=document.getElementById("para");para.style.color="blue";
将字体变成了蓝色,CSS+HTML让页面有序的工作着,但是Javascript却打乱了这些秩序,有着唯恐世界不乱的精彩,也难怪被冠以小三之名了——或许终于可以理解,为什么以前人们对于Javascript没有好感了——不过这里要讲的是正室,也就是CSS,这时还没有Javascript。
2 关于CSS
这不是一篇专业讲述CSS的书籍,所以我不会去说CSS是怎么来的,有些东西我们既然可以很容易从其他地方知道,也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码,不过有些重复是不可少的,也是有必要的,而通常这些东西可能是由其他地方复制过来的。
到目前为止我们没有依赖于任何特殊的硬件或者是软件,对于我们来说我们最基本的需求就是一台电脑,或者可以是你的平板电脑,当然也可以是你的智能手机,因为他们都有个浏览器,而这些都是能用的,对于我们的CSS来说也不会有例外的。
CSS(Cascading Style Sheets),到今天我也没有记得他的全称,CSS还有一个中文名字是层叠式样式表,事实上翻译成什么可能并不是我们关心的内容,我们需要关心的是他能做些什么。作为三剑客之一,它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面,也可以像我们的书本一样简单,不过如果要和我们书本一样简单的话,可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的,我们还可以继续用上面说到的编辑器,又或者是其他的。如果你喜欢DreamWeaver那也不错,不过一开始使用IDE可无助于我们写出良好的代码。
忘说了,CSS也是有版本的,和windows,Linux内核等等一样,但是更新可能没有那么频繁,HTML也是有版本的,JS也是有版本的,复杂的东西不是当前考虑的内容。
3 代码结构
对于我们的上面的Red示例来说,如果没有一个好的结构,那么以后可能就是这样子。
<!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>
虽然我们看到的还是一样的:
于是我们就按各种书上的建议重新写了上面的代码
<!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>
总算比上面好看也好理解多了,这只是临时的用法,当文件太大的时候,正式一点的写法应该如下所示:
<!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>
我们需要
<!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放在同目录下,而他的内容便是
.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的代码有如此多的相似
var para={ font_size:'22px', color:'#f00', text_align:'center', padding_left:'20px',}
而22px、20px以及#f00都是数值,因此:
var para={ font_size:22px, color:#f00, text_align:center, padding_left:20px,}
目测差距已经尽可能的小了,至于这些话题会在以后讨论到,如果要让我们的编译器更正确的工作,那么我们就需要非常多这样的符号,除非你乐意去理解:
(dotimes (i 4) (print i))
总的来说我们减少了符号的使用,但是用lisp便带入了更多的括号,不过这是一种简洁的表达方式,也许我们可以在其他语言中看到。
\d{2}/[A-Z][a-z][a-z]/\d{4}
上面的代码,是为了从一堆数据中找出“某日/某月/某年”。如果一开始不理解那是正则表达式,就会觉得那个很复杂。
这门语言可能是为设计师而设计的,但是设计师大部分还是不懂编程的,不过相对来说这门语言还是比其他语言简单易懂一些。
4 样式与目标
如下所示,就是我们的样式
.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px;}
我们的目标就是
如果没有一个好的结构
所以样式和目标在这里牵手了,问题是他们是如何在一起的呢?下面就是CSS与HTML沟通的重点所在了:
4.1 选择器
我们用到的选择器叫做类选择器,也就是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;}
5 更有趣的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
- 一步步搭建物联网系统——无处不在的Javascript
- 一小时快速搭建最小的物联网系统
- 快速搭建自己的物联网平台,zigbee协议(不会控制你的物联网系统)
- 自己动手搭建物联网系统之(1)
- Flask--物联网应用(三)-ESP8266网页调试系统
- Java连接MySQL数据库
- 背包问题:动态规划和贪心算法
- js继承如何实现继承?
- 常规FTP服务器配置案例
- HDOJ 5044 Tree
- 物联网系统的搭建(三)
- 进程、线程同步互斥学习 —— 事件
- 物联网系统的搭建(四)
- minecraft通过花生壳怎样开服?
- 学习1:Android框架
- 26-06-2015 Intro to Java Chapter 30 笔记
- Linux下解压缩包命令
- IOS--C 语言 Lesson Two Print 指针
- Android学习【Android内核编译之Linux通信环境搭建】