Tìm hiểu một số cách lưu secrets key, api key trong Android Các ứng ...
Mình đang xây dựng nhóm "anh Thầy & Đồng bọn (Hỏi đáp, chia sẻ kiến thức)" mục đích để các bạn có một nơi giao lưu trao đổi.
Đội MOD của group và mọi người sẽ hỗ trợ bạn ngay lập tức.
Join ở đây nè: https://www.facebook.com/groups/anhthayvadongbon
Bài viết: EMMET – Hỗ trợ viết tắt nhanh & gọn HTML, CSS cho Developer
Lượt xem: 2861 lượt xem
EMMET là bộ phím tắt, quy tắc và các phím tắt nhằm giảm tối thiểu thời gian của các lập trình viên trong quá trình viết code. EMMET có thể có sẵn trên các code editor như PhpStorm hoặc bạn cần cài plugin.
Để hình dung rõ hơn, ví dụ ta có đoạn code sau:
<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
Khi sử dụng EMMET, ta chỉ cần nhập dòng sau trong code và gõ “Tab” là markup hiện ra:
#page>div.logo+ul#navigation>li*5>a{Item $}
Các thẻ thông thường được viết trong ngoặc <tag>..</tag> như thế này, ví dụ <p></p>
Trong EMMET sẽ tối giản chỉ còn tên của thẻ. VD: a
hoặc div
, và các ký tự phải viết liền nhau.
>
để tạo element theo mối quan hệ cha-conVD: body>div>ul>li>p
được hiểu là:
body
chứa div
div
chứa ul
ul
chứa li
li
chứa p
^
để tìm lại cha của elementVD: body>div>ul>li>p^^^p
khi thêm vào sẽ được hiểu là từ p
tìm ngược lại 3 cấp chính là thẻ : div
, sau đó thêm thẻ p
cùng cấp với thẻ div
<body> <div> <ul> <li> <p></p> </li> </div> <p></p> </body>
+
để tìm element cùng cấpVí dụ: div>p+span
được hiểu là thẻ p và span cùng cấp với nhau, đi liền với nhau theo thứ tự.
()
để nhóm các elementThẻ được nhóm bên trong ()
logic sẽ được ưu tiên, do vậy khi sử dụng các dấu logic bên ngoài sẽ tương tác với nhóm thẻ đó chứ không phải chỉ một thẻ trong nhóm.
Ví dụ 1: (div>ul>li*2+p)
sẽ cho kết quả output là
<div> <ul> <li></li> <p></p> <li></li> <p></p> </ul> </div>
Ví dụ 2: (div>ul>li*2)+p
sẽ cho kết quả output là
<div> <ul> <li></li> <li></li> </ul> </div> <p></p>
Sử dụng dấu *
để hiển thị số item được copy ra, ví dụ li*3
sẽ output ra là:
<li></li> <li></li> <li></li>
Kết hợp với dấu ()
ở trên thì ta sẽ tạo ra 3 nhóm, ví dụ: (p>span)*3 sẽ output ra là:
<p><span></span></p> <p><span></span></p> <p><span></span></p>
class
và id
cho elementĐể thêm class, bạn thêm .tên_class
vào ngay sau element.
Ví dụ: div.hero
Để thêm id, bạn thêm #tên_id
vào ngay sau element.
Ví dụ: ul#menu
Lưu ý: Nếu chỉ viết .class-name
hay #id-name
thì EMMET tự mặc định thẻ chứa class/id phụ thuộc vào thẻ cha bên ngoài. Thẻ cha là <ul> thì thẻ chứa class/id là <li>, thẻ cha là <div> thì thẻ con là </div>
data-attribute
cho elementCác thuộc tính khác viết trong ký tự ngoặc vuông []
, nội dung text của thẻ được viết trong {}
Ví dụ 1:
td[title="Hello world!" colspan=3]
sẽ hiển thị ra là:
<td title="Hello world!" colspan="3"></td>
Ví dụ 2:
a>{click}+b{here}
sẽ hiển thị ra là:
<a href="">click<b>here</b></a>
Bạn có thể nhập p*2>lorem
hoặc p*2>lipsum
sẽ có đoạn code như sau:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p> <p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
Khác với markup HTML, trong CSS EMMET cho phép ta viết tắt ít hơn. Dưới đây là những thứ bạn nên sử dụng để viết code CSS nhanh hơn:
Ví dụ:
Bạn gõ mt50
để output ra margin-top: 50px
Với giá nhiều trị âm thì nhập m-10ex--5ex
sẽ output ra là margin: -10ex -5ex
Với các giá trị bình thường thì có thể nhập p10-20
sẽ output ra là padding: 10px 20px
Các ví dụ khác:
w100p
sẽ output ra: width: 100%
fw500
sẽ output ra: font-weight: 500
bd5#0s
sẽ output ra border: 5px #000 solid
c#f
sẽ output ra color: #fff
lh2
sẽ output ra line-height: 2
fs#i!
sẽ output ra font-style: italic !important
bg#f
sẽ output ra background: #fff
Nếu bạn vẫn đang nhập tay nhiều, hãy tới lúc thay đổi! EMMET giúp bạn lười nhưng hợp lý, tiết kiệm và quen tay thì lại càng thấy ích lợi đấy nhé!
Nguồn: codetot.net
Bạn có muốn xác nhận hoàn thành bài học này không?