Preface
Ajax in Action, 好厚一本书, 大学写论文的时候当参考资料翻译看了一点, 现在继续, 笔记一下, less i forget
1 JavaScript: The central player
An Ajax application downloads a complete client into memory, combining data and presentation
and program logic, and JavaScript is the tool used to implement that logic.
- Loosely typed: 不指定类型
- Interpreted: 中间语言
- General purpose: 适用算法和编程
2 CSS(Cascading Style Sheets) 级联样式单
2.1 CSS selectors
2.1.1 element-based selectors
选择html tag 应用CSS
div h1 { color: red; }
将对<div>中所有<H1>适用
2.1.2 additional style class
.callout { border: solid blue 1px; background-color: cyan }
需要在 tag 中指定
<div>I’ll appear as a normal bit of text</div>
<div class=’callout’>And I’ll appear as a callout!</div>
而且还可以在 tag 中加多个 style class
<div class=’callout loud’>
And I’ll appear as an unappealing mixture of both!
</div>
2.1.3 combine classes with element-based rules
还可以绑定style class 到指定标签
span.highlight { background-color: yellow }
只有声明 highlight 的 span 标签才适用这个样式
再复杂点
div.prose span.highlight { background-color: yellow }
只选择
<div class=”prose “>
<span class=”highlight” ………/>
</div class=”prose “>
中span中的内容适用式样
2.1.4 apply only to an element with a given unique ID
按 ID 选择
#close { color: red }
只选择 id=”close” 的 tag
2.1.5 pseudo-selectors
浏览器定义了一些 pseudo-selectors
如
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
会把所有 element 的头字母 弄成更大而且是红色
而CSS可以基于这个 pseudo-selectors 自定义样式单
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
现在这个样式会只适用到 声明过class=”illuminated” 的 <p> 标签
其他还有一些有用的 pseudo-selectors,如first-line, hover
hove 会作用于鼠标下超链接
a:hover{ color:yellow; }
就会使所鼠标下的 <a> 标签变黄
2.2 CSS style properties
属性, 每个 tag 上都可以适用很多属性, 先来看这几个
.robotic{
font-size: 14pt;
font-family: courier new, courier, monospace;
font-weight: bold;
color: gray;
}
指定字体 font 和 color, 可以写的更简单点
.robotic{
font: bold 14pt courier new, courier, monospace;
color: gray;
}
我们来举个例子看怎样使用 CSS.
2.3 A simple CSS example
首先来看一下用完 CSS 的效果, 使用 CSS 完成类似 windows explorer 的效果的widget.
现在开始分析, 从哪下手
Using CSS for layout
当然一眼过去可以分成2个部分, window, items
div.window{
position: absolute;
overflow: auto;
margin: 8px;
padding: 0px;
width: 420px;
height: 280px;
}div.item{
position: relative;
height: 64px;
width: 56px;
float: left;
padding: 0px;
margin: 8px;
}
然后, 每个items都还有个items名
div.item div.itemName{
margin-top: 48px;
font: 10px verdana, arial, helvetica;
text-align: center;
}
当然不同种类的items还有不同的图标
div.folder{
background:
transparent url(images/folder.png)
top left no-repeat;
}
div.file{
background:
transparent url(images/file.png)
top left no-repeat;
}
div.special{
background:
transparent url(images/folder_important.png)
top left no-repeat;
}
差点把标题栏忘了
div.titlebar{
background-color: #0066aa;
background-image: url(images/titlebar_bg.png);
background-repeat: repeat-x;
…
}
Tags: Ajax, CSS, DOM, javascript, XML
