Học video

Đăng ký tài khoản để xem

Đăng ký Đăng nhập

CSS 1. Cú pháp và các css cơ bản

Khóa học: Thiết kế Web với HTML CSS - Giảng viên: Phạm Quang Trường

Bài Giảng: CSS 01 - Cú Pháp và Các Thuộc Tính Cơ Bản

1. Giới Thiệu Về CSS

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng giao diện của trang web, giúp tách biệt phần giao diện và nội dung HTML.

2. Cú Pháp CSS

Mỗi quy tắc CSS bao gồm:

selector {
    property: value;
}

Selector: Chọn thẻ HTML cần áp dụng CSS.
Property: Thuộc tính CSS cần thay đổi.
Value: Giá trị của thuộc tính.

Ví dụ:

h1 {
    color: blue;
    font-size: 24px;
}

Mã CSS này làm cho thẻ <h1> có màu xanh và cỡ chữ 24px.

3. Cách Nhúng CSS Vào HTML

Có ba cách nhúng CSS vào HTML:

3.1. Inline CSS

CSS được viết trực tiếp trong thẻ HTML bằng thuộc tính style.

<p style="color: red; font-size: 20px;">Văn bản màu đỏ</p>

👉 Ưu điểm: Dễ dùng, thay đổi nhanh. 👉 Nhược điểm: Khó bảo trì, không tách rời thiết kế và nội dung.

3.2. Internal CSS

CSS được viết trong thẻ <style> bên trong <head> của HTML.

<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>

👉 Ưu điểm: Quản lý dễ hơn Inline CSS. 👉 Nhược điểm: Không tái sử dụng được giữa các trang HTML khác.

3.3. External CSS

CSS được lưu trong một file .css riêng và liên kết vào HTML bằng thẻ <link>.

File styles.css:

p {
    color: purple;
    font-size: 16px;
}

HTML sử dụng file CSS:

<head>
    <link rel="stylesheet" href="styles.css">
</head>

👉 Ưu điểm: Tái sử dụng dễ dàng, giúp website gọn gàng và dễ quản lý. 👉 Nhược điểm: Cần tải thêm file CSS, có thể làm chậm trang web nếu không tối ưu.

4. Các giá trị cơ bản trong CSS

4.1. Đơn Vị Tính: Đơn vị tính giúp xác định kích thước của phần tử, bao gồm:

Tuyệt đối (cố định, không thay đổi theo màn hình):

px (pixel): Đơn vị phổ biến nhất.
p { font-size: 16px; } /* Kích thước chữ 16px */

Tương đối (thay đổi theo môi trường hiển thị):
```
div { width: 50%; } /* Chiếm 50% chiều rộng của phần tử cha */
```
- % → Tính theo phần trăm của phần tử cha.
- em → Kích thước dựa trên phần tử cha.
- rem → Dựa trên kích thước mặc định của html.
- vw/vh → Theo chiều rộng/chiều cao màn hình.

div { width: 50vw; height: 50vh; } /* Chiếm 50% màn hình */

html { font-size: 16px; }

p { font-size: 1.5rem; } /* 1.5 * 16px = 24px */

4.2. Màu Sắc Trong CSS

Có nhiều cách để định nghĩa màu sắc:

Tên màu: red, blue, green, …

h1 { color: red; } /* Chữ màu đỏ */

Mã HEX: #RRGGBB (00-FF)
```
h1 { color: #ff0000; } /* Đỏ */
```

RGB: rgb(r, g, b) (0-255)

h1 { color: rgb(255, 0, 0); } /* Đỏ */

RGBA (độ trong suốt): rgba(255, 0, 0, 0.5) (0-1)

h1 { color: rgba(255, 0, 0, 0.5); } /* Đỏ, trong suốt 50% */

HSL (hue, saturation, lightness)

h1 { color: hsl(0, 100%, 50%); } /* Đỏ */

4.3. Kích Thước & Chiều Trong CSS

Các thuộc tính dùng để xác định kích thước phần tử:

TOP: Phía trên
Left: Bên trái
right: Bên phải
Bottom: Phía dưới

5. CSS Selector - Bộ Chọn Trong CSS

Selector dùng để chọn các phần tử HTML và áp dụng CSS.

5.1. Selector theo thẻ (Tag Selector)

Chọn tất cả các thẻ cùng loại.

p { color: blue; } /* Áp dụng cho tất cả thẻ <p> */

5.2. Selector theo lớp (Class Selector)

Chọn các phần tử có class cụ thể.

.red-text { color: red; }

HTML:

<p class="red-text">Chữ màu đỏ</p>

5.3. Selector theo ID (ID Selector)

Chọn phần tử có id duy nhất.

#title { font-size: 24px; }

HTML:

<h1 id="title">Tiêu đề</h1>

5.4. Chọn nhiều phần tử cùng lúc

Dùng dấu phẩy , để áp dụng chung CSS.

h1, h2, p { font-family: Arial; }

5.5 Selector lồng nhau (Descendant Selector)

Chọn phần tử nằm bên trong một phần tử khác.

div p { color: green; } /* Chỉ chọn thẻ <p> bên trong <div> */

5.6. Selector con trực tiếp (Child Selector)

Chọn phần tử con trực tiếp (dùng >).

div > p { font-weight: bold; } /* Chỉ áp dụng cho <p> là con trực tiếp của <div> */

5.7. Selector anh em (Adjacent & General Sibling Selector)

Adjacent sibling (+): Chọn phần tử ngay sau.

h1 + p { color: red; } /* Chọn <p> ngay sau <h1> */

General sibling (~): Chọn tất cả phần tử sau.

h1 ~ p { color: blue; } /* Chọn tất cả <p> sau <h1> */

5.8. Selector Thuộc Tính (Attribute Selector)

Chọn phần tử dựa vào thuộc tính của nó.

Chọn phần tử có thuộc tính cụ thể:

input[type="text"] { border: 1px solid black; }

Chọn phần tử có giá trị bắt đầu bằng (^=), chứa (*=), kết thúc bằng ($=).
```
a[href^="https"] { color: green; } /* Link bắt đầu bằng "https" */
```

5.9. Pseudo-class

Chọn phần tử dựa trên trạng thái.

a:hover { color: red; } /* Đổi màu khi rê chuột */
input:focus { border-color: blue; } /* Thay đổi viền khi nhập */

5.10. Pseudo-element

Chọn một phần của phần tử.

p::first-letter { font-size: 30px; color: red; } /* Chữ cái đầu tiên */
p::before { content: "🔥 "; } /* Thêm biểu tượng trước đoạn văn */

6. Các Thuộc Tính CSS Cơ Bản

6.1. Color

Định nghĩa màu chữ:

h1 {
    color: red; /* Màu chữ đỏ */
}

Có thể sử dụng tên màu (red), mã HEX (#ff0000), RGB (rgb(255,0,0)).

6.2. Font-size

Xác định kích thước chữ:

p {
    font-size: 20px; /* Cỡ chữ 20px */
}

Đơn vị có thể là px, %, em, rem.

6.3. Background-color

Thiết lập màu nền:

div {
    background-color: yellow; /* Nền màu vàng */
}

Có thể sử dụng tên màu, mã HEX, hoặc RGB.

6.4. Chiều cao (Height), chiều rộng (width)

width: kích thước (px,cm,mm,em,rem...)

height: kích thước (px,cm,mm,em,rem...)

Ví dụ:

Div {

height: 100px;

width: 100px;

}

7. Tổng Kết

CSS giúp định dạng trang web một cách linh hoạt.
Có ba cách nhúng CSS vào HTML: Inline, Internal, External.
Một số thuộc tính cơ bản: color, font-size, background-color.

Bài tập thực hành:

Tạo một file HTML và áp dụng cả ba cách nhúng CSS.
Thay đổi màu chữ, kích thước chữ và màu nền của một đoạn văn bản.

Bài giảng này giúp bạn nắm vững kiến thức cơ bản về CSS. Hãy thực hành ngay để hiểu rõ hơn! 🚀

Bài trước

Bài tiếp theo

Tài liệu khóa học

Chưa có tài liệu.

Danh sách bài học