×

CSS Là Gì? Ngôn Ngữ CSS Dùng Để Làm Gì? 

Ngày đăng: 06/11/2022 | Không có phản hồi

Ngày cập nhật: 06/11/2022

css là gì

CSS là một thành phần quan trọng tạo nên các website hiện nay. Với CSS, bạn có thể tạo ra các trang web ấn tượng cho công ty của mình hoặc cho chính bạn. Vậy CSS là gì? Ngôn ngữ CSS dùng để làm gì và tại sao CSS lại có vai trò quan trọng trong một website, hãy cùng tìm hiểu trong bài viết này nhé.

CSS là gì?

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website. CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C). 

css
CSS là gì

CSS xử lý một phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class, v.v. Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọ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. Thông thường nhất, CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML.

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 đó.

Mối quan hệ của CSS và HTML

Như đã đề cập, CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe. 

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 tỏa sáng 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. Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.

Đọc thêm: 20+ Nguyên Tắc Và Xu Hướng Thiết Kế UI/UX Nổi Bật

Bố cục và cấu trúc của một đoạn CSS

Bố cục của một đoạn CSS

Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên trang web với các thuộc tính chính như:

  • Padding: Là các không gian xung quanh nội dung (ví dụ: không gian xung quanh đoạn văn bản).
  • Border: Là các đường nằm ngoài phần đệm.
  • Margin: Là khoảng cách bao quanh phía ngoài của phần tử.

Cấu trúc của một đoạn CSS

Thông thường, một đoạn CSS sẽ bao gồm các phần:

vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;….. }

Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặc nhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong danh sách của CSS. 

Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính không bị giới hạn ở một vùng chọn. 

Trong đó: 

  • Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Bạn có thể áp dụng các selector cho các trường hợp sau:
  • Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h2.
  • Thuộc tính id, class của phần tử.
  • Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu.
  • Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc.
  • Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra.
  • Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính. 

Bạn có thể xem danh sách các thuộc tính của CSS tại CSS Reference của Mozilla.

Ưu điểm của ngôn ngữ CSS là gì? 

Ngôn ngữ CSS có một số ưu điểm như sau:

  • Tăng tốc độ tải trang: CSS cho phép bạn sử dụng ít đoạn mã vì vậy tốc độ tải trang sẽ được cải thiện đáng kể. Ngoài ra, bạn còn có thể sử dụng một quy tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu HTML.
  • Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các website có định dạng thân thiện với người dùng. Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện.
  • Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho nhiều trang bằng một chuỗi mã. Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang web. Ví dụ: nếu bạn có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại.
  • Thay đổi định dạng dễ dàng: Nếu bạn cần thay đổi định dạng của một nhóm trang cụ thể, bạn có thể dễ dàng thực hiện việc này với CSS mà không cần phải sửa từng trang riêng lẻ. Chỉ cần chỉnh sửa biểu định kiểu CSS tương ứng và bạn sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng biểu định kiểu đó.
  • Khả năng tương thích trên các thiết bị: Thiết kế web đáp ứng là một vấn đề cần được chú trọng. Trong thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể điều hướng dễ dàng trên tất cả các thiết bị. Cho dù thiết bị di động hay máy tính bảng, máy tính để bàn hay thậm chí là TV thông minh, CSS kết hợp với HTML để tạo ra thiết kế đáp ứng.

CSS thực sự hoạt động như thế nào? 

ngôn ngữ css
Ngôn ngữ CSS hoạt động như thế nào

Khi trình duyệt hiển thị một tài liệu, nó phải kết hợp nội dung của tài liệu với kiểu cách mà nó sẽ xuất hiện. Nó xử lý tài liệu theo một số giai đoạn mà Glints sẽ liệt kê bên dưới. Hãy nhớ rằng đây là một phiên bản rất đơn giản của những gì xảy ra khi một trình duyệt tải một trang web và các trình duyệt khác nhau sẽ xử lý quy trình theo những cách khác nhau. 

  • Bước 1: Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
  • Bước 2: Trình duyệt chuyển đổi HTML thành DOM (Document Object Model – Mô hình đối tượng tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính.
  • Bước 3: Trình duyệt tìm nạp hầu hết 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 nhúng, video và thậm chí cả CSS được liên kết. Sau đó, JavaScript được xử lý trong quá trình này.
  • Bước 4: Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại bộ chọn của chúng thành các “nhóm” khác nhau. Ví dụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
  • Bước 5: Cây kết xuất được đặt trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
  • Bước 6: Hình ảnh hiển thị trực quan của trang được đưa ra màn hình (giai đoạn này được gọi là painting).

3 cách nhúng CSS vào website

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

  • Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)
  • Nội tuyến (Internal CSS)
  • Ngoại tuyến (External CSS)

Hãy cùng tìm hiểu về 3 cách nhúng CSS dưới đây nhé.

Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)

Với cách này, chúng ta đặt mã CSS vào thẳng thuộc tính style của phần tử. Và với cách nhúng trực tiếp, mã CSS sẽ chỉ tác động lên chính phần tử đó.

Để chỉ định nhiều quy tắc CSS, chúng ta có thể sử dụng dấu chấm phẩy để ngăn cách giữa các rules. Các rules này sẽ được đặt bằng cách sử dụng thuộc tính “style” kèm theo tên thuộc tính, giá trị thuộc tính.

Nội tuyến (Internal CSS)

Với cách nhúng nội tuyến, bạn cần dùng thẻ <style> để tạo ra khu vực viết CSS. Bạn có thể để CSS ở bất kỳ đâu trong HTML, nhưng nên đặt <style> trong thẻ <head>. 

Ngoại tuyến (External CSS)

Trong External CSS, chúng ta sẽ sử dụng phần tử “link” để thêm các style sheet ở bên ngoài vào trong tài liệu HTML.

Trước hết chúng ta cần tạo các rules (quy tắc) trong một file riêng có phần đuôi mở rộng là .css. Tiếp theo, bạn cần thêm file CSS này vào phần tử head trong tài liệu HTML.

Đây là phương pháp phổ biến nhất để nhúng CSS vào tài liệu HTML. Với cách chèn này, các lập trình viên có thể viết CSS cho nhiều trang web khác nhau và bổ sung cùng một file CSS cho tất cả các trang tương tự.

Kết luận 

Trên đây bạn đã cùng Glints tìm hiểu về CSS là gì và ngôn ngữ CSS dùng để làm gì. Hi vọng bài viết trên đã mang đến cho các bạn những thông tin hữu ích mà bạn đang tìm kiếm nhé.

Bài viết có hữu ích đối với bạn?

Đánh giá trung bình 3 / 5. Lượt đánh giá: 8

Chưa có đánh giá nào! Hãy là người đầu tiên đánh giá bài viết.

Chúng tôi rất buồn khi bài viết không hữu ích với bạn

Hãy giúp chúng tôi cải thiện bài viết này!

Làm sao để chúng tôi cải thiện bài viết này?

[jetpack-related-posts]

Có thể bạn cũng thích

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Khám phá ngay 10k+ công việc mới tại Glints
Nền tảng tuyển dụng hàng đầu Đông Nam Á

X