CSS là gì? CSS quan trọng như thế nào trong website?

Đăng Tùng Lâm

3447

05-06-2024

Mặc dù website đã trở nên khá phổ biến, thế nhưng không phải ai cũng có thể hiểu rõ về cấu trúc của trang web, hay là về CSS. Vậy CSS là gì? Bố cục và cấu trúc của CSS ra sao? Hãy cùng Bizfly Cloud đi tìm câu trả lời thông qua bài viết dưới đây nhé!

CSS là gì?

CSS (viết tắt của Cascading Style Sheets) là một ngôn ngữ dùng để định dạng lại và tạo phong cách cho những phần tử được tạo ra bởi các ngôn ngữ đánh dấu HTML. Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ. Nói một cách dễ hiểu CSS dùng để thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hay thêm phần thẩm mỹ cho website.

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác. Một ví dụ đơn giản: Khi bạn xây một ngôi nhà thì gạch và vật liệu xây dựng là các thẻ HTML và CSS là sơn màu, hoa văn… Sơn màu sẽ tác động làm thay đổi màu mặc định của gạch giúp cho ngôi nhà thêm đẹp và sang trọng hơn. Mối tương quan giữa HTML và CSS rất mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là không thể tách rời.

Lịch sử phát triển CSS

• 1994: Lần đầu tiên được đề xuất bởi Hakon Wium Lie vào ngày 10 tháng 10. Vào thời điểm đó, Lie đang làm việc với Tim Berners-Lee tại CERN.
• 1996: CSS được xuất bản vào ngày 17/11. Một số ngôn ngữ định kiểu khác cho web đã được đề xuất cùng lúc và các cuộc thảo luận về danh sách gửi thư cộng đồng cũng như đồng thuận trong World Wide Web Consortium dẫn đến CSS W3C đầu tiên (CSS1) được phát hành vào năm 1996. Đặc biệt, một đề nghị của Bert Bos có ảnh hưởng hơn đó là ông trở thành đồng tác giả của CSS1 và được coi là đồng sáng tạo CSS. CSS trở thành chính thức với CSS được xuất bản vào tháng 12
• 1997: Tạo CSS cấp 2 vào ngày 4 tháng 11
• 1998: Xuất bản vào ngày 12 tháng 5

Tập tin định kiểu theo tầng đã tồn tại ở dạng này hay dạng khác kể từ khi bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML - Standard Generalized Markup Language) vào những năm 1980 và CSS được phát triển để cung cấp biểu định kiểu cho web. 

Một yêu cầu đối với ngôn ngữ biểu định kiểu web là nó đến từ các nguồn khác nhau trên web. Do đó, các ngôn ngữ biểu định kiểu hiện có như DSSSL và FOSI không phù hợp. Mặt khác, CSS để cho kiểu của tài liệu bị ảnh hưởng bởi nhiều biểu định kiểu theo kiểu "cascading"

Khi HTML phát triển, nó đã bao gồm nhiều phong cách hơn để đáp ứng nhu cầu của các nhà phát triển web. Sự phát triển này đã cho nhà thiết kế kiểm soát nhiều hơn về diện mạo trang web. Một điều nữa đó là chi phí HTML phức tạp hơn. Sự khác biệt trong việc triển khai trình duyệt web, chẳng hạn như ViolaWWW và WorldWideWeb, khiến giao diện trang web nhất quán trở nên khó khăn và người dùng ít kiểm soát hơn cách hiển thị nội dung web.

Lý do nên sử dụng CSS

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

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, căn chỉnh phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài. Nhờ CSS mà source code của trang web sẽ được tổ chức gọn gàng hơn, trật tự hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đó, quá trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML.

Ví dụ: Nếu chúng ta đang làm một trang web lớn, cần thêm phông chữ và thông tin màu sắc trên mỗi trang, thì đó sẽ là một quá trình rất dài. CSS được tạo ra để giải quyết vấn đề này. Đó là một khuyến nghị của W3C.

Tiết kiệm được nhiều thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài, vì vậy có thể thay đổi toàn bộ trang web chỉ bằng cách thay đổi một tệp. Sử dụng CSS sẽ giúp bạn không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, bạn có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có.

Cung cấp thêm 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 của trang web. CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng điều chỉnh trang của bạn trở nên vô hạn.

Trang tải nhanh hơn

CSS không yêu cầu viết các thuộc tính thẻ HTML mọi lúc. Chỉ có một lần viết quy tắc cho một thẻ, có thể áp dụng quy tắc này cho tất cả các lần xuất hiện của thẻ tương ứng. Vì vậy, sử dụng CSS sẽ có ít code hơn, có nghĩa là thời gian tải xuống nhanh hơn.

Bảo trì trang web dễ dàng hơn

CSS giúp bảo trì trang web dễ dàng hơn. Nó đóng một vai trò thiết yếu trong việc bảo trì trang web. Nếu chúng ta yêu cầu một thay đổi toàn cục trong tệp, nó có thể được thực hiện đơn giản bằng cách thay đổi kiểu mà tất cả các phần tử trên trang web sẽ tự động cập nhật. Tệp CSS cung cấp giao diện linh hoạt cho trang web, có thể được thay đổi theo cách thuận tiện. Nó cũng giúp định dạng HTML và sửa đổi các phần tử dữ liệu tương ứng dễ dàng hơn.

Khả năng tương thích nhiều thiết bị

CSS tương thích với các phiên bản ngôn ngữ cũ hơn để chúng ta có thể sử dụng CSS với các phiên bản ngôn ngữ cũ hơn. Do đó, nếu ứng dụng CSS được phát triển với các phiên bản ngôn ngữ lập trình cũ hơn và nếu nhà phát triển kết hợp cùng các cải tiến mới, thì CSS có thể dễ dàng thực hiện với các thay đổi tương ứng để nhà phát triển có thể cập nhật mã hiện có thành công. CSS cho phép tối ưu hóa nội dung cho nhiều loại thiết bị.

Mối quan hệ mật thiết giữa CSS và HTML

CSS và HTML có mối liên hệ mật thiết trong quá trình thiết kế trang web. Có thể ví như này: HTML là cấu trúc cơ bản giống như bộ khung của một chiếc xe ô tô, CSS là phần trang trí và phong cách, giống như màu sắc và kiểu dáng của chiếc xe.

Một website hoàn toàn có thể hoạt động mà không cần CSS, tuy nhiên nếu thiếu CSS thì trang web đó sẽ thiếu đi sự hấp dẫn, thẩm mỹ, thậm chí khó sử dụng hơn . Bởi CSS chính là “linh hồn” để giao diện của website trở nên nổi bật và mang lại trải nghiệm tuyệt vời cho người dùng.

Bên cạnh định dạng, bố cục trang web, CSS còn đóng vai trò trọng trong điều chỉnh kích thước hình ảnh, màu chữ, khoảng cách giữa các phần tử và nhiều yếu tố khác.

Ưu điểm, nhược điểm của CSS là gì?

Ngôn ngữ nào cũng có những ưu và nhược điểm, CSS cũng không ngoại lệ.

Ưu điểm của CSS

CSS có những ưu điểm nổi bật sau:

• Cải thiện được trải nghiệm người dùng trên trang web: CSS vừa tạo ra website ấn tượng mà còn giúp tăng trải nghiệm người dùng
• Dễ dàng thay đổi định dạng hơn nhờ CSS: Bạn chỉ cần thay đổi biểu định kiểu CSS tương ứng, những thay đổi sẽ được áp dụng tự động cho toàn bộ những trang đang dùng biểu định đó mà không phải chỉnh sửa riêng cho từng trang.
• Tiết kiệm thời gian: CSS giúp áp dụng những quy tắc và style cho nhiều trang một cách dễ dàng. Một biểu định kiểu có thể được sử dụng lại trên nhiều trang giúp giảm công việc lặp lại.
• Website tương thích trên nhiều thiết bị: CSS cùng với HTML tạo ra các thiết kế web đáp ứng. Có nghĩa là website đó có thể hiển thị một cách tối ưu trên những thiết bị khác nhau như điện thoại di động, máy tính, máy tính bảng và TV thông minh.
• Giúp tăng tốc độ tải trang: Lượng mã cần tải xuống được dùng ít hơn và áp dụng quy tắc CSS cho nhiều phần tử cùng một lúc, tối ưu hóa tốc độ tải trang của website.

Nhược điểm của CSS

Bên cạnh ưu điểm, CSS còn tồn tại một số nhược điểm sau:

• Gây khó hiểu cho người mới học do chứa nhiều thuật ngữ chuyên ngành và khái niệm phải học.
• Bảo trì CSS có thể khó nếu như không biết tổ chức mã của mình cẩn thận và hợp lý.
• Gặp phải lỗi khác nhau trong quá trình xây dựng và thiết kế trang web nếu như không sử dụng CSS đú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 thông tin kiểu của nó. Nó xử lý tài liệu theo một số giai đoạn được liệt kê dưới đây. 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à rằng các trình duyệt khác nhau sẽ xử lý quá trình này theo những cách khác nhau:

1. Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).

2. Nó 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.

3. Sau đó, trình duyệt sẽ 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 và video được nhúng ... và CSS được liên kết. JavaScript được xử lý sau một chút trong quá trình này và chúng tôi sẽ không nói về nó ở đây để giữ cho mọi thứ đơn giản hơn.

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ụ như 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ào 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à render tree).

5. Render tree được bố trí 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ó.

6. Hiển thị trực quan của trang được hiển thị trên màn hình

Sơ đồ sau đây cũng cung cấp một cái nhìn đơn giản về quy trình:

Bố cục và cấu trú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 của bạn với các thuộc tính như:

• Padding (Vùng đệm): Không gian xung quanh nội dung, chẳng hạn như không gian xung quanh một đoạn văn bản
• Border (Đường viền): Là đường liền nằm 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 bao gồm các phần sau:

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

1. Tất cả phần tử theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h1.
2. Thuộc tính id và class của các phần tử.
3. 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 với nhau bằng các dấu chấm phẩy. Mỗi khai báo gồm tên và giá trị đặc tính CSS, phân tách bằng dấu phẩy. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy, khối khai báo nằm trong các dấu ngoặc móc. Trong ví dụ dưới đây, các phần tử sẽ được căn giữa, chữ màu đỏ.

• Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. (Với trường hợp này thì color được xem là một trong những thuộc tính của phần tử p). Chính vì vậy, với CSS thì bạn chỉ cần lựa chọn thuộc tính mà chính bạn muốn tác động nhất trong bộ quy tắc của mình.
• Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta sẽ sở hữu giá trị thuộc tính mà việc lựa chọn trong số đó sẽ xuất hiện nhiều lần để có thể cho một thuộc tính cụ thể nào đó.

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ẽ luôn có một giá trị riêng, giá trị có thể là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS. 

Phần giá trị và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ 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. Ví dụ:

Các phiên bản CSS thông dụng

CSS kề từ lúc hình thành đến nay có nhiều phiên bản khác nhau, càng phiên bản mới càng có thêm nhiều tính năng, và nếu có bất kỳ lỗi nào cũng sẽ được fix gọn gàng.

Phiên bản CSS 1

CSS đầu tiên để trở thành Khuyến nghị chính thức của W3C là CSS cấp 1, được xuất bản vào ngày 17 tháng 12 năm 1996. Håkon Wium Lie và Bert Bos được ghi nhận là nhà phát triển ban đầu. Nó có những đặc điểm như:

• Có thuộc tính phông chữ như: kiểu chữ và nhấn mạnh chữ
• Tùy chỉnh được màu của văn bản, hình nền và các yếu tố khác
• Các thuộc tính văn bản như khoảng cách giữa các từ, chữ cái và dòng văn bản
• Có thể linh hoạt sắp xếp văn bản, hình ảnh, bảng
• Có thể căn lề, viền, đệm và định vị cho hầu hết 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

Lưu ý: Hiện nay W3C không còn khuyến nghị duy trì CSS 1 nửa.

Phiên bản CSS 2

CSS cấp 2 được W3C phát triển vào tháng 5 năm 1998. Nó là phiên bản nâng cấp từ CSS1, ngoài ra CSS 2 còn bao gồm một số khả năng mới như định vị tuyệt đối, tương đối và cố định các yếu tố và 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ũng các thuộc tính phông chữ mới.

Css 2.1 được nâng cấp, sửa lỗi loại bỏ những tính năng kém hoặc không tương thích đầy đủ cho người dùng. Trong khoảng thời gian từ năm 2004 đến 2010 chúng được sửa đổi liên tục. Cuối cùng, CSS 2.1 đã đi đến Đề xuất được đề xuất vào ngày 12 tháng 4 năm 2011 và chỉ 2 tháng sau nó đã được đưa đến người dùng một lần nữa.

Lưu ý: Hiện nay W3C không còn khuyến nghị duy trì CSS 2 nữa.

Phiên bản CSS 3

Không giống như CSS 2, một đặc điểm kỹ thuật đơn lớn xác định các tính năng khác nhau, CSS 3 được chia thành nhiều tài liệu riêng biệt gọi là "mô-đun". Mỗi mô-đun thêm các khả năng mới hoặc mở rộng các tính năng được xác định trong CSS 2, duy trì khả năng tương thích ngược. 

Bản nháp CSS 3 sớm nhất đã được xuất bản vào tháng 6 năm 1999. CSS3 là phiên bản CSS (Cascading Style Sheets) thay thế CSS2 . Nó giới thiệu các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày trang. Một số cập nhật, chẳng hạn như thuộc tính bóng hộp (cho phép thêm bóng đổ vào một phần tử), cho phép áp dụng hiệu ứng hình ảnh mà không cần tạo hình ảnh đặc biệt.

Phiên bản CSS 4

CSS 4 không có đặc điểm kỹ thuật tích hợp duy nhất vì nó được chia thành các mô đun riêng biệt. Vì CSS3 chia định nghĩa của ngôn ngữ CSS thành các mô-đun, nên các mô-đun đã được phép cấp độc lập. Hầu hết các mô-đun là cấp 3, họ xây dựng dựa trên những thứ từ CSS 2.1. Một vài mô-đun cấp 4 tồn tại (chẳng hạn như Giá trị hình ảnh, hình nền, dựa trên chức năng của mô-đun cấp 3 trước đó. Các mô-đun khác xác định chức năng hoàn toàn mới như Flexbox.

Nhìn chung, đối với những người theo đuổi quá trình lập trình web. Dù quá trình phát triển và độ phổ biến của nó như thế nào thì CSS vẫn là công nghệ nền tảng của World Wide Web bên cạnh HTML và JavaScript.

Làm thế nào để sử dụng CSS cho website

Để CSS có thể thực thi trên website hoặc HTML Documents thì phải tiến hành nhúng CSS vào website. Nếu không, các định dạng CSS sẽ không thực thi trên HTML. Có 3 cách nhúng CSS vào website:

• Inline CSS – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
• Internal CSS – dùng thẻ <style> bên trong thẻ <head> của HTML để tạo ra nơi viết mã CSS.
• External CSS – Tạo một tập tin .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 nên chính phần tử đó.

Internal CSS

Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ <style type=”text/css”></style>

Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head>

External CSS

Với External CSS: Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS. Đây là một tập tin hoàn toàn độc lập so với file (File này thường được đặt phần mở rộng là .css) sau đó dùng thẻ link <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến tập tin CSS”> đặt ở phần head (cặp thẻ <head></head> của các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.

Trên đây là toàn bộ những kiến thức cơ bản về CSS hy vọng sẽ giúp bạn có cái nhìn toàn diện hơn về CSS là gì và bố cục, cách thức hoạt động của nó. Hãy theo dõi các bài viết tiếp theo của Bizfly Cloud để cập nhật những kiến thức hữu ích mỗi ngày nhé!