Lesson 2: CSS

Cùng học cơ bản về CSS

Giới thiệu

Như đã biết, CSS (Cascading Style Sheets) là một ngôn ngữ dùng để mô tả cách thức hiển thị và bố cục của các tài liệu viết bằng HTML (hoặc XML).

CSS cho phép kiểm soát giao diện của trang web, bao gồm màu sắc, phông chữ, khoảng cách giữa các phần tử, và cách chúng sắp xếp trên trang....

HTML + CSS

Sử dụng

Đối với CSS, ta sẽ có 3 cách để sử dụng mã nguồn:

• Inline CSS: Viết mã nguồn CSS ngay trên chính thẻ HTML.

• Internal CSS: Viết mã nguồn CSS trong file HTML, sử dụng cú pháp Selector để truy xuất và định nghĩa thuộc tính CSS.

• External CSS: Viết, sử dụng mã nguồn CSS từ nơi khác, sử dụng liên kết từ file HTML để sử dụng. (Có thể tự tạo file, sử dụng cú pháp Selector để truy xuất và định nghĩa thuộc tính CSS).

Cú pháp thuộc tính

Thuộc tính là cách định nghĩa cách hiển thị của phần tử HTML.

Cả 3 cách trên, về ý nghĩa, chức năng sẽ có sự khác nhau, nhưng có một 'core' giống nhau, đó chính là cú pháp thể hiện thuộc tính CSS.

Tên thuộc tính: giá trị;

Chỉ cần biết một chút tiếng Anh, việc học sẽ trở nên cực kỳ dễ dàng

Chỉ cần hiểu quy luật cú pháp (syntax)

Một số thuộc tính cơ bản

color: red; Định nghĩa thuộc tính màu sắc, với giá trị đỏ

background-color: blue; Định nghĩa thuộc tính màu nền, với giá trị màu xanh dương

font-size: 16px; Định nghĩa thuộc tính kích thước chữ, với giá trị 16px

text-align: center; Định nghĩa thuộc tính căn lề của chữ, với giá trị center - tức chữ được căn giữa

text-decoration: underline; Định nghĩa thuộc tính trang chí cho chữ, với giá trị underline - tức chữ sẽ có gạch chân phía dưới

font-style: italic; Định nghĩa thuộc tính kiểu chữ, với giá trị italic - tức chữ sẽ nghiêng

text-transform: uppercase; Định nghĩa thuộc tính thay đổi dạng văn bản, với giá trị uppercase - tức văn bản sẽ được viết hoa hết các ký tự

cursor: pointer; Định nghĩa con trỏ chuột, với giá trị pointer, khi đưa chuột vào phần tử, con trỏ chuột sẽ là hình bàn tay trỏ

• CSS rất nhiều thuộc giá và giá trị, hãy tìm hiểu thêm để mở rộng kiến thức

Inline CSS

Như định nghĩa, Inline CSS là viết mã nguồn CSS ngay trên chính thẻ HTML.

Thẻ HTML sẽ có một thuộc tính tên là style, thuộc tính này sẽ là nơi chứa các câu lệnh định nghĩa thuộc tính CSS

<p style="color: red; text-decoration: underline;">Xin chào học viên MindX</p>

Cú pháp Selector

Selector là cách chọn phần tử HTML, có rất nhiều cú pháp và ý nghĩa riêng. Cú pháp Selector rất quan trọng và áp dụng cho Internal CSS và External CSS.

Dưới đây là các cú pháp Selector cơ bản:

• Selector theo tên thẻ: Áp dụng cho tất cả các thẻ có tên tương ứng được truy xuất

  

  Selector theo tên thẻ

  Ví dụ:

  Áp dụng thuộc tính màu chữ, có giá trị là màu đỏ, cho tất cả thẻ p trong văn bản HTML

p {
    color: red;
}

• Selector theo class: Áp dụng cho tất cả các thẻ, có thuộc tính class chứa giá trị tương ứng được truy xuất.

Một thẻ có thể có nhiều giá trị class, được cách nhau bởi dấu cách

Để truy xuất theo class, ta sẽ thực hiện đánh dấu chấm . sau đó ghi liền kề giá trị class mong muốn

Ví dụ:

Thẻ p có class là mindx

HTML: <p class="mindx">Xin chào học viên MindX.</p>
CSS: 
Chỉ áp dụng cho thẻ p, có class là mindx
p.mindx {
    color: red;
}
--------
Áp dụng cho tất cả các thẻ mà chứa class mindx
.mindx {
    color: red;
}

• Selector theo id: Áp dụng cho tất cả các thẻ, có thuộc tính id chứa giá trị tương ứng được truy xuất.

• Để truy xuất theo class, ta sẽ thực hiện đánh dấu thăng # sau đó ghi liền kề giá trị id mong muốn

• Một thẻ, chỉ nên có một id duy nhất

• Sử dụng tương tự class

Ví dụ:

Thẻ p có id là mindx

HTML: <p id="mindx">Xin chào học viên MindX.</p>
CSS: 
Chỉ áp dụng cho thẻ p, có id là mindx
p#id {
    color: red;
}
--------
Áp dụng cho tất cả các thẻ mà chứa id mindx
#id {
    color: red;
}

Còn rất nhiều cá cú pháp khác, hãy tìm hiểu thêm để mở rộng kiến thức

Internal CSS

Như định nghĩa, Internal CSS là viết mã nguồn CSS trong file HTML, sử dụng cú pháp Selector để truy xuất và định nghĩa thuộc tính CSS.

Để sử dụng Internal CSS, ta sẽ sử dụng thẻ style, viết trong phần thẻ head của văn bản HTML.

Sau đó bên trong thẻ này, ta sẽ sử dụng các cú pháp Selector để thực hiện style cho các thẻ HTML.

Ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cơ bản về CSS</title>
    
    <!-- Tổ chức mã nguồn CSS -->
    <style>
        p.mindx {
            color: red;
        }
    </style>
</head>

<body>
   <p class="mindx">Xin chào học viên MindX.</p>
</body>

</html>

Trong thực tế, ít khi lập trình viên sử dụng cách này, vì khó quản lý mã nguồn. Mà sẽ sử dụng External CSS.

External CSS

Như định nghĩa, External là viết, sử dụng mã nguồn CSS từ nơi khác, sử dụng liên kết từ file HTML để sử dụng.

Để tạo một file chứa mã nguồn CSS, tương tự như cách tạo file HTML đã được học, ta sẽ tạo một file tên là style.css

style.css

Bên trong này, viết các đoạn mã nguồn CSS tương tự như Internal CSS.

Tuy nhiên, mã nguồn chưa hề được áp dụng, bởi ta mới tạo file thôi, chưa có sự liên kết file html và css

Để liên kết file style.css với file html, trong thẻ head, ta sẽ thêm một thẻ <link /> và sử dụng như sau:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css" />
    <title>Cơ bản về CSS</title>
</head>

<body>
    <p class="mindx">Xin chào học viên MindX.</p>
</body>

</html>

Với:

• rel: là giá trị thể hiện rằng quan hệ của file liên kết có giá trị là stylesheet - định nghĩa style cho thẻ

• href: đường dẫn truy cập tới mã nguồn

Như ví dụ trên, ./ thể hiện truy cập tới file, hoặc folder nằm cùng cấp với file html

Sau khi liên kết thành công, giao diện chắc chắn sẽ được cập nhật với liên kết tới mã nguồn CSS

Nên sử dụng extension Live server, để trang web tự thực hiện reload lại trang web mỗi khi có thay đổi

Độ ưu tiên

Độ ưu tiên trong CSS (CSS specificity) là một khái niệm quan trọng quyết định quy tắc nào sẽ được áp dụng khi có nhiều quy tắc CSS cùng áp dụng cho một phần tử.

Quy tắc theo Selector

Độ ưu tiên sẽ lần lượt theo thứ tự Selector từ cao nhất như sau:

1. Inline Styles: tức viết CSS ngay trên thẻ HTML với thuộc tính style

2. ID Selector: tức sử dụng selector theo id

3. Class Selector: tức sử dụng selector theo class

4. Element Selector: tức sử dụng selector với tên thẻ

Quy tắc 'quan hệ gần nhất'

Khi độ ưu tiên bằng nhau, quy tắc CSS được định nghĩa sau cùng trong mã CSS sẽ được áp dụng.

/* Hai quy tắc có cùng độ ưu tiên */
p {
  color: red;
}
p {
  color: blue;
}

Ví dụ: Với đoạn mã trên, đoạn văn sẽ có màu xanh blue vì quy tắc cuối cùng được áp dụng.

!important

• !important là một từ khóa có thể được thêm vào một quy tắc CSS để làm cho quy tắc đó có độ ưu tiên cao nhất, bất kể các quy tắc khác có độ ưu tiên như thế nào.

• Khi một quy tắc CSS được đánh dấu với !important, nó sẽ ghi đè tất cả các quy tắc khác, trừ khi một quy tắc khác cũng có !important và có độ ưu tiên cao hơn (theo cách tính thông thường).

Ví dụ:

/* Quy tắc thông thường */
p {
  color: blue;
}

/* Quy tắc với !important */
p {
  color: red !important;
}

/* Quy tắc có độ ưu tiên cao hơn nhưng không có !important */
#specific-paragraph {
  color: green;
}

• Không lạm dụng: !important nên được sử dụng rất hạn chế, chỉ khi thật sự cần thiết để ghi đè một quy tắc mà không thể thay đổi được. Lạm dụng !important có thể dẫn đến mã CSS khó duy trì và khó dự đoán.

• Kiểm tra và sửa chữa: Nếu bạn phải sử dụng !important thường xuyên, điều này có thể cho thấy có vấn đề trong tổ chức mã CSS và nên được kiểm tra lại.

Trên đây là những kiến thức căn bản nhất về CSS, hãy tích cực tìm hiểu thêm những thuộc tính mới để mở rộng kiến thức