Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Zen Coding.
Search
cssrain
September 02, 2014
Technology
0
95
Zen Coding.
一种快速编写代码的方法
cssrain
September 02, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
430
解读HTML
cssrain
0
130
解读HTML5
cssrain
2
150
基础CSS(1)
cssrain
0
130
基础CSS(2)
cssrain
0
96
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
86
PhoneGap实践
cssrain
0
67
Other Decks in Technology
See All in Technology
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
440
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
200
自動テストのコストと向き合ってみた
qa
0
210
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
230
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
160
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
120
Developer Advocate / Community Managerなるには?
tsho
0
110
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
4
350
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Invisible Side of Design
smashingmag
301
51k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
GraphQLとの向き合い方2022年版
quramy
49
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Practical Orchestrator
shlominoach
190
11k
Visualization
eitanlees
148
16k
Transcript
Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io
哪些原因导致你写HTML变慢? • 很长,难记标签代码 (doctype) • 丌常写,丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title)
• Html的所有属性,括号,引用都要写完整 (dl+) • ……
记得它吗,能写出来吗? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF- 8" /> <title></title> </head> <body> </body> </html>
html:xt 演示
有什么方式快速写出? <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div>
div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示
太复杂?拆开来 <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div> div#content > ( div.page_top > p.hdwrap+h1 ) + div.column*2
丌就是CSS嘛 E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(div.header,
p.error.critial). 你也可以联合使用class和idID: div#content.column.width; E>N 子代元素(div>p, div#footer>p>span); E+N 兄弟元素(h1+p, div#header+div#content+div#footer); E*N 元素倍增(ul#nav>li*5>a); E$*N 条目编号 (ul#nav>li.item-$*5);
这就是Zen Coding 由两个核心组件组成: • 一个缩写扩展器(缩写为像CSS一样的选择器) • 上下文无关的HTML标签对匹配器
支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ
IDEA/WebStorm/PHPStorm • Aptana • Dreamweaver , Sublime Text,Editplus……
Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/
Q&A 谢谢聆听