CSS là gì?

By
-
Cập nhật lúc:
0
51
Lượt xem: 16
Rate this post

CSS là gì?

CSS là từ viết tắt của Cascading Style Sheets, một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi HTML. CSS là ngôn ngữ tạo phong cách cho trang web. HTML định dạng các phần tử như đoạn văn bản, tiêu đề, bảng,… và CSS giúp ta thêm style vào các phần tử đó như thay đổi bố cục, màu sắc, font chữ, cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996 để giúp định dạng trang web vì HTML không hỗ trợ việc định dạng.

Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ đánh dấu (markup language) và CSS là ngôn ngữ định hình phong cách, chúng không thể tách rời.

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

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

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

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

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

Một đoạn CSS bao gồm các phần như sau:

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

Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nằm bên trong cặp dấu ngoặc nhọn {}. Mỗi thuộc tính sẽ có một giá trị riêng, giá trị có thể là số hoặc các tên giá trị trong danh sách có sẵn của CSS. Các thuộc tính và giá trị phải được cách nhau bằng dấu hai chấm và mỗi dòng khai báo thuộc tính luôn có dấu chấm phẩy ở cuối. Một vùng chọn có thể sử dụng không giới hạn thuộc tính.

Định nghĩa của các phần

  • Bộ chọn (Selector): Là mẫu để chọn phần tử HTML muốn định nghĩa phong cách. Có thể áp dụng cho các trường hợp sau:

    • Tất cả phần tử theo dạng cụ thể, ví dụ: phần tử tiêu đề h1.
    • Thuộc tính id và class của các phần tử.
    • Các phần tử dựa vào mối liên quan với các phần tử khác trong cây phân cấp tài liệu.

  • Khai báo (Declaration): Khối khai báo chứa một hoặc nhiều khai báo, phân tách bằng dấu chấm phẩy. Mỗi khai báo bao gồm tên và giá trị đặc tính CSS, phân tách bằng dấu hai chấm. Khai báo CSS kết thúc bằng dấu chấm phẩy và nằm trong cặp dấu ngoặc móc. Ví dụ:

p {
   color: red;
   text-align: center;
}

  • Thuộc tính (Properties): Các cách bạn có thể tạo kiểu cho một phần tử HTML. Ví dụ: color là một trong những thuộc tính của phần tử p. Từ đó, với CSS bạn chỉ cần lựa chọn thuộc tính bạn muốn tác động trong bộ quy tắc của mình.

  • Giá trị thuộc tính: Nằm bên phải của thuộc tính sau dấu hai chấm (:), là giá trị thuộc tính. Có thể có nhiều giá trị để áp dụng cho thuộc tính cụ thể.

Về danh sách các thuộc tính của CSS, bạn có thể xem thêm trong CSS Reference của Mozilla.

Ví dụ:

HTML là ngôn ngữ đánh dấu với mỗi thẻ được sử dụng với ý nghĩa khác nhau.

<html>
<head>
<meta charset="utf-8">
<title>CSS là gì</title>
</head>
<body>
<h1>Tiêu Đề - Phần Tử H1</h1>
<p>Nội dung văn bản, phần tử P</p>
<div>Nội dung văn bản, phần tử DIV</div>
</body>
<html>

HTML được sử dụng để thêm nội dung và mô tả ý nghĩa của từng nội dung sử dụng các thẻ. Tuy nhiên, nó không quy định cách thức hiển thị các nội dung trên trang.

Ngược lại với HTML, CSS không được sử dụng để thêm nội dung hay mô tả ý nghĩa của nội dung trên trang. 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.

body {
   color: red; /* thiết lập màu chữ */
   font-size: 14px; /* thiết lập cỡ chữ */
}

h1 {
   color: black; /* thiết lập màu chữ mới cho các phần tử h1 */
   font-size: 18px; /* thiết lập cỡ chữ mới cho các phần tử h1 */
}

p {
   color: blue; /* thiết lập màu chữ mới cho các phần tử p */
}

Tại sao sử dụng CSS?

Dưới đây là ba lợi ích chính của CSS:

1. Giải quyết một vấn đề lớn

Trước khi có CSS, các thuộc tính như phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mỗi trang web. Điều này là một quá trình lâu dài và tốn công sức. Ví dụ: Nếu bạn đang phát triển một trang web lớn trong đó phông chữ và màu thông tin được thêm vào mỗi trang, điều này sẽ trở thành một công việc dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này, đây là khuyến nghị của W3C.

CSS giúp tổ chức mã nguồn trang web một cách gọn gàng và có trật tự hơn. Nội dung trang web được tách rời trong việc định dạng hiển thị. Điều này làm cho việc cập nhật nội dung dễ dàng hơn và giảm thiểu sự rối mã HTML.

2. Tiết kiệm thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài, do đó bạn có thể thay đổi toàn bộ trang web bằng cách chỉnh sửa một tệp duy nhất. Sử dụng CSS giúp bạn không phải lặp lại các mô tả cho từng thành phần. Điều này giúp bạn tiết kiệm rất nhiều thời gian làm việc và kiểm soát dễ dàng các lỗi không đáng có.

CSS cung cấp nhiều kiểu khác nhau, do đó có thể áp dụng cho nhiều trang web khác nhau, giảm thiểu việc lặp lại định dạng trang web giống nhau.

3. Bổ sung các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện trang web. CSS giúp bạn có nhiều kiểu trên một trang web, vì vậy bạn có khả năng điều chỉnh trang của bạn một cách không giới hạn.

Bạn có thể tham khảo thêm các vị trí tuyển dụng lập trình CSS lương cao tại Dnulib.

Các phiên bản của CSS

CSS đã có nhiều phiên bản khác nhau từ khi xuất hiện lần đầu vào ngày 10/10/1994 bởi Håkon Wium Lie. Các phiên bản mới giúp vá lỗi và mang đến những cải tiến hơn.

Phiên bản 1

Với phiên bản đầu tiên, CSS có những đặc điểm như: các thuộc tính phông chữ, màu văn bản, hình nền, thuộc tính văn bản, căn lề, định vị các yếu tố, nhận dạng duy nhất và phân loại chung các nhóm thuộc tính.

Phiên bản 2

CSS phiên bản 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS đầu tiên và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. Khái niệm về các loại phương tiện, hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều. Các kiểu font chữ mới để định dạng văn bản.

CSS 2.1

Ngoài ra, sau phiên bản 2 còn có một sự nâng cấp khác là CSS 2.1 được phát hành vào tháng 4 năm 2011. Phiên bản này nhằm mục đích sửa lỗi và loại bỏ tính năng không tương thích hoặc kém cho người dùng.

CSS3

CSS3 là phiên bản thay thế CSS2 với sự thay đổi đáng chú ý là module. Các module có khả năng mở rộng các tính năng trong CSS2 và duy trì khả năng tương thích ngược.

Đặc biệt, CSS3 mang đến các bộ chọn và thuộc tính mới cho phép linh hoạt hơn trong bố cục và trình bày trang. Điều này cho phép lập trình viên tạo ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó.

CSS 4

CSS4 là phiên bản kế thừa CSS3 hiện đang được phát triển và dự đoán sẽ có nhiều phương thức mới được thêm vào như Mutability, Hyperlink…

Để biết thêm thông tin về tuyển dụng lập trình CSS lương cao, hãy truy cập Dnulib.

Cách nhúng CSS vào website

Để CSS có thể thực thi trên website hoặc tài liệu HTML, chúng ta phải nhúng CSS vào website. Có 3 cách nhúng CSS vào website:

  1. Inline CSS: Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style></style>.
  2. Internal CSS: Sử dụng thẻ <style> bên trong thẻ <head> của HTML để tạo nơi viết mã CSS.
  3. External CSS: Tạo một tệp CSS riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>.

Inline CSS

Đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS. Mã CSS chỉ tác động trực tiếp đến phần tử.

Internal CSS

Đặt các cặp thuộc tính định dạng CSS vào trong cặp thẻ <style type="text/css"></style>. Cặp thẻ <style type="text/css"></style> nằm bên trong cặp thẻ <head></head> của tất cả các tập tin HTML.

External CSS

Với External CSS, ta đặt các thuộc tính định dạng vào trong tệp CSS riêng và nhúng vào tài liệu HTML thông qua cặp thẻ <link>. Chèn thẻ <link> vào trong cặp thẻ <head></head> của các tập tin HTML để nhúng tệp CSS vào trang web.

Ảnh minh hoạ: CSS là gì

Để biết thêm về vị trí tuyển dụng lập trình CSS lương cao, hãy truy cập Dnulib.

Dnulib – Thư viện công nghệ thông tin – https://dnulib.edu.vn

RELATED ARTICLESMORE FROM AUTHOR