Zen Coding CSS, html 약어를 Daguan으로 바꾸고 html과 css_Experience 교환을 빠르게 작성
- WBOY원래의
- 2016-05-16 12:04:051677검색
이 글을 읽기 전에 먼저 홈페이지 글을 주의 깊게 읽어보세요. 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
html:xt
<머리>
<제목>
<본문>
아아아
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
复代码 代码如下:
<머리>
<제목>
<본문>
아아아