CSS
CSS là gì?
CSS là viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML, XML...).
CSS được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website. Nhiệm vụ chính của nó là thực hiện việc xử lý giao diện của một trang web như thiết kế bố cục, màu sắc văn bản, kiểu font chữ, khoảng cách, hình ảnh, màu nền....
CSS rất dễ học và dễ hiểu nhưng nó cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML.
Mối quan hệ của CSS và HTML
HTML và CSS có mối quan hệ gắn bó mật thiết với nhau. Nếu HTML là nền tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó, chúng là không thể tách rời.
HTML được dùng để thêm nội dung và mô tả ý nghĩa của từng nội dung, tuy nhiên nó không quy định cách thức hiển thị các nội dung trên trang như thế nào. CSS được sử dụng để thiết lập cách trình bày hay hiển thị của nội dung trên trang web.
Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tính thẩm mỹ. CSS làm cho giao diện người dùng của một trang web đẹp mắt và mang đến trải nghiệm người dùng tuyệt vời. Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều.
CSS hoạt động như thế nào?
Dưới đây là quy trình hoạt động đơn giản khi trình duyệt tải một trang web:
- Bước 1: Trình duyệt tải HTML.
- Bư ớc 2: Trình duyệt chuyển đổi HTML thành DOM Tree.
- Bước 3: Trình duyệt tìm nạp các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh, video, CSS, Javascript...
- Bước 4: Trình duyệt phân tích cú pháp CSS đã nạp và tạo ra CSSOM Tree.
- Bước 5: DOM Tree và CSSOM Tree kết hợp với nhau tạo thành Render Tree. Render Tree chứa những gì sẽ hiển thị trên màn hình.
- Bước 6: Trình duyệt tiến hành vẽ lên màn hình theo từng pixels để hiển thị trang web (giai đoạn này được gọi là painting).
Bố cục và cấu trúc của CSS
Bố cục của CSS
Bố cục CSS thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảng trống trên trang với các thuộc tính như:
- Padding: không gian xung quanh nội dung.
- Border: đường viền nằm ngay bên ngoài phần padding.
- Margin: khoảng cách xung quanh bên ngoài của phần tử.
Cấu trúc của CSS
selector {
property: value;
property: value;
.....
}
Bộ chọn (Selector): dùng để chọn phần tử HTML mà bạn muốn style, chúng ta có thể chia selector thành các loại sau:
- Selectors đơn giản (chọn các phần tử dựa trên tên thẻ, class, id)
- Selectors kết hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng)
- Selectors Pseudo-class (chọn các phần tử dựa trên một trạng thái nhất định)
- Selectors Pseudo-elements (chọn và định kiểu một phần của phần tử)
- Selectors thuộc tính (chọn các thành phần dựa trên thuộc tính hoặc giá trị thuộc tính)
Thuộc tính (Property): tên thuộc tính CSS mà bạn có thể tạo style cho phần tử HTML, được quy định bởi tiêu chuẩn W3C.
Giá trị thuộc tính (Value): Ở bên phải của thuộc tính sau dấu 2 chấm
:, giá trị được xác định cho thuộc tính CSS tương ứng với nó.Khai báo (Declaration): Mỗi khai báo gồm tên và giá trị của thuộc tính CSS, phân tách bằng dấu 2 chấm
:. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy;.Khối khai báo (Declaration block): chứa một hoặc nhiều khai báo, phân tách với nhau bằng các dấu chấm phẩy
;. Khối khai báo nằm trong cặp dấu ngoặc nhọn{}
Ưu điểm và nhược điểm của ngôn ngữ CSS
Ưu điểm
- Tăng tốc độ tải trang: CSS cho phép bạn viết code ít hơn vì vậy tốc độ tải trang sẽ được cải thiện đáng kể.
- Tiết kiệm thời gian phát triển và dễ dàng khi bảo trì
- Code CSS có thể tái sử dụng đối với các phần có giao diện, định dạng giống nhau.
- CSS giúp source code trang web được tổ chức gọn gàng, trật tự, tách bạch hơn nên dễ dàng chỉnh sửa và cập nhật
- CSS không chỉ làm cho trang web dễ nhìn, đẹp mắt mà còn giúp cải thiện trải nghiệm người dùng
- Khả năng tương thích cao với các loại thiết bị như PC, Tablet, Smatphone...
Nhược điểm
- CSS có thể hoạt động khác nhau đối với từng trình duyệt
- Khá khó khăn cho người mới khi cần nhớ và vận dụng các thuộc tính CSS
Nhúng CSS vào website
Có 3 cách nhúng CSS vào website:
Inline CSS (Trực tiếp)
Để sử dụng inline CSS, chúng ta thêm thuộc tính style vào thẻ mở của phần tử HTML.
Inline CSS chỉ tác động lên chính phần tử đó.
<p style="color: #000;">This is a paragraph.</p>
Internal CSS (Nội tuyến)
Đặt code CSS vào bên trong cặp thẻ <style></style>
Cặp thẻ <style></style> thì được đặt bên trong cặp thẻ <head></head>
<head>
<style>
body {
background: #fff;
}
p {
color: #000;
}
</style>
</head>
External CSS (Ngoại tuyến)
Đặt code CSS vào bên trong tập tin CSS (thường có đuôi là .css). Đây là một tập tin hoàn toàn độc lập so với file HTML. Sau đó dùng thẻ link <link rel="stylesheet" href="path_to_css_file"> đặt bên trong cặp thẻ <head></head> để nhúng tập tin CSS vào trang web.
<head>
<link rel="stylesheet" href="styles.css" />
</head>