Học HTML, CSS từ Zero Tới Hero
Tóm tắt
- CSS là ngôn ngữ giúp định dạng lại “styles” của nội dung được đánh dấu/bao bọc bởi HTML.
- Chrome DevTools là công cụ dành cho nhà phát triển. Trong khóa học này chúng ta sẽ sử dụng Chrome DevTools để kiểm tra các phần tử/các thẻ HTML, các thuộc tính CSS trên mỗi phần tử, v.v nhằm tìm ra vấn đề và đưa ra phương án khắc phục, sửa chữa khi gặp lỗi trong quá trình xây dựng trang web.
- Những thay đổi/chỉnh sửa trên các phần tử thông qua DevTools sẽ không làm thay đổi nội dung thực sự của trang web (những thay đổi sẽ biến mất khi tải lại trang).
- Có 3 cách sử dụng CSS là: External CSS, Internal CSS và Inline CSS.
- External CSS: Sử dụng thẻ
<link> để liên kết tới file CSS ở bên ngoài.
- Internal CSS: Sử dụng thẻ
<style> đặt trong thẻ <head> của file HTML.
- Inline CSS: Sử dụng thuộc tính
style trong thẻ mở của các thẻ HTML.
- Inline CSS được ưu tiên nhất trong 3 cách sử dụng. Với External CSS và Internal CSS thì cách nào được sử dụng sau (mới hơn) sẽ được ưu tiên hơn.
- Thẻ
<link> được sử dụng để tạo mối quan hệ giữa trang web và các tài nguyên bên ngoài. Ví dụ: sử dụng External CSS, hiển thị Favicon, v.v
- Các tình huống phổ biến sử dụng thẻ
<link>:
- Sử dụng External CSS
- Sử dụng ảnh làm Favicon
- Tối ưu kết nối trước (preconnect) cho các liên kết tài nguyên khác khác tên miền. Ví dụ: các liên kết lấy từ CDN như: Google fonts, PrismJS, v.v.
- Trang web stackblitz.com giúp tạo và lưu trữ các dự án web online. Hữu ích khi muốn tạo nhanh dự án làm ví dụ, hoặc thậm chí làm dự án web online mà không cần cài đặt thêm các công cụ khác trên máy tính.
- Sử dụng CSS Prefix (tiền tố trong CSS) cho một số thuộc tính CSS có thể hoạt động trên nhiều trình duyệt hơn. Các tiền tố thường sử dụng bao gồm:
-webkit-, -moz-, -ms-, -o-, bạn có thể tham khảo thêm tại: Vendor Prefix.
- Cách đơn giản nhất để thêm CSS Prefix thủ công đó là: trước tiên hãy viết CSS không có
prefix, sau đó sử dụng trang web autoprefixer.github.io và dán (paste) CSS của bạn vào để nhận lại CSS có đầy đủ prefix.
- Thêm 2 trang web hữu ích giúp tra cứu các thuộc tính CSS:
- cssreference.io tra cứu các thuộc tính CSS, có phân loại, có ví dụ cho từng thuộc tính
- caniuse.com tra cứu khả năng hỗ trợ của các trình duyệt cho các thuộc tính CSS, HTML, JavaScript, v.v.
Nhận xét