EMMET: Tăng nhanh tốc độ code HMLT/CSS
HTML
18
CSS
32
EMMET
1
White

lotus viết ngày 20/04/2017

Emmet là gì?

  • Emmet là một plugin cho các code editor phổ biến như Sublime text, atom, bracket,…
  • Emmet giúp việc code html và css nhanh hơn và đơn giản hơn. Thay vì phải gõ từng tag, mở tag, đóng tag, copy và paste, emmet định nghĩa các cú pháp kiểu viết tắt và sẽ tự động chuyển thành code hmtl/css.

Các cú pháp cơ bản

1. Tạo file html5 mẫu
html:5 + Tab
2. Tạo tag
tag_name + tab
3. Tạo tag có name và id
div.banner#header + tab

Kết quả:

<div class="banner" id="header"></div>
4. Lặp lại
div*3 + tab

Kết quả:

<div></div>
<div></div>
<div></div>
5. Lồng nhau:
div>h1[color='red']{hello}+div>a.link$*3    

> : tạo thẻ nhỏ hơn
+ : tạo thẻ ngang bằng
[] : tạo thuộc tính
{} : tạo nội dung
$ : tự động đánh sốsố

Kết quả:

<div>
    <h1 color="red">hello</h1>
    <div>
        <a href="" class="link1"></a>
        <a href="" class="link2"></a>
        <a href="" class="link3"></a>
    </div>
</div>
6. Tag ngầm :
.container
<div class="container"></div>
p>.item
<p><span class="item"></span></p>
ul>.item$*2
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
</ul>
table>.row>.col
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>
7. Lorem - sinh nội dung tự đông :
lorem + numbers(số lượng từ)  + tab

ví dụ

lorem2 + tab 

Kết quả:

Lorem ipsum.

Tham khảo

Trên đây chỉ là 20% những thứ cơ bản nhất của Emmet. Nếu bạn nào muốn tìm hiểu thêm thì hãy vào đây:
Trang chủ Emmet :smile:
Udemy - Free :wink:

Hakisaman: 20-04-2017 at :clock5:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

lotus

7 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
5 2
Toán tử 3 ngôi Longhand const x = 20; let big; if (x 10) { big = true; } else { big = false; } Shorthand
lotus viết 8 tháng trước
5 2
White
2 1
Tôi bắt đầu tự hỏi, rằng có tồn tại không, một kỹ năng giúp ta đối mặt với mọi thứ trong cuộc sống. Nếu có thì nó là gì và làm sao để phát triển?...
lotus viết 10 tháng trước
2 1
White
1 0
Thành phần Có 3 thành phần chính trong redux: Store: Lưu trữ các trạng thái(State) của ứng dụng Action: Hành động của người dùng Reducer: Th...
lotus viết 10 tháng trước
1 0
Bài viết liên quan
White
17 7
(Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) (Ảnh) Like status gốc để hóng phần 2 nhé :P. (Link)
Huy Hoàng Phạm viết 1 năm trước
17 7
White
10 5
Bạn nhìn hình dưới đây, nếu app của bạn xuất hiện nhiều khối blockgrid thế này thì mình nghĩ bạn nên viết nó thành 1 component CSS. Trong phần này...
My Mai viết gần 3 năm trước
10 5
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
2 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!