1. Giới Thiệu CSS

Giới thiệu CSS: CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để điều chỉnh và tùy chỉnh giao diện và bố cục của trang web hoặc tài liệu HTML. CSS cho phép bạn điều chỉnh màu sắc, phông chữ, kích thước, khoảng cách và nhiều thuộc tính khác của các phần tử trong trang web, giúp tạo ra giao diện hấp dẫn và thú vị.

Cơ bản về CSS:

Các Lựa Chọn: Bạn có thể áp dụng CSS vào các phần tử cụ thể hoặc toàn bộ trang web.
Lựa Chọn Phần Tử: CSS sử dụng cú pháp để lựa chọn các phần tử HTML. Ví dụ, bạn có thể chọn tất cả các thẻ <p> hoặc lớp có tên là “header”.
Thuộc Tính và Giá Trị: CSS sử dụng các thuộc tính và giá trị để thiết lập các đặc tính của các phần tử. Ví dụ, bạn có thể sử dụng thuộc tính “color” để đặt màu chữ hoặc “font-size” để đặt kích thước phông chữ.
Lớp và ID: Bạn có thể định nghĩa các lớp và ID trong HTML và sau đó áp dụng CSS cho chúng. Lớp thường được sử dụng cho các phần tử có cùng kiểu dáng, trong khi ID thường chỉ dùng cho một phần tử duy nhất.
Kế Thừa và Ưu Tiên: CSS cho phép kế thừa các giá trị từ các phần tử cha, nhưng cũng có thể ghi đè các giá trị bằng cách sử dụng các quy tắc ưu tiên.
CSS3 và Flexbox/Grid: CSS3 là phiên bản tiếp theo của CSS với nhiều tính năng mới như gradient, chuyển động, và hỗ trợ đa phương tiện. Flexbox và Grid là các kỹ thuật sắp xếp linh hoạt giúp quản lý bố cục của trang web một cách hiệu quả.
Sự Tương Thích: CSS hoạt động trên hầu hết các trình duyệt hiện đại, nhưng có thể cần phải xem xét sự tương thích khi làm việc với các trình duyệt cũ hơn.
Bộ Trình Diễn (Preprocessor) CSS: Có các công cụ như Sass và Less cho phép viết mã CSS dễ dàng hơn bằng cách sử dụng biểu thức toán học và các tính năng tiên tiến khác.

Với CSS, bạn có khả năng tạo ra các trang web đẹp và tùy chỉnh theo ý muốn của mình. Để bắt đầu, bạn cần hiểu cú pháp cơ bản và các thuộc tính quan trọng, sau đó có thể tìm hiểu thêm về các kỹ thuật nâng cao và tiên tiến hơn.

Dưới đây là một ví dụ cơ bản về cách sử dụng CSS để tùy chỉnh giao diện của một trang web đơn giản. Trong ví dụ này, chúng ta sẽ tạo một trang web với một tiêu đề và một đoạn văn bản, sau đó sử dụng CSS để thay đổi màu sắc và kiểu chữ của các phần tử này.

HTML: Tạo một tệp HTML (ví dụ: index.html) với nội dung sau:

html

<!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="styles.css">
    <title>CSS Example</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>This is a simple example of using CSS to style a web page.</p>
    </main>
</body>
</html>

CSS: Tạo một tệp CSS (ví dụ: styles.css) để áp dụng các kiểu cho các phần tử HTML:

css

/* Áp dụng kiểu cho tiêu đề */
header h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}

/* Áp dụng kiểu cho đoạn văn bản */
main p {
    color: green;
    font-size: 18px;
    text-align: center;
}

Trong ví dụ này, chúng ta đã sử dụng CSS để:

Thay đổi màu chữ của tiêu đề thành màu xanh.
Đặt kích thước chữ của tiêu đề là 24px.
Canh giữa tiêu đề trong phần đầu trang.
Thay đổi màu chữ của đoạn văn bản thành màu xanh lá cây.
Đặt kích thước chữ của đoạn văn bản là 18px.
Canh giữa đoạn văn bản trong phần chính trang.

Khi bạn mở tệp HTML trong trình duyệt, bạn sẽ thấy tiêu đề và đoạn văn bản đã được tùy chỉnh theo các kiểu CSS mà bạn đã định nghĩa.

Leave a Comment Cancel Reply