[Bài 1] Giới thiệu và cách sử dụng CSS – Tìm hiểu CSS cùng BIT

Bạn đang ở bài 1 trong 6 bài của serie Học Css cơ bản.

CSS là gì?

CSS là từ viết của Cascading Style Sheets. CSS là một yếu tố rất quan trọng để xây dụng bố cục, cách thức hiển thị nội dung cho một website. Nó sẽ giúp chúng ta thiết lập định dạng hiển thị cho các thành phần trong HTML như background, font chữ, các layer trên web,…

CSS rất dễ học, dễ hiểu nhưng lợi ích mà nó mang lại cho chúng ta là rất lớn. Chính vì vậy, bản phải tìm nắm rõ phần căn bản về CSS để có thể tạo ra những website tuyệt vời nhé!

Một số ưu điểm khi dùng CSS:

  • Tiết kiệm thời gian: một CSS có thể sử dụng cho nhiều HTML
  • HTML load nhanh hơn: bạn sẽ không cần phải viết thuộc tính style cho những thành phần có cùng định dạng CSS
  • Dễ dàng bảo trì: khi một CSS được cập nhật thì nó sẽ tác động đến toàn bộ các thành phần đang sử dụng CSS này
  • Tương thích trên nhiều thiết bị: CSS hỗ trợ tốt trên nhiều loại thiết bị như PC, tablet, smartphone
  • Đa nền tảng: nó cũng hỗ trợ tốt cho nhiều trình duyệt khác nhau

Nào chúng ta cùng bắt đầu tìm hiểu rõ hơn về CSS nào!

Giới thiệu các loại đơn vị dùng trong CSS:

Đầu tiên, chúng ta cần biết được những loại đơn vị được dùng trong CSS. Bao gồm: inch, cm, point, pixel, phần trăm,…

Đơn vị Mô tả Ví dụ
% Định nghĩa phần trăm cho một tính tính p {font-size: 16pt; line-height: 125%;}
cm Định nghĩa bằng cm div {margin-bottom: 2cm;}
em Định nghĩa em dựa trên point, 1em = 12pt p {letter-spacing: 7em;}
in Định nghĩa bằng inche p {word-spacing: .15in;}
pt Định nghĩa tại 1 point (điểm). 1pt = 1/72in body {font-size: 18pt;}
px Định nghĩa một điểm ảnh trên màn hình p {padding: 25px;}
vh Định nghĩa 1% của chiều cao khung hiển thị. h2 { font-size: 3.0vh; }
vw Định nghĩa 1% của chiều rộng khung hiển thị. h1 { font-size: 5.9vw; }

Cú pháp:

CSS sẽ định nghĩa các thuộc tính(property) cho các phần tử tương ứng trong HTML của bạn. Nó được chia làm 3 phần:

  • Selector: một thẻ HTML. Ví dụ: <p>, <h1>, <table>,…
  • Property: thuộc tính của CSS. Ví dụ: background, color, font,…
  • Value: giá trị gán cho thuộc tính. Ví dụ: red, #FF0000, 12px,…

VD: h1 { color: #36CFFF; }

Có nhiều cách để xác định một Selector:

  • Tất cả phần tử:  * { font-size: 12px; }
  • Các loại thẻ: a { text-decoration: none; }
  • Phân cấp:
    • Áp dụng cho nhiều cấp: ul li { color: red; }
    • Chỉ áp dụng cho cấp liền kề: ul > li { line-height: 30px; }
  • ID, class, attribute selector:
    • Class: .back{ color: #000; } , h1.black { color: rgb(0, 0, 0); }
    • ID: #black { color: #000 } ,  span#black { color: #000 }
    • Attribute: input[type=”text”]{ border: 1px solid #000; }
  • Nhiều thuộc tính: h1 { color: #36C; font-weight: normal; letter-spacing: .4em; }
  • Nhóm selector: h1, h2, h3 { color: #C36; }

Cách dùng CSS cho HTML:

  • Embedded CSS (CSS cục bộ): hiểu đơn giản là bạn sẽ dùng thẻ style để định nghĩa các thuộc tính của các thành phần trên HTML hiện tại

See the Pen NxVmQr by Le Huu (@huuptag) on CodePen.

  • Inline CSS (CSS độc lập): chỉ áp dụng trên thẻ hiện tại
    • VD: <h1 style=”color:#36C;”> This is inline CSS </h1>
  • External CSS (nhúng CSS): nhúng một file CSS vào HTML, đây là cách được sử dụng nhiều nhất.
    • VD: <link type=“text/csshref=“css />
  • Imported CSS (nhúng CSS): một cách khác để nhúng một file CSS vào HTML.
    • VD: @import “my_style.css”

Kết luận:

Vậy là chúng ta đã cùng nhau tìm hiểu bài đầu tiền trong series CSS căn bản rồi. Vì đây là bài viết đầu tiên của mình tại BlogIT.vn nên mọi ý kiến đóng góp hoặc thảo luận mọi người vui lòng bình luận ở phía dưới nhé.
Cảm ơn các bạn đã đọc!

[Bài 1] Giới thiệu và cách sử dụng CSS – Tìm hiểu CSS cùng BIT
4.7 (93.33%) 6 votes

Bình luận

Hãy trở thành người đầu tiên bình luận!

Thông báo
avatar
wpDiscuz