Ý nghĩa của CSS trong lập trình web

Mới tìm hiểu về nghề lập trình website? Hãy cùng Green Academy tìm hiểu về ngôn ngữ CSS, một trong bộ ba công cụ không thể thiếu dành cho mọi lập trình viên website.

CSS là viết tắt của cụm từ Cascading Style Sheets, đây là ngôn ngữ dùng để tìm và định dạng miêu tả lại các phần tử được tạo ra bởi ngôn ngữ Markup cấu trúc HTML. Để nói một cách ngắn gọn, CSS là ngôn ngữ dùng để tạo nên phong cách cho trang web. Chúng ta có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử, cấu trúc trên website như việc tạo ra các đoạn văn bản, các tiêu đề heading, bảng,…thì ngôn ngữ CSS sẽ giúp chúng ta có thể định dạng “phong cách” cho các phần tử HTML đó như thay đổi bố cục, màu sắc trang, màu chữ, font chữ, cấu trúc…

Ngôn ngữ CSS lần đầu tiên được đề xuất bởi Håkon Wium Lie vào ngày 10 tháng 10 năm 1994. Trong  thời điểm đó, Lie đang làm việc với Tim Berners-Lee (cha đẻ của ngôn ngữ HTML và mạng World Wide Web) tại CERN. CSS hoạt động dựa trên phương thức là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML (tag), lớp (class), ID hay nhiều kiểu khác. Sau đó, nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó.

Ví dụ về CSS:

p   {

    font-size:   100%;

    color:   dimgray;

  }

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

Khi một trình duyệt web (browser) hiển thị một tài liệu, nó phải kết hợp nội dung cùng với kiểu trình bày thông tin của tài liệu đó. Trình duyệt sẽ xử lý tài liệu theo một số giai đoạn, mà Green Academy đã liệt kê bên dưới. Tuy nhiên, hãy nhớ rằng đây là một phiên bản rất đơn giản của một chuỗi những gì sẽ 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ý quá trình này theo những cách khác nhau. Và đây là những gì sẽ xảy ra:

1. Trình duyệt sẽ tải HTML (ví dụ như: tải nó từ mạng)
2. Trình duyệt chuyển đổi HTML thành DOM (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 trong quá trình này. Green Academy sẽ nói về ngôn ngữ JavaScript sau ở bài viết sau để 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 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, trình duyệt sẽ tìm ra các quy tắc nên được áp dụng cho các nodes 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).
5. Cây kết xuất đượ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. Sau tất cả, hiển thị trực quan của trang sẽ được hiển thị trên màn hình (giai đoạn này được gọi là painting).

Có vẻ hơi khó hiểu phải không? Do đó sơ đồ sau đây sẽ cung cấp một cái nhìn đơn giản về quy trình hoạt động của CSS:

Tại sao trang web lại cần phải có CSS?

Để có thể tạo nên một trang web hoàn thiện cần phải có CSS bởi vì những lý do sau đây:

1. Giải quyết được nhiều vấn đề khác nhau

Nhờ có CSS, source code trang Web của bạn sẽ được tổ chức gọn gàng hơn, trật tự và dễ kiểm soát hơn. Nội dung trên website sẽ được tách bạch hơn, dễ dàng trong việc định dạng hiển thị hoặc chỉnh sửa lúc cần. Đồng thời, quá trình cập nhật nội dung sẽ rất dễ dàng và có thể hạn chế tối đa những sai sót trong phần soạn thảo HTML.

2. Tiết kiệm thời gian cho lập trình viên

Trước khi có ngôn ngữ CSS, các thẻ (tag) như phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, kích thước, đường viền… phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài, tốn rất nhiều thời gian và công sức của các lập trình viên. Nhờ có CSS, bạn sẽ dễ dàng kiểm soát, không mất thời gian oan uổng cho những dòng code không đáng.

Ví dụ: Nếu bạn đang phát triển một trang web lớn, nhiều thông tin, gồm nhiều mục với phông chữ và màu sắc khác nhau được thêm vào mỗi trang, đây sẽ là một nỗi ám ảnh vì bạn buộc phải code lại toàn bộ những thuộc tính trên ở mỗi trang dù chúng giống nhau.

3. Cung cấp thêm nhiều sự lựa chọn thuộc tính cho trang web

Một ưu điểm vượt trội khác của CSS, đó là nó sẽ cung cấp thuộc tính chi tiết hơn so với HTML trên cùng một giao diện trang web. Nhờ đó mà CSS cũng đem lại nhiều

CSS là chữ 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 lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web.

Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác. Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọ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.

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 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: 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ư thế này:

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ẽ 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.

Định nghĩa của các phần này như 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:
  • Tất cả phần tử theo một dạng cụ thể nào đó, 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 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 đỏ.

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

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

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

Ví dụ:

HTML là ngôn ngữ đánh dấu với HTML từng thẻ sẽ được 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ử H1h1>
    <p>Nội dung văn bản, phần tử Pp>
    <div>Nội dung văn bản, phần tử DIVdiv>
body>
<html>

HTML được 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 như thế nào.

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?

Đâ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 thẻ như phông chữ, màu sắc, kiểu nền, các 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. Đây là một quá trình rất dài tốn thời gian và công sức. Ví dụ: Nếu bạn đang phát triển một trang web lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. Đó là một khuyến cáo của W3C.

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.

2. Tiết kiệm rất 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 bằng cách thay đổi chỉ 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ó.

CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau.

3. 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.

Tham khảo thêm các vị trí tuyển lập trình CSS lương cao tại Topdev.

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

CSS được xuất hiện lần đầu tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. Bắt đầu đó, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều 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 cụ thể như: thuộc tính font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho 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. Xuất hiện 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 release vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc không tương thích cho người dùng.

CSS3

CSS3 là phiên bản thay thế cho 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 được xác định trong CSS2. Nhằm duy trì khả năng tương thích ngược.

Đặc biệt, CSS3 mang đến các bộ chọn (selector) và thuộc tính (properties) mới cho phép linh hoạt hơn với bố cục và trình bày trang. Nhờ đó, người lập trình có thể 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

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

Tổng hợp: Tuyển dụng CSS lương cao lên đến 3000 USD

Cách nhúng CSS vào 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ẻ .
• Internal CSS – dùng thẻ

  Cặp thẻ thì được đặt bên trong cặp thẻ

  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 đặt ở phần head (cặp thẻ của các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.