Seri CSS cơ bản - [CSS Basic 1] Learn the basic

Seri CSS cơ bản - [CSS Basic 1] Learn the basic

Published in CSS

June 09, 2021

5 min read

Hello các bạn, mình là Hoàng, hôm nay mình sẽ chia sẻ với các bạn 1 seri quay về cơ bản với lập trình web nhé. Cũng như thường lệ, chúng ta có cấu trúc các phần như sau

Tổng quan Về seri

[CSS Basic 1] Learn the basic <==== You are here

Bắt đầu luôn cho nóng, phần 1 chúng ta đi tìm hiểu về CSS - Learn the basic với cấu trúc tổng quan như sau

Tổng quan về phần 1 - [CSS Basic 1] Learn the basic

Tổng quan về CSS
Các cách để sử dụng CSS trong HTML
Những điều cần nhớ khi sử dụng CSS

Tổng quan về CSS

CSS viết tắt của Cascading Style Sheet, dùng để trình bày bố cục của một website dựa vào các thẻ HTML. Nói nôm na thì CSS sẽ tác động thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hay nhằm một mục đích cụ thể nào đó.

CSS làm được những gì?

Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ.
Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS.

Tại sao sử dụng CSS?

Trước khi có CSS, các thẻ như phông chữ, đường viền, cách sắp xếp phần tử,… được lặp lại ở trên mọi trang web. Đây là một quá trình rất dài và tốn công sức. Ví dụ: nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu sắc được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của W3C.
Tiết kiệm rất nhiều thời gian: Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài, vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi trên tệp CSS đó.
Cung cấp thêm các thuộc tính: CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web.

Bây giờ thì cùng mình tìm hiểu về CSS nhé!

CSS thật sự là gì?

Giống như HTML, CSS không phải là một ngôn ngữ lập trình, cũng không phải một ngôn ngữ đánh dấu, nó là ngôn ngữ định kiểu. Điều này có nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu HTML.

Ví dụ để để chọn tất cả các phần tử đoạn văn trên trang HTML và chuyển màu chữ thành màu đỏ, bạn sẽ viết CSS như thế này:

Nhưng chúng ta cần nhúng CSS vào file HTML của bạn. Nếu không, các định dang CSS sẽ không ảnh hưởng đến việc hiển thị file HTML lên trình duyệt.

Các cách để sử dụng CSS trong HTML

Có 3 cách để nhúng CSS vào file HTML là:

External CSS
Internal CSS
Inline CSS

External CSS

Bảng định kiểu được viết bên ngoài file HTML, đươc lưu bằng phần mở rộng .css.
Với bảng định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách thay đổi trên một tệp.
Mỗi trang HTML phải bao gồm một tham chiếu đến tệp CSS bên trong thẻ <link>, được đặt trong <head>.

Internal CSS

Bảng định kiểu được viết ngay tại file HTML, nằm trong thẻ <style>, được đặt trong <head>.

Inline CSS

Kiểu nội tuyến được sử dụng để áp dụng một kiểu duy nhất cho một thẻ.
Được viết trược tiếp trên thẻ, thông qua thuộc tính style.

Lưu ý:

Không nên viết dạng inline vì nó khó quản lý và không tốt cho SEO.
Dạng internal có thể chấp nhận, nên đặt CSS ở trong thẻ <head>, nhưng không khuyến khích vì nó cũng không tốt cho SEO.
Dạng external khuyến khích sử dụng vì nó mang tính tách biết HTML với CSS, rất tốt cho SEO và dễ quản lý.

Những điều cần nhớ khi sử dụng CSS

Cơ cấu bộ quy tắc CSS

Hãy xem xét ví dụ về CSS ở trên chi tiết hơn: alt text

Toàn bộ cấu trúc trên được gọi là một bộ quy tắc.

Bộ chọn (Selector): Tên phần tử HTML bắt đầu bộ quy tắc. Nó chọn (các) phần tử được tạo kiểu (trong trường hợp này là phần tử p). Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.

Khai báo (Declaration): Phần xác định thuộc tính của phần tử nào bạn muốn tạo kiểu.

Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho phần tử HTML. Đối với mỗi bộ chọn CSS, có thể áp dụng nhiều thuộc tính tạo kiểu.

Giá trị thuộc tính (Property value): Xác định giá trị cho thuộc tính tạo kiểu.

Lưu ý:

Mỗi bộ quy tắc phải được bao bọc bởi cặp dấu ngoặc nhọn ({}).
Trong mỗi khai báo, phải sử dụng dấu hai chấm (:) để ngăn cách thuộc tính và giá trị của nó. Kết thúc bằng dấu chấm phảy (;), để ngăn cách với các thuộc tính tiếp theo.

Một số cách chọn phần tử:

Chọn nhiều phần tử: Bạn cũng có thể chọn nhiều kiểu phần tử và áp dụng một quy tắc duy nhất được đặt cho tất cả các yếu tố đó. Bao gồm nhiều bộ chọn được phân biệt bởi dấu phẩy (,).
Ví dụ:

Các loại bộ chọn khác nhau: - Bộ chọn phần tử (hay còn gọi là thẻ HTML): Chọn tất cả các phần tử HTML của loại được chỉ định.

- Bộ chọn ID: Sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể. ID của phần tử là duy nhất trên một trang, do đó bộ chọn ID sử dụng để chon một phần tử duy nhất. Để chọn một phần tử có một id cụ thể, bắt đầu bằng một ký tự dấu thăng (#), theo sau là id của phần tử.

Lưu ý: Tên ID không được bắt đầu bằng số.

- Bộ chọn class: Chọn các phần tử HTML với một thuộc tính class cụ thể. Để chọn các phần tử với một class cụ thể, bắt đầu bằng một ký tự dấu chấm (.), theo sau là tên class.

Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một class.

Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một class.

Bộ chọn thuộc tính: Chọn (các) phần tử trên trang có thuộc tính được chọn.

Trong ví dụ trên, chọn ra những thẻ <a> có thuộc tính target='_blank', nhưng không phải chọn toàn bộ thẻ <a>.

Bộ chọn Pseudo-class: Chọn (các) thành phần được chỉ định. Cú pháp:

Ví dụ: <a href='#'>Click me</a>

Thẻ <a> chỉ được áp dụng đoạn CSS khi ở ở trạng thái di chuột qua liên kết.

Mô hình hộp

Một điều bạn sẽ nhận thấy về việc viết CSS là rất nhiều trong số đó là về các hộp (khối) - thiết lập kích thước, màu sắc, vị trí,… Hầu hết các phần tử HTML trên trang của bạn có thể coi là các hộp nằm trên đỉnh của nhau.

alt text

Bố cục CSS chủ yếu dựa vào mô hình hộp. Mỗi hộp chiếm khoảng trống trên trang của bạn có các thuộc tính như sau:

padding (vùng đệm): không gian xung quanh nội dung.
border (đường viền): đường viền nằm ngay bên ngoài bao bọc nội dung.
margin (lề): khoảng cách xung quanh bên ngoài phần tử.

Theo ảnh minh hoạ trên, ví dụ:

CSS:

Luyện tập thêm về CSS Selector qua trò chơi CSS Dinner

Kết luận

Cảm ơn các bạn đã đọc bài viết của mình. Vậy là chúng ta đã cùng đi qua phần 1 về CSS căn bản, cùng đón chờ phần sau về Making layout nhé.
Bất ký thắc mắc hay góp ý gì thì hãy comment hoặc inbox trực tiếp để mình cải thiện trong những bài viêt sau nha.

@hoangpn - Better every day!