CSS là thuật ngữ vô cùng quen thuộc với lập trình viên, những người đang tìm hiểu về website...Nhưng không phải ai cũng định nghĩa được CSS là gì. Tìm hiểu CSS là gì và những thông tin cơ bản cần phải biết về CSS trong bài viết dưới đây các bạn nhé!

CSS là gì?

 
CSS là từ viết tắt của Cascading Style Sheets (Định dạng kiểu xếp tầng), là một loại ngôn ngữ website, được gọi là ngôn ngữ biểu định kiểu chuẩn hóa bố cục trong toàn bộ trang web. Nó được sử dụng để mô tả cách các phần tử HTML hiển thị trong các chế độ xem khác nhau từ bố cục, màu sắc cho đến phông chữ...CSS thường được sử dụng để định dạng các kiểu trang web viết bằng HTML hoặc XHTML.

CSS bao gồm selector và declaration:

  • Selector (Bộ chọn): phần tử HTML được chọn để tạo kiểu 

  • Declaration (Khai báo): Nằm trong cặp dấu ngoặc nhọn {}, kết hợp giữa thuộc tính và giá trị của nó (phân tách bằng dấu hai chấm ":"). Mỗi khối khai báo có 1 hoặc nhiều khai báo, được phân tách với nhau bằng dấu chấm phẩy ";".

Cú pháp

h1 {color:green; text-align:center;}

Trong đó:
  • h1 là selector, câu lệnh CSS đó được sử dụng để tạo kiểu cho thẻ H1
  • {color:green; text-align:center;} là declaration, cho biết thẻ H1 sẽ có màu xanh lá cây và căn giữa.

Phân loại


  Có ba loại CSS:

  • External CSS (Định kiểu bên ngoài)

  • Internal CSS (CSS nội bộ)

  • Inline CSS (CSS nội tuyến)

Inline CSS

Mọi nội dung style đều nằm trong phần tử HTML. Loại CSS này thường được sử dụng cho một yêu cầu rất nhỏ bởi nó chỉ ảnh hưởng đến yếu tố duy nhất. Nếu style phức tạp hơn và được sử dụng cho phần HTML rộng hơn, loại CSS này không được khuyên dùng vì nó rất tốn thời gian và khó quản lý.

Ví dụ về Inline CSS:

<h3 style="color:white; background: red;"> Đây là ví dụ về Inline CSS </h3>

Internal CSS

Internal CSS được chỉ định trong phần <head>, nó sẽ ảnh hưởng đến tất cả các yếu tố trong phần <body>. CSS nội bộ được sử dụng trong điều kiện lập trình viên muốn sử dụng style đó trong phần thân HTML hoàn chỉnh.

Ví dụ về Internal CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Ví dụ Internal CSS</title>
    <style>
    p  {color:pink; text-align:justify;}
    h2 {color:orange; text-align:center; font-size:120%;}
    </style>
</head>
<body>
    <h2>CSS Internal</h2>
    <p>Đoạn văn màu hồng, căn đều 2 bên</p>
</body>
</html>

External CSS (Định kiểu bên ngoài)

Lập trình viên sẽ tạo tệp .css, trong đó là các yêu cầu về style của các thành phần HTML. Tệp này sẽ được nối với trang HTML theo yêu cầu.
Nói chung External CSS được sử dụng bất cứ khi nào lập trình viên có nhiều thuộc tính HTML và sử dụng chúng theo yêu cầu cho các trang HTML hoàn chính khác nhau. Người lập trình sẽ không phải viết lại style CSS nhiều lần trong một thân hoàn chỉnh của HTML kế thừa thuộc tính của tệp CSS.

Lập trình viên sẽ viết mã CSS trong Notepad và lưu dưới dạng tệp .css. Hoặc họ có thể trực tiếp thêm trong Solution Explorer và Visual Studio để sử dụng nó trên trang HTML. Để có hiệu suất tốt hơn và bảo trì dễ dàng hơn, External CSS được ưu tiên hơn các loại CSS còn lại.

Ví dụ về External CSS
  • File style.css
body {background-color: orange; font-family:arial;}
h1 {color: white;}
div {font-size: 20px; color: white;}
  • Trang HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>

<h1>Ví dụ về External CSS</h1>
<div>This is a div</div>

</body>
</html>
  • Mức độ ưu tiên

Ưu tiên 1: Kiểu CSS nội tuyến

Ưu tiên 2: Kiểu Internal CSS và External CSS

Ưu tiên 3: Mặc định của trình duyệt

Nếu các style khác nhau được xác định trên cùng một mức ưu tiên, style cuối cùng sẽ có mức ưu tiên cao nhất.

Tại sao nên sử dụng CSS và những ưu điểm chính

 
 Sử dụng CSS chủ yếu cho phép tách nội dung tài liệu, tập trung vào định dạng và sự xuất hiện. Việc tách nội dung có thể cải thiện khả năng tiếp cận nội dung, cung cấp linh hoạt hơn và có thể kiểm soát các đặc điểm trình bày cho phù hợp với các yêu cầu cụ thể.


CSS cũng có chức năng bố trí của một trang web, nó có thể giảm kích thước, sự lộn xộn và thời gian tải trang. Thêm bào đó, nó cho phép nhiều trang chia sẻ định dạng, làm giảm độ phức tạp và lặp đi lặp lại trong nội dung cấu trúc.

Ngoài ra, không có CSS, một trang web có thể trở nên đông đúc với các bản được lồng bên trong các bảng khác, khiến tốc độ của trang web bị chậm. Do đó, sử dụng CSS cũng có thể cải thiện tốc độ của trang web.

CSS cũng ngăn chặn sự lộn xộn. Nó tổ chức web code, khiến web code trở nên đơn giản và dễ hiểu. Điều này giúp trang web tải nhanh hơn và thuận tiện trong quá trình bảo trì & phát triển sau này.

CSS cũng được hỗ trợ tốt bởi hầu hết các trình duyệt hiện đại.

Lịch sử CSS


  Lịch sử phát triển của website được lấp đầy bởi những cốt mốc và ngã rẽ quan trọng. Với vai trò không thể thiếu trong sự hoàn thiện của website hiện nay, CSS cũng có lịch sử phát triển của riêng nó.


Trong những ngày đầu của website, không có gì gọi là CSS, tất cả chỉ là HTML. Điều này cho phép tạo ra các website có cấu trúc, nhưng về thiết kế và kiểu dáng thì lại rất ít. Có rất nhiều các giải pháp đã được đề xuất để thiết kế website đẹp, nhưng chỉ có Cascading Style Sheets (CSS), được phát triển bởi Håkon Wium Lie vào năm 1994 là được công nhận và sử dụng rộng rãi.

Vào năm 1997, CSS đã trở thành một khuyến nghị chính thức của W3C và bắt đầu xâm nhập vào Netscape Navigator và Internet Explorer 4 - các trình duyệt thống trị thời đó. Nhưng vấn đề là, các trang web nhìn trên IE có thể trông hoàn toàn khác so với Netscape Navigator bởi sự không nhất quán.

Trong khoảng thời gian đó, dự án Tiêu chuẩn Web (WaSP) được thành lập để thúc đẩy các tiêu chuẩn web, tính nhất quán và khả năng tương tác giữa các trình duyệt. Một vài thành viên đã tạo ra một nhánh của WaSP, được gọi là Ủy ban hành động CSS hay  CSS Samurai. Họ đăng báo cáo về các vấn đề CSS trong trình duyệt và bắt đầu truyền bá chúng.

Dần dần, CSS trở nên được hỗ trợ rộng rãi và nhất quán trong các trình duyệt. Trong những năm sau đó, CSS đã trở thành một công cụ đáng tin cậy cho các nhà phát triển web để tạo ra các thiết kế độc đáo, đầy màu sắc và mạnh mẽ.

Trên đây là chia sẻ của thiết kế website Tất Thành về CSS. Hy vọng rằng những thông tin được chia sẻ trên đây đã giúp bạn hiểu CSS là gì và những thông tin thú vị xung quanh CSS.