Ngu ngơ học làm web (6) - Cơ bản về CSS

tiếp theo của: Ngu ngơ học làm web (5) - Xem mã HTML trong openemr
---------

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.
-----------
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 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


ex (chiều cao của chữ x), em, rem, vw (viewport width),  vh (viewport height)

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


(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 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

-----------
Cập nhật [27/08/2020]
-----------