Zen Coding CSS, html 약어를 Daguan으로 바꾸고 html과 css_Experience 교환을 빠르게 작성

WBOY
풀어 주다: 2016-05-16 12:04:05
원래의
1648명이 탐색했습니다.

이 글을 읽기 전에 먼저 홈페이지 글을 주의 깊게 읽어보세요. HTML/CSS 코드를 빠르게 작성하는 Zen Coding 구현

코드 복사 코드는 다음과 같습니다.

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 코딩 디스플레이 'api'를 대체합니다.

zen 코딩은 러시아인이 작성한 편집기 플러그인입니다(현재 가장 널리 사용되는 편집기 지원). 플러그인을 설치한 다음 js를 복사하기만 하면 됩니다. 프로젝트 그냥 파일. 프로젝트가 게시되면 js 파일이 삭제될 수 있습니다. 주요 임무는 지루한 HTML 및 CSS 구조 코드에서 프런트엔드 엔지니어를 해방시키는 것이지만, 수동으로 수행하는 것보다 열 번 보는 것이 낫다는 원칙에 따라 외워야 할 대체 약어가 많습니다. 사용하는 동안에만 기억할 수 있습니다.

CSS 교체 기능도 아주 좋습니다. 하지만 그 안에는 중복되고 쓸모없는 대체도 많이 있습니다. 실제 제작에서 불합리한 원저자가 정의한 대체를 수정하면서 사용하고 있습니다.

zen_settings 파일은 추후 전송될 예정이며, 대체 코드에 대해 간략하게 설명하겠습니다.

처음에는 확실히 좀 낯설어서 글을 쓰면서 구조를 생각해야 했어요. 하지만 익숙해지고 나면 글을 쓸 때 기분을 요약하는 데 '속도'라는 단어를 사용할 수 있어 매우 편리합니다.

기타 경험과 경험에 대해서는 참고용으로 활용한 후 천천히 공유하겠습니다.

zen 기능은 CSS 선택기를 크게 모방한 것입니다. jquery 선택기는 CSS 선택기에서도 학습되므로 이 두 기술에 익숙한 사람은 빠르게 시작할 수 있습니다. 자세한 내용은 출처 홈페이지를 참고하시기 바랍니다.

그 중 html 태그 대체 학습 - 소스 코드는 zen-settings.js 패키지에 있습니다. 일반적으로 사용되는 대부분을 나열했으며 덜 일반적으로 사용되는 일부는 나열하지 않았습니다. 이전 줄은 수동 입력이고, 다음 줄은 단축키(alt+E)를 누른 후의 zen 출력이며, 환경은 Aptana 2.0.2:
더 이상 존재하지 않으며 파일을 다운로드할 수 없습니다. .
이 파일은 2009년에 마지막으로 업데이트되었습니다. 이 업데이트의 주요 내용은 다음과 같습니다.

1. 너비가 값과 같을 때 단위를 추가합니다.

2. 자주 사용되는 약어를 더욱 사용자 친화적으로 만듭니다.

3. 또한 몇 가지 새로운 약어가 추가되었습니다.

지난 이틀 동안 우리는 CSS 교체 기능을 열심히 테스트하고 개선했습니다. 너무 자주 사용되는 교체를 단순화하여 기억하기 어려운 부분을 구분합니다. 이번 변경 사항은 확장 단축키를 alt+s로 변경한 것입니다. 왜냐하면 저는 QQ에서 메시지를 보낼 때 주로 이 두 키를 사용하기 때문입니다. ctlr + enter, 왼손 ctrl 및 오른손 enter를 결합하는 것은 너무 번거롭습니다. 오른손 ctrl + enter 완료하는데 시간이 너무 오래 걸려서 왼손으로 끝내야 합니다. 제 경험을 다음과 같이 공유하겠습니다. 첫 번째 문자는 원본 요소이고 다음 줄은 zen 확장 출력 후의 요소입니다.
원본 zen에서는 CSS 속성과 속성 값이 첫 번째입니다. 콜론 다음에 속성 값을 입력합니다. 단순화된 내용입니다. 일반적으로 사용되는 속성은 축약됩니다. 예를 들어
코드 복사 코드는 다음과 같습니다.

원래 p는 패딩이고, 그리고 원래의 zen은 pos입니다. 너무 번거로워서 pp로 줄인 다음 그 속성 값으로 줄였습니다.
ppa
위치:절대;

ppr
위치:상대적;

비슷한 것이 있습니다:
fl
float:left; fr
float:right;
cb
clear:both
db
display:block;
di
display: inline-block;

overflow:hidden


다른 CSS 클래스:


코드 복사코드는 다음과 같습니다.

m
여백:;
mt
margin-top:;
mr
여백-오른쪽:;
ml
여백-왼쪽:;
mb
여백-하단:;

패딩:;
pt,pr,pb,pl동여백
bg
background:url() 0 0 반복 없음;
bg:n
배경:없음;
bg:x
배경:url() 0 0 반복-x;
bg:y
배경:url() 0 0 반복-y;
bg:ie
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png');

테두리:1px 솔리드 #000;
bd:n
테두리:없음;
bdc
border-color:#000;
c
색상:#000;
d
디스플레이:블록;
f
글꼴 크기:12px;
아:;
키:;
w
너비:;
d:i
디스플레이:인라인;
d:b
디스플레이:블록;
fl
float:왼쪽;
fr
float:right;
cl
clear:둘 다;
c:l
clear:left;
c:r
clear:right;
c:n
clear:none;
t
위:;
bt
하단:;
r
맞습니다:;
l
왼쪽:;
r
맞습니다:;
z
z-색인:;
v
가시성:숨김;
o:h
오버플로:숨김;
동물원
zoom:1;
m:a
여백:0 자동;
ol
개요:;
q
인용문:;
tc
텍스트 정렬:가운데;
tl
텍스트 정렬:왼쪽;
tr
text-align:right;
td
텍스트 장식:없음;
te
텍스트 강조:;
to:n
text-outline:none;
whs:n
공백:일반;
whs:nw
white-space:nowrap;
wob:k
word-break:keep-all;
fz
글꼴 크기:12px;
fw
font-weight:bold;
ff
글꼴군:;
op
불투명도:;
c:p
커서:포인터;

html类:
综합类:div#a+div#b+div.c-$*5+li*10
复主代码 代码如下:



















  • div#width>p#a>p#a>p*10>p#a
    复主代码 代码如下:














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










    html:xt
    复代码 代码如下:




    <머리>
    <제목>


    <본문>
    아아아



    더 많은
    复代码 代码如下:

    cc:ie6

    cc:ie

    cc:noie

    아아


    링크:css

    a:메일

    meta:utf

    링크

    스타일

    script

    script:src

    img

    iframe

    einbetten

    Objekt

    param

    Karte

    Bereich

    Formular

    form:get

    form:post

    label

    Eingabe

    input:hidden

    input:h

    input:text

    input:t

    input:search

    input:email

    input:url

    input:p

    input:date

    input:datetime

    input:month

    input:week

    input:time

    input:number

    input:color

    input:checkbox

    input:c

    input:radio

    input:r

    input:f

    input:s

    input:i

    input:reset

    input:button

    input:b

    wählen

    Option

    textarea

    menu:c

    bq

    cap

    optg

    opt

    fst

    Bein

    sekte

    tarea

    hdr


    ol+



    ul+



    dl+




    map+

    Tabelle+





    tr+



    wählen

    optgroup+

    optg+

    leer


    Die häufig verwendeten Tastenkombinationen wurden wie folgt geändert:

    Mit Abkürzung umbrechen: alt+x

    Kommentar umschalten: alt+1

    Paar abgleichen: alt+D

    Gehe zu Matching Pair: alt+s

    Darüber hinaus gibt es folgende Gründe für die Empfehlung des Aptana-Tools:

    1. Die Tastenkombinationsunterstützung ist sehr umfassend.

    Zum Beispiel das häufiger verwendete Löschen einer einzelnen Zeile: Strg + D;

    Formatierung: Strg + Umschalt + F;

    Kopieren einer einzelnen Zeile: Strg + alt + pageup

    Eine einzelne Zeile verschieben: alt + pageup

    2. js-Eingabeaufforderungen sind unter den derzeit von der Rezeption akzeptierten Tools relativ leistungsfähig. Eine weitere Funktion ist, dass sie mit Firebug in Firefox kombiniert werden Um die Programmausführung mit Haltepunkten zu verfolgen, ist die sofortige Anzeige von Variablenwerten sehr praktisch.

    3. Der wichtigste Grund für die aktuelle Empfehlung ist, dass sie mit Zen-Codierung kombiniert werden kann, um Ihre Arbeit blitzschnell zu machen.

    Die Nachteile:

    1. Da das Tool relativ leistungsstark ist, benötigt es viel Speicherverbrauch, aber beim aktuellen Hardwarepreis sind 2G Speicher grundsätzlich akzeptabel.

    2. Obwohl die neueste Version 2.0.2 eine reine grüne Version ist, müssen Sie vor der Installation das JDK installieren. Das Personal an der Rezeption muss verwirrt ausgesehen haben.

    3. Die integrierte Browsing-Methode ist eine relativ langsame, rein statische Seite. Warum ist sie so kompliziert? Durchsuchen Sie sie einfach lokal.

    Achten Sie auf das Urheberrecht, geben Sie beim Nachdruck bitte die Quelle an http://www.cnblogs.com/jikey/archive/2009/12/19/1628002.html.

    관련 라벨:
    원천:php.cn
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    인기 튜토리얼
    더>
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿