KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?
Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!
>>>> Tham khảo khóa học đã giúp mình tại:
[affegg id=8]
Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40
Còn bây giờ thì vào bài viết thôi!
là một công cụ rất mạnh, hoạt động tốt nhất khi được giữ ở mức đơn giản nhất có thể. Thật không may, có rất nhiều ứng dụng WYSIWYG và các trình soạn thảo CSS là một công cụ rất mạnh, hoạt động tốt nhất khi được giữ ở mức đơn giản nhất có thể. Thật không may, có rất nhiều ứng dụng WYSIWYG và các trình soạn thảo HTML khác tạo ra CSS đơn giản.
Một yêu cầu phổ biến là có thể hiển thị văn bản HTML trên một hình ảnh đã được nhúng trên trang. Có một số giải pháp hợp lệ sử dụng bảng hoặc CSS. Hãy cùng webaffiliatevn.com tìm hiểu !
1. Sử dụng TABLE để phủ văn bản lên hình ảnh
Giải pháp HTML đã có từ Netscape 3 và khá đơn giản để thực hiện, nhưng không quá linh hoạt như các tùy chọn gần đây.
Ví dụ:
<table width="500px" height="300px" background="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" cellpadding="5" cellspacing="0"> <tr> <td valign="bottom"> <p><b><font color="#ffffff"> (Đây là đoạn văn nằm trên hình ảnh) </font></b></p> </td> </tr> </table>
See the Pen abNZxVG by DavidKhai (@davidkhai) on CodePen.dark
Lưu ý: Nhiều năm trước đây là một cách tiếp cận mới lạ, nhưng ngày nay nó rất không được khuyến khích.
2. Sử dụng CSS để phủ văn bản lên hình ảnh
Quả thực có một giải pháp đơn giản hơn, linh hoạt hơn. Thay vì dùng BẢNG, chúng tôi sử dụng thuộc tính thẻ DIV và CSS để đặt văn bản lên hình ảnh.
Ví dụ:
<div style="position: relative; background: url(https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg); width: 500px; height: 300px;"> <div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;"> <p>(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)</p> </div> <p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;"> (Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải) </p> </div>
See the Pen GRZqLdK by DavidKhai (@davidkhai) on CodePen.dark
Như bạn có thể thấy, chúng tôi có thể đặt bất kỳ số phần tử con nào trong div. Trong trường hợp này, một div chứa các đoạn văn bản (dưới cùng bên trái) và một đoạn văn bản (trên cùng bên phải).
Nếu không có phần tử chứa , tất cả vị trí sẽ liên quan đến khung nhìn (góc của màn hình). Điều này kết hợp với position: fixed có thể tạo ra các phần tử nằm ở một góc của màn hình và không di chuyển khi trang cuộn
3. Tách thuộc tính style ra khỏi nội dung
Thông thường, bạn sẽ muốn có CSS của mình trong một tệp riêng biệt hoặc ít nhất đó là khối kiểu riêng thay vì cùng dòng với HTML. Điều này có thể dễ dàng đạt được bằng cách thêm các class CSS cho các phần tử chứa nội dung.
Ví dụ:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%0A%20%20.outer%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20background%3A%20url(https%3A%2F%2Fwebaffiliatevn.com%2Fwp-content%2Fuploads%2F2020%2F08%2Fanh-song-nui-thien-nhien.jpg)%3B%0A%20%20%20%20width%3A%20500px%3B%0A%20%20%20%20height%3A%20309px%3B%0A%20%20%7D%0A%20%20.bottomleft%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20left%3A%200.5em%3B%0A%20%20%20%20width%3A%20400px%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%7D%0A%20.topright%20%7B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20top%3A%201em%3B%0A%20%20%20%20right%3A%202em%3B%0A%20%20%20%20width%3A%20120px%3B%0A%20%20%20%20padding%3A%204px%3B%0A%20%20%20%20background-color%3A%20%23fff%3B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%20%20%20%20font-size%3A%2011px%3B%0A%20%20%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <div class="outer"> <div class="bottomleft"> <p>(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía dưới bên trái)</p> </div> <p class="topright">(Đây là đoạn text sẽ xuất hiện trên hình ở vị trí phía trên bên phải)</p> </div>
See the Pen XWdKQBE by DavidKhai (@davidkhai) on CodePen.dark
Kết quả là không đổi so với ví dụ trước, nhưng giờ đây việc duy trì dễ dàng hơn nhiều vì HTML và CSS có thể được chỉnh sửa độc lập.
4. Hiển thị văn bản trên hình ảnh khi di chuột
Đôi khi bạn chỉ muốn văn bản xuất hiện khi di chuột lên ảnh . Một cách hay để đạt được điều này là gói hình ảnh trong một liên kết và sử dụng thuộc tính title để lưu trữ chú thích chúng.
Trong ví dụ dưới đây, bạn có thể thấy điều này hoạt động. Chúng tôi đã đặt liên kết ngoài thành position: absolute và sử dụng thuộc tính tiêu đề attr (tiêu đề) để tạo một số nội dung được tạo và đặt nó trên hình ảnh.
Nội dung được tạo ban đầu có độ mờ opacity: 0 và sau đó được hiển thị bằng cách sử dụng trạng thái di chuột.
Tính năng làm mờ chậm có thể vẫn không hoạt động trong một số trình duyệt vì chúng không hỗ trợ hiệu ứng chuyển tiếp trên nội dung đã tạo. Nó sẽ mờ dần trong Firefox 23.0.
Ví dụ:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%0A%20%20a.hovertext%20%7B%0A%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20width%3A%20500px%3B%0A%20%20%20%20text-decoration%3A%20none%20!important%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%7D%0A%20%20a.hovertext%3A%3Aafter%20%7B%0A%20%20%20%20content%3A%20attr(title)%3B%0A%20%20%20%20position%3A%20absolute%3B%0A%20%20%20%20left%3A%200%3B%0A%20%20%20%20bottom%3A%200%3B%0A%20%20%20%20padding%3A%200.5em%2020px%3B%0A%20%20%20%20width%3A%20460px%3B%0A%20%20%20%20background%3A%20rgba(0%2C0%2C0%2C0.8)%3B%0A%20%20%20%20text-decoration%3A%20none%20!important%3B%0A%20%20%20%20color%3A%20%23fff%3B%0A%20%20%20%20opacity%3A%200%3B%0A%20%20%20%20-webkit-transition%3A%200.5s%3B%0A%20%20%20%20-moz-transition%3A%200.5s%3B%0A%20%20%20%20-o-transition%3A%200.5s%3B%0A%20%20%20%20-ms-transition%3A%200.5s%3B%0A%20%20%7D%0A%20%20a.hovertext%3Ahover%3A%3Aafter%2C%20a.hovertext%3Afocus%3A%3Aafter%20%7B%0A%20%20%20%20opacity%3A%201.0%3B%0A%20%20%7D%0A%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" /> <p><a class="hovertext" href="#" title="Đây là đoạn text sẽ xuất hiện khi hover vào hình ảnh"><img src="https://webaffiliatevn.com/wp-content/uploads/2020/08/anh-song-nui-thien-nhien.jpg" width="500" height="310" border="0" alt=""></a></p>
See the Pen dyMXLaL by DavidKhai (@davidkhai) on CodePen.dark
1/5 – (2 bình chọn)
