CSS là gì?

60625

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 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ử <p> 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ử 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 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ẻ <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>. CSS là gì

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.

THam khảo thêm các vị trí cho lập trình IT tại đây

RELATED ARTICLESMORE FROM AUTHOR