Ở bài trước mình đã giới thiệu cho các bạn tổng quát những nội dung chính của ngôn ngữ HTML. Các bạn có thể xem qua trước khi đọc bài viết về CSS này.
Tiếp nối series lập trình website, hôm nay mình sẽ nói về những nội dung trọng điểm của CSS. Mình sẽ đưa ra cái nhìn tổng quát, chọn lọc nội dung quan trọng cần học và nắm vững 😬.
Bắt đầu thôi !!! 🥳🥳
Khái niệm về CSS
CSS (Cascading Style Sheets) là một ngôn ngữ để định dạng các cái style của các thẻ html.
Nếu coi HTML là các cái thân, cái cành của cây thì CSS như là hoa, lá của cây vậy. Nó làm cho cái cây trở nên đẹp đẽ, bắt mắt và sống động hơn.
Có 3 cách dùng css phổ biến nhất:
- Inline stylesheet: viết trực tiếp các style vào thuộc tính style của thẻ html.
- Internal Stylesheet: chúng ta có thể dùng thẻ style của html và viết các style bên trong thẻ đó.
- External Stylesheet: tạo 1 file có đuôi .css sau đó sẽ import vào html thông qua thẻ link. Cách này rất tốt khi bạn muốn sử dụng style ở nhiều file html khác nhau, mà chỉ cần viết style 1 chỗ rồi import vào từng file html là xong.
CSS có rất nhiều thứ để dùng, còn nhiều hơn cả HTML nữa kìa 🥲. Vì thế bạn nên phân bổ, chọn lọc những thứ quan trọng để học và thực hành thật nhiều thì sẽ đem lại hiệu quả cao nhất.
Dưới đây là các nội dung quan trọng được sắp xếp theo thứ tự ưu tiên do mình đề xuất. Các bạn có thể tham khảo và có thể để lại comment để thảo luận vấn đề này nhé.
CSS selectors
Hiểu đơn giản là cách chọn thẻ để có thể style cho thẻ đó. Cái này bạn bắt buộc phải biết trước khi muốn style thẻ rồi 😆
Để có thể học các loại selector trong css, bạn có thể vào trang w3school để học 📖. Ở đây họ liệt kê các cách selector và có cả ví dụ xem rất trực quan.
Note: Còn một ý quan trọng nữa đó chính là độ ưu tiên khi selector. Tức là thẻ sẽ ưu tiên nhận style của cái nào trước. Theo thứ tự style được ưu tiên là Inline-stylesheet > selector theo id > selector theo class & thẻ.
Để tìm hiểu kỹ hơn về độ ưu tiên thì bạn hãy đọc bài viết này.
Font chữ và đơn vị
Với Font chữ, các bạn cần biết font-family để chọn kiểu chữ. Ngoài các font mặc định của trình duyệt ra thì bạn có thể tải font và sau đó sử dụng. Hoặc đơn giản nhất là sử dụng google fonts trên trang web của bạn. Chúng ta còn có font-weight để chỉnh đậm nhạt của chữ, và font-size để chỉnh kích cỡ.
Trong CSS đâu đó có khoảng 20 cái đơn vị. Nhưng dùng 5 – 6 cái là đủ để cho thoải mái và linh hoạt trong cách sử dụng. Phố biến nhất là px và %, chắc cũng không phải giải thích nhiều về 2 đơn vị này.
Tiếp theo đó em và rem là 2 đơn vị được sử dụng khá nhiều trong các dự án. Đơn vị em thì liên quan tới font-size của thẻ cha. Còn đơn vị rem thì liên quan tới thẻ root (cụ thể là thẻ html).
Ngoài ra còn có đơn vị vw và vh cũng rất hay dùng. Đơn vị vw lấy độ rộng của màn hình, còn vh thì lấy theo chiều cao.
Box model
Box model là một thuật ngữ để nói về cấu trúc, nói về khoảng diện tích mà thẻ đánh chiếm. Một box-model bao gồm content, padding, border, margin.
Phần content có thể là text, thẻ hoặc không có gì. Padding là khoảng cách từ content đến phần viền(border). Phần border là viền của thẻ. Margin là khoảng cách từ thẻ tới các thẻ khác.
Layout
Trước đây để dựng layout hay chia layout ra thì người ta thường dùng bộ đôi float và clear. Giờ thì chỉ một số người dùng sử dụng chúng… Nhưng giờ đây, Flexbox hoặc grid-layout được ưu tiên lên hàng đầu.
Với flexbox cho phép dựng layout theo chiều dọc hoặc chiều ngang. Còn grid thì có thể chia theo cả 2 chiều. Flexbox là thứ mà bạn nên ưu tiên học trước và sau đó có thể tìm hiểu qua grid.
Nội dung của flex và grid rất nhiều, nếu viết ra đây thì bài viết quá dài mất 😅. Nên một ngày gần nhất mình sẽ có bài về chúng nha.
CSS Positioning
Với Position thì các bạn nên thành thạo với position: relative, absolute, fixed. Mặc định position có giá trị là static. Với vị trí thì cần có mốc để căn chỉnh bằng các thuộc tính top, right, bottom, left.
position: relative;mốc ban đầu tại chính thẻ đó luôn.position: absolute;mốc ban đầu chính là thẻ bọc gần nhất mà có giá trịposition: relative;. Tức là nó sẽ đi tìm thẻ cha đang bọc ngoài mà có giá trị làposition: relative;. Thì nó sẽ lấy thẻ đó làm mốc.position: fixed;mốc ban đầu là cửa sổ trình duyệt và sẽ luôn cố định ở tại vị trí đó. Dù bạn có scroll nội dung thì nó vẫn không thay đổi vị trí.
Responsive
Responsive là sự thích nghi của trang web với từng thiết bị khác nhau. Chúng ta có thể thấy hiện nay có rất nhiều thiết bị điện tử như smart phone, tablet, desktop, laptop… và chúng đa dạng về kích thước. Nên để website bảo toàn nội dung trên từng thiết bị thì các bạn phải học về responsive.
Các bạn có thể dựng layout mobile trước xong responsive dần sang desktop và ngược lại 😁. Để có thể responsive thì đầu tiên phải xác định breakpoint. Sau đó mình dùng @media để thực hành.
Bonus
Đây là phần bonus, có thể bổ sung thêm khi đã nắm vững những kiến thức quan trọng ở trên. Các bạn có thể tìm hiểu shadow effects như box-shadow, text-shadow để đổ bóng cho thẻ, chữ. Tìm hiểu Animation để làm hiệu ứng, tạo cho website trở nên thú vị hơn.
Ngoài ra không phải lúc nào trình duyệt cũng hiểu các style trong CSS. Có lúc hoạt động được ở chrome nhưng với FireFox, Safari hoặc các trình duyệt cũ thì không 🥲. Để kiếm tra style có chạy được trên các trình duyệt, bạn có thể vào trang caniuse.com để kiểm tra.
Nếu style mà bạn viết không hoạt động thì sẽ phải để tâm tới tiền tố của style trong CSS. Các tiền tố như -webkit (chrome, Safari), -Moz (FireFox), ms (Microsoft Edge, Internet Explorer)…
Trong thực tế, người ta sẽ dùng thêm thư viện để giảm thời gian code như Bootstrap chẳng hạn. Ngoài ra các bạn có thể sử dụng các ngôn ngữ tiền xử lý css chẳng bạn như Less, Sass/scss. Cơ chế của Less và Sass khá giống nhau. Chúng đều giúp viết các style có cấu trúc, nhìn trực quan và dễ đọc hơn. Khi chạy chương trình, chúng sẽ biên dịch từ style viết có cấu trúc đó sang CSS thông thường. Đặc biệt nó tự động kiểm tra và thêm các tiền tố như -webkit, -Moz… rất tiện lợi luôn 🫠.
Đoạn kết mới ~~
CSS còn quá nhiều thứ để nói, nhưng thực tế thì chúng ta khó có thể sử dụng hết chúng. Cho nên, nắm bắt được những nội dung chính giúp các bạn hình dung ra lộ trình học của mình.
Nếu bài viết có vấn đề, hoặc bạn không hiểu ở chỗ nào thì cứ comment ở phía dưới nhé. Mình sẽ trả lời đầy đủ cho các bạn nhen.
Chúc bạn đọc bài vui vẻ 🥳🥳.
