Hướng dẫn em trong html
1) Thẻ trong HTML- Thẻ dùng để xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng. Show Khi đó, màn hình trình duyệt sẽ hiển thị: - Lưu ý: Thẻ có chức năng giống với thẻ . Tuy nhiên, về mặt làm SEO website thì thẻ hỗ trợ tốt hơn. 2) Định dạng CSS mặc định- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau: 1) Thẻ trong HTML- Thẻ dùng để xác định một đoạn văn bản được định dạng kiểu chữ in nghiêng. Nội dung chính Show
Khi đó, màn hình trình duyệt sẽ hiển thị: - Lưu ý: Thẻ có chức năng giống với thẻ . Tuy nhiên, về mặt làm SEO website thì thẻ hỗ trợ tốt hơn. 2) Định dạng CSS mặc định- Hầu hết các trình duyệt sẽ hiển thị phần tử với định dạng CSS như sau: Nếu là một người thường xuyên soạn thảo văn bản cho website, chắc chắn bạn đã quen thuộc với thẻ em trong HTML. Tuy nhiên, liệu bạn đã hiểu rõ về loại thẻ định dạng này, cũng như cách sử dụng chính xác? Hãy cùng giải đáp những thắc mắc trên qua bài viết dưới đây. Mục lục
1. Khái niệm thẻ em trong HTMLKhái niệm thẻ em trong HTML?Là một trong số các công cụ định dạng văn bản, thẻ trong HTML hỗ trợ người dùng xác định một đoạn nội dung nào đó dưới dạng chữ in nghiêng. 2. Sự khác biệt giữa thẻ em và thẻ iSự khác biệt giữa thẻ em và thẻ i trong HTMLTrong HTML, người sử dụng sẽ được cung cấp sẵn 2 loại thẻ in nghiêng là và với hiển thị hoàn toàn giống nhau trên trình duyệt. Dù vậy, về mức độ ưu tiên, thẻ vẫn được nhiều người lựa chọn hơn bởi khả năng nhấn mạnh tầm quan trọng của nội dung, khiến người đọc không thể bỏ qua. 3. Khi nào nên sử dụng thẻ emKhi nào nên sử dụng thẻ em?Trước khi quyết định sử dụng bất cứ loại thẻ định dạng nào, người dùng cần cân nhắc kỹ càng về mặt hình thức cũng như ý nghĩa, để tránh gây mất tập trung cho người đọc. Dưới đây là một số trường hợp mà bạn nên gắn thẻ em:
Nhờ vậy, người đọc sẽ biết được những thông tin nào cần lưu ý và tra cứu một cách nhanh chóng hơn. Học soạn thảo văn bản chưa bao giờ là một việc đơn giản. Do đó, bạn hãy bắt đầu luyện tập từ những điều nhỏ nhất, như ứng dụng thẻ em trong HTML. Từ đó tạo nên được một nội dung thu hút và hấp dẫn người đọc. Đã đăng vào thg 7 21, 2019 1:15 CH 4 phút đọc Có không ít các bạn khi code web thường sử đơn vị css làm sao để code trên desktop mà khi view trên mobile không bị vỡ layout, cơ chữ do đơn vị cố định cho các element... Có một vài đơn vị như %, px, vw, vh, pt, em, rem, ... thì có 2 đơn vị luôn làm nhiều bạn trong đó có cả mình nhầm lần chưa biết cách sử dụng nó vào việc responsive. Thì để giải quyết vấn đề trên thì mình sẽ chia sẻ 1 chút về cách dùng 2 đơn vị này nhằm giúp các bạn có thể hiểu rõ và áp dụng chúng vào việc code giao diện. Khái niệm về đơn vị em và remem: là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size rem: là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website ở đây là thẻ Sử dụng thực tếMình nghĩ là các bạn nhìn vào sơ đồ chắc vẫn chưa hiểu lắm. Mình lần đầu cũng vậy thôi. Và muốn hiểu được nó chúng ta phải bắt tay vào code thôi. Các bạn hãy xem ví dụ demo nho nhỏ để dễ hình dung nhé. Đầu tiên là Tiếp đến là Và đây là kết quả
Giải thích chi tiếtĐầu tiên mình tạo html layout gồm có 1 div có class container bọc ngoài và có 2 div bên trong tương ứng với class em rem sau đó mình set cho thẻ Cho nên lúc này 1em = 1rem = 15px. Như các bạn nhìn vào demo ở trên thì 2 ô đều bằng nhau là 10(em-rem) x 15px = 150px của mỗi ô. Mình xin giải thích là vì do lúc này chính nó(class em) và phần tử cha chứa nó là thẻ div có class container mình chưa set thuộc tính font-size nên nó sẽ phụ thuộc phần tử lớn hơn ở ngoài đó là thẻ Tuy nhiên bây giờ mình sẽ set cái thuộc tính font-size của thẻ div có class container là 20px thì chắn chắn sẽ có thay đổi. Các bạn nhìn dưới đây nha. Ô màu đỏ có đơn vị em sẽ to hơn ban đầu vì như mình đã nói ở trên là đơn vị em phụ thuộc vào giá trị thuộc tính font-size của chính nó hoặc phần tử cha trực tiếp chứa nó. Cho nên lúc này ô màu đỏ sẽ có kích thước là 10em x 20px = 200px. Còn ô màu xanh(rem) do
phụ thuộc vào thẻ Lời kếtHi vọng với giải thích và ví dụ demo của mình sẽ giúp các bạn dễ dàng hiểu hơn về 2 đơn vị em và rem này. Cám ơn các bạn đã đọc và chúc các bạn một ngày làm việc tốt lành. All rights reserved |
