---------
Phần 6. Cơ bản về CSS
Nếu để ý sẽ thấy, trong các bài chia sẻ trên mạng, trong các ebook, cứ nói tới HTML là thế nào cũng đi kèm với CSS. Sao thế nhỉ? À, cứ nhìn sơ đồ khối của quá trình kết xuất trang web là thấy liền, đầu vào của quá trình kết xuất chính là HTML và CSS.
HTML hiển thị nội dung của trang web (cụ thể là tạo ra cấu trúc và ngữ nghĩa cho phần
nội dung), còn CSS phụ trách việc định dạng hiển thị các thành phần của trang web, CSS sẽ quy định về: màu sắc, cỡ chữ, vị trí hiển thị của các phần nội dung.
CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ được sử dụng để tìm và định dạng các phần tử HTML.
Học CSS là học cách bố trí, hiển thị, trang trí các nội dung của một trang web.
Xem và làm theo các clip hướng dẫn về HTML và CSS.
Đây là clip số 17: Giới thiệu về CSS qua inline style, do laptrinh.io chia sẻ. Lưu ý, từ “CSS” có khi được sử dụng như là một động từ, có khi lại được sử dụng như một danh từ; ví dụ: “bạn hãy CSS cái hình đó đi” (sử dụng CSS như một động từ), hoặc “dùng CSS để định dạng cái hình đó” (sử dụng CSS như một danh từ).
Clip số 17 hướng dẫn cách định dạng trực tiếp một phần tử HTML, định dạng ngay trong thẻ của nó (inline style), bằng cách sử dụng thuộc tính style của một thẻ HTML.
Đây là clip số 18: Định dạng CSS qua thẻ <style>. Thẻ <style> được đặt trong vùng <head></head>. Biết được khái niệm CSS selector (chọn đối tượng).
Clip trên cũng hướng dẫn cách chọn đối tượng bằng thẻ HTML.
Để ý: CSS inline có độ ưu tiên cao hơn CSS đặt trong thẻ <style>.
Đây là clip số 19: Liên kết tới tập tin CSS. Dùng thẻ <link> để liên kết tập tin CSS với tập tin HTML.
Đây là clip số 20: Thứ tự ưu tiên trong CSS.
Rút ra được kết luận: trình duyệt sẽ xử lý mã trong trang HTML theo thứ tự từ trên xuống dưới, từ trái qua phải, do đó mã của CSS cũng được thực thi từ trên xuống dưới, từ trái qua phải, và đoạn mã CSS nào được áp dụng sau sẽ có độ ưu tiên cao hơn.
Độ ưu tiên của CSS đặt trong thẻ <style> (hay còn gọi là On-page) và liên kết tới tập tin CSS (hay còn gọi là External file) là như nhau, nghĩa là cái nào được áp dụng sau thì sẽ có độ ưu tiên cao hơn. Trong ví dụ sau, đoạn mã CSS trong thẻ <style> sẽ được ưu tiên hơn (được áp dụng):
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="app.css">
<style>
p {
background-color: red;
}
</style>
</head>
Còn ví dụ sau, đoạn mã CSS trong app.css sẽ được ưu tiên:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
background-color: red;
}
</style>
<link rel="stylesheet" href="app.css">
</head>
Đây là clip số 21: Sử dụng class để định dạng CSS.
Đây là clip số 22: Sử dụng ID để định dạng CSS.
Đây là clip số 23: Định dạng CSS qua selector lồng nhau (nested).
Đây là clip số 24: Thiết kế background.
Đây là clip số 25: Tìm hiểu về màu sắc.
Đây là clip số 26: Định dạng cho text.
Đây là clip số 27: Định dạng cho font.
Đây là clip số 28: Sử dụng div để bao khung nội dung.
Đây là clip số 29: Tùy chỉnh vị trí tương quan giữa các phần tử HTML (padding, margin)
Đây là clip số 30: Tùy chỉnh cách hiển thị cho các phần tử HTML. Có thể sử dụng thuộc tính display cho tất cả các phần tử HTML, mỗi phần tử cũng đã được chọn sẵn một kiểu hiển thị nào đó: none, inline, inline-block, block.
Đây là clip số 31: Tùy chỉnh vị trí hiển thị (fixed, absolute, relative).
Đây là clip số 32: Tùy chỉnh CSS cho danh sách UL và OL.
Đây là clip số 33: Thiết kế một button đẹp mắt.
Đây là clip số 34: Thiết kế một navigation bar đẹp.
Đây là clip số 35: Giới thiệu về float (xóa hiện tượng các thẻ tiếp sau bị trôi).
Đọc và ngẫm nghĩ về từ “cascading” sẽ ngộ ra vài thứ hay hay (chép về từ http://stackoverflow.com)
"Cascading" in this context means that because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML.
The rule used is chosen by cascading down from the more general rules to the specific rule required. The most specific rule is chosen.
Tạm hiểu: do tính lồng nhau của phần tử HTML, dẫn đến tình trạng một phần tử HTML sẽ có nhiều định dạng CSS áp dụng trên nó. Vậy phải có một quy tắc nào đó để xác định được định dạng CSS nào sẽ áp dụng cho một phần tử HTML cụ thể, quy tắc được lựa chọn là “xếp chồng các định dạng CSS lên nhau” (cascading), và định dạng CSS nào càng gần (càng chỉ định cụ thể) phần tử HTML càng được ưu tiên hơn.
-----------
Bài 2. Các khái niệm cơ bản của CSS
Thứ tự ưu tiên khi áp dụng định dạng CSS (cascading): Importance (user agent, user, author) > Specificity (selectors) > Source order.
Tính kế thừa (inheritance) trong CSS.
Bài 3. Tích hợp mã CSS vào trang web
Bài 4. Tích hợp mã CSS vào trang web (tt)
Bài 5. Trình soạn thảo CSS
Bài 6. Universal Selector
Bài 7. Class, ID Selector
Bài 8. Attribute Selector
Bài 9. Pseudo Selector
Bài 10. Màu
Bài 11. Combinator selector (phần 2)
Bài 12. Các đơn vị đo tuyệt đối trong CSS
Pixel (px), point (pt), pica (pc).
Bài 13. Các đơn vị đo tương đối trong CSS
Bài 14. Kiểu dữ liệu chữ và số
initial (giá trị khởi tạo, do w3c quy định), auto (trình duyệt tự tính toán), inherit (kế thừa từ cha).
Bài 15. Cách trình duyệt tính các giá trị CSS
Bài 16. Combinator selector (phần 1)
Bài 17. Các thuộc tính font
Bài 18. Các thuộc tính định dạng văn bản
Bài 19. Các thuộc tính định dạng văn bản (tt)
Bài 20. Định dạng danh sách
Bài 21. Box model
Bài 22. Box model (tt)
Bài 23. Block và inline
Bài 24. Box sizing
Bài 25. Overflow
Sự khác nhau giữa display:none (thu hồi không gian) và visibility:hidden (giữ không gian)
Bài 26. Float
Bài 27. Clear
Bài 28. Kĩ thuật hidden và clear fix
Bài 29. Position (static và relative)
Bài 30. Position (absolute)
Bài 31. Position (fixed)
Bài 32. z-index
Bài 33. Background
Ảnh nền đẹp: https://www.toptal.com/designers/subtlepatterns/
Bài 34. Border radius
-----------
Xem/học và làm theo 34 bài giảng CSS căn bản của Cione trên Youtube
Bài 1. Giới thiệu khóa học
Bài 2. Các khái niệm cơ bản của CSS
Thứ tự ưu tiên khi áp dụng định dạng CSS (cascading): Importance (user agent, user, author) > Specificity (selectors) > Source order.
Tính kế thừa (inheritance) trong CSS.
Bài 3. Tích hợp mã CSS vào trang web
Bài 4. Tích hợp mã CSS vào trang web (tt)
Link dùng để nhúng tập tin CSS vào tập tin HTML, import dùng
để nhúng tập tin CSS vào tập tin CSS.
Bài 6. Universal Selector
Bài 7. Class, ID Selector
Bài 8. Attribute Selector
Bài 9. Pseudo Selector
Bài 10. Màu
Bài 11. Combinator selector (phần 2)
Bài 12. Các đơn vị đo tuyệt đối trong CSS
Pixel (px), point (pt), pica (pc).
Bài 13. Các đơn vị đo tương đối trong CSS
ex (chiều cao của chữ x), em, rem, vw (viewport width), vh (viewport height)
initial (giá trị khởi tạo, do w3c quy định), auto (trình duyệt tự tính toán), inherit (kế thừa từ cha).
Bài 15. Cách trình duyệt tính các giá trị CSS
(1) thiết lập giá trị cho các thuộc tính CSS (cascading and
inheritance), (2) chuyển từ giá trị tương đối sang tuyệt đối (computed value), (3)
tính giá trị theo ngữ cảnh thực (used value), (4) làm tròn các giá trị (actual
value).
Bài 17. Các thuộc tính font
Bài 18. Các thuộc tính định dạng văn bản
Bài 19. Các thuộc tính định dạng văn bản (tt)
Bài 20. Định dạng danh sách
Bài 21. Box model
Bài 22. Box model (tt)
Bài 23. Block và inline
Bài 24. Box sizing
Bài 25. Overflow
Sự khác nhau giữa display:none (thu hồi không gian) và visibility:hidden (giữ không gian)
Bài 26. Float
Bài 27. Clear
Bài 28. Kĩ thuật hidden và clear fix
Bài 29. Position (static và relative)
Bài 30. Position (absolute)
Bài 31. Position (fixed)
Bài 32. z-index
Bài 33. Background
Ảnh nền đẹp: https://www.toptal.com/designers/subtlepatterns/
Bài 34. Border radius
-----------
Cập nhật [27/08/2020]
-----------