Zen コーディング CSS、HTML の略語を Daguan に置き換え、HTML と css_Experience の交換を素早く書く

この記事を読む前に、まず Web サイトの記事をよく読んでください。 HTML/CSS コードをすばやく作成する Zencoding の実装

コードをコピー コードは次のとおりです。

E
要素名 (div, p);
E#id
ID を使用する要素 (div#content) 、p #intro、span#error);
E.class
クラス要素 (div.header、p.error.critial) を使用します。idID: div#content.column と組み合わせて class を使用することもできます。 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);

zencoding は「api」を置き換えます。

zencoding はロシア人によって書かれたエディタ プラグインです (現在最も人気のあるエディタをサポートしています)。インストールも非常に簡単です。プラグインをインストールするだけで、次に、プロジェクト内のjsファイルをコピーするだけです。プロジェクトが公開されると、js ファイルは削除できます。フロントエンドエンジニアを煩雑なHTMLやCSSの構造コードから解放するのが主な目的ですが、覚えなければならない置換略語が多く、手動でやるより10回見たほうが良いという原則のもと、使っているうちに覚えるしかない。

CSS置換機能も非常に優れています。ただし、冗長で無駄な置換も多く、原作者が定義した実際の制作では無理な置換を修正しながら使っています。

後で zen_settings ファイルを送信し、置き換えコードを簡単に説明します。

最初は確かに少し不慣れで、書きながらこの構成を考える必要がありました。でも慣れてくると、書くときの気分を「スピード」という言葉でまとめることができるので、とても便利だと感じます。

その他の体験談については、参考にしてからゆっくりシェアしていきます。

Zen は、CSS セレクターの徹底的な模倣を特徴としています。 jquery セレクターは css セレクターからも学習されるため、これら 2 つのテクノロジに精通している人はすぐに使い始めることができます。詳細については、ソース Web サイトを参照してください。

HTML タグ置換の学習 -- ソース コードはパッケージ zen-settings.js にあります。一般的に使用されるもののほとんどをリストしましたが、あまり一般的に使用されないものはリストされていません。ソースを参照してください。前の行は手動入力、次の行はショートカット キー (alt E) を押した後の zen 出力、環境は Aptana 2.0.2:
が存在しなくなり、ファイルをダウンロードできません。
このファイルは 2009 年に最後に更新されました。この更新の主な内容は次のとおりです:

1. width が値と等しい後に単位を追加します。

2. よく使用される略語をより使いやすくします。

3. いくつかの新しい略語も追加されました。

この 2 日間で、CSS 置換機能のクレイジーな実験と改善を行ってきました。頻繁に使用される置換を簡略化しました。覚えにくいものについては、強調を使用して区別しています。今回の変更も 拡張ショートカットキーを alt s に変更します 普段 QQ メッセージを送るのにこの 2 つのキーを使っているので ctlr Enter、左手 Ctrl 右手 Enter の方が慣れています 右手を組み合わせるのが面倒ですCtrl Enterを押すと完了までに時間がかかりすぎるので、左手で完了する必要があります。私の経験を以下に共有させてください。最初の文字は元の要素、次の行は zen 拡張出力後の要素、などです。
元の zen では、css 属性と属性値は次のようになります。最初の文字がコロンで、その後に属性値が続きます。これが私の書き方です。簡略化しています。よく使用される属性は省略されています。たとえば、

コードをコピー コードは次のとおりです:

元のpはpadding、元のzenはposですが、面倒なのでppに落とし込み、その属性値にしています。
ppa
position:absolute;

ppr
position:relative;

同様のものがあります:
fl
float:left;
fr
float:right;
cb
clear:both;
db
display:block;
di
display:inline;
dib
display: inline-block;
ああ
overflow:hidden;

その他の CSS クラス:

コードをコピー コードは次のとおりです。 : div>

m
margin:;
mt
margin-top:;
mr
margin-right :; ml
margin-left:;
mb
margin-bottom:;

padding:;
pt、pr、pb、pl は margin と同じです
bg
background:url() 0 0 繰り返しなし;
bg:n
背景:なし;
bg:x
background:url() 0 0 繰り返し-x ;
bg: y
background:url() 0 0repeat-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');
ボーダー:1px ソリッド #000;
bd:n
ボーダー:なし;
bdc
ボーダーカラー:#000;
c
カラー:#000 ;
d display:block;
f
font-size:12px;
h:;
高さ:;
w
幅:;
d:i
表示:インライン;
d:b
表示:ブロック;
fl
float:left;
fr
float:right;
cl クリア:両方;
c:l
クリア:左;
c:r
クリア:右;
c:n
クリア:なし;
t 上:; bt
下:;
r
右:;
l
左:;
r
右:;
z z-index: ;
v
visibility:hidden;
o:h
overflow:hidden;
zoo
zoom:1;
m:a
margin:0 auto;
ol
outline:;
q
quotes:;
tc
text-align:center;
tl
text-align: left;
tr
text-align:right;
td
text-decoration:none;
te
text-emphasis:;
to:n
text -outline:none; whs:n
white-space:normal;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-すべて;
fz
font-size:12px;
fw
font-weight:bold;
ff
font-family:;
op
不透明度:;
c:p
cursor:pointer;

html クラス:
総合クラス: div#a div#b div.c-$*5 li*10

コードをコピーします コードは次のとおりです:

div>

div>

li>

li>

li>

リ>

div#width>p#a>p#a>p*10>p#a

复制代代码如下:

ul#a>li.c-$*5 li.0>a.title
复制代代码如下:

• 
  
• 
  
• 
  
• 
  
• 
  

html:xt

复制代码代码如下: div>

aaa

さらに多くの

复制代码代幣如下:

cc:ie6

cc:ie

cc:noie

aa


link:css

a:mail

meta:utf

リンク

style
スクリプト

script:src

img

iframe
埋め込み

オブジェクト

一般的に使用されるショートカット キーは次のように変更されます:

省略形で囲む: alt x

切り替えコメント : alt 1

マッチ ペア:alt D

マッチング ペアに移動:alt s

また、Aptana ツールを推奨する理由は次のとおりです。
>
1. ショートカット キーのサポートが非常に充実しています。

たとえば、より一般的に使用される 1 行の削除: ctrl D;

書式設定: ctrlShift F;

1 行のコピー: ctrl alt pageup

一行移動：alt pageup

2. jsプロンプトは現在フロントで受け付けているツールの中では比較的強力で、firebugと組み合わせられるという特徴もあります。 Firefox では、ブレークポイントを使用してプログラムの実行プロセスを追跡し、変数をリアルタイムで表示できます。その価値は非常に優れています。

3. 現在の推奨事項の最も強力な理由は、Zen コーディングと組み合わせることで作業を電光石火のように高速化できることです。

欠点:

1. このツールは比較的強力であるため、多くのメモリを消費しますが、現在のハードウェア価格では、基本的に 2G のメモリが許容されます。

2. 最新バージョン 2.0.2 は純粋な緑色のバージョンですが、インストール前に sun の jdk をインストールする必要があります。これは頭痛の種であり、多くの設定が必要です。フロントスタッフは困惑した表情をしていたに違いない。

3. 組み込みのブラウズ方法は比較的遅く、純粋に静的なページですが、なぜこれほど複雑なので、ローカルでブラウズするだけです。

著作権に注意し、http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.htmlを転載する場合は出典を明記してください。