be a geek-从零开始学编程:无处不在的css 1
无处不在的CSS
CSS或许你觉得他一点儿也不重要,HTML好比是建筑的框架,CSS就是用于装修房子。那么Javascript呢,我听到的最有趣的说法是小三,先让我们回到代码上来吧。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。
关于CSS
这不是一篇好的关于讲述CSS的书籍,所以不会去说CSS是怎么来的,有些东西既然我们可以很容易从其他地方知道,也就不需要花太多时间去重复。诸如重构等这些的目的之一也在于去除重复的代码,不过有些重复是不可少的,也是有必要的,而通常这些东西可能是由其他地方复制过来的。到目前为止我们没有依赖于任何特殊的硬件或者是软件,对于我们来说我们最基本的需求就是一台电脑,或者可以是你的平板电脑,当然也可以是你的智能手机,因为他们都有个浏览器,而这些都是能用的,对于我们的CSS来说也不会有例外的。
CSS是来自于(Cascading Style Sheets),到今天我也没有记得他的全称,CSS还有一个中文名字是层叠式样式表,翻译成什么样的可能并不是我们关心的内容,我们需要关心的是他能做些什么。作为三剑客之一,它的主要目的在于可以让我们方便灵活地去控制Web页面的外观表现。我们可以用它做出像淘宝一样复杂的界面,也可以像我们的书本一样简单,不过如果要和我们书本一样简单的话,可能不需要用到CSS。HTML一开始就是依照报纸的格式而设计的,我们还可以继续用上面说到的编辑器,又或者是其他的。如果你喜欢DreamWeaver那也不错,不过一开始使用IDE可无助于我们写出良好的代码。
忘说了,CSS也是有版本的,和windows,Linux内核等等一样,但是更新可能没有那么频繁,HTML也是有版本的,JS也是有版本的,复杂的东西不是当前考虑的内容。
代码结构
对于我们的上面的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}
没有什么会比一开始不理解那是正则表达式,然后去修改上面的代码,为的是去从一堆数据中找出某日/某月/某年。这门语言可能是为设计师而设计的,但是设计师大部分还是不懂编程的,不过相对来说还是比其他语言好理解一些。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。