CSS là một cú pháp dựa trên quy tắc trong lập trình quan trọng đối với việc phát triển web. Các nhà phát triển web biết CSS đang có nhu cầu cao đối với các doanh nghiệp. Trên thực tế, theo Cục Thống kê Lao động, phát triển web là một nghề được kỳ vọng sẽ phát triển nhanh hơn nhiều so với nghề trung bình trong thập kỷ tới. Trong bài viết này, kidoweb giải thích CSS là gì bằng một ví dụ và những lợi ích của CSS, đồng thời chúng tôi trả lời các câu hỏi thường gặp về CSS.
CSS là gì?
CSS theo nghĩa đen có nghĩa là các biểu định kiểu xếp tầng và nó đại diện cho một ngôn ngữ lập trình được thiết kế để cung cấp cú pháp phong cách để xây dựng các trang web và ứng dụng web.
Khi nói về CSS, bạn cũng phải nói về HTML. HTML là ngôn ngữ mã hóa được sử dụng để xây dựng nhiều tài liệu web, trang web và ứng dụng web. HTML tự nó xác định những thứ như cấu trúc. Ví dụ: HTML có thể xác định vị trí của thanh điều hướng và các lựa chọn mà người dùng có thể chọn trên thanh điều hướng.
Ngược lại, CSS xác định các thuộc tính phong cách của trang web như màu sắc, bố cục trang và phông chữ. Vì vậy, HTML cung cấp khung chức năng của bạn và CSS cung cấp các yếu tố thiết kế và thẩm mỹ. Tuy nhiên, CSS tương tác với HTML để thực hiện chức năng thêm các phần tử kiểu dáng.
Ví dụ về CSS
<!DOCTYPE html>
<html><style>
body {background-color:pink; text-align:left;}
h1 {color:red; font-size:55x; }
p {font-family:arial; font-size:35px;}
</style><body>
<h1>Heading</h1>
<p>Paragraph</p>
</body></html>
Những lợi ích mà CSS đem lại
CSS là tiêu chuẩn công nghiệp để tạo kiểu cho các trang web HTML. Điều này vẫn không thay đổi trong nhiều năm. Tuy nhiên, một số nhà phát triển vẫn có thể chỉ dựa vào HTML để tạo kiểu cho trang web của họ. Đây là một cách tiếp cận phức tạp hơn nhiều vì bạn phải mô-đun hóa trang web theo cách thủ công bằng HTML, trong khi CSS thực hiện việc này cho bạn. Dưới đây là một số lợi ích của CSS có thể giúp bạn chuyển đổi phương pháp HTML của mình để bao gồm các biểu định kiểu xếp tầng:
Các câu hỏi về CSS
Các mô-đun trong CSS là gì?
Là một ngôn ngữ lập trình, CSS được chia thành các mô-đun. Ngôn ngữ được mô-đun hóa sẽ gói dữ liệu và mã xung quanh một tính năng cụ thể vào một mô-đun có thể mở, đọc hoặc chỉnh sửa. Các mô-đun tồn tại cho những thứ như hình nền và đường viền.
Trình duyệt mặc định trong CSS như thế nào?
Một số trình duyệt cung cấp hỗ trợ CSS sẵn sàng truy cập, dưới dạng mã CSS được chỉ định để tạo kiểu trang web được định dạng trước khi khởi chạy trình duyệt, tùy thuộc vào trình duyệt. Các nhà phát triển web có thể không muốn trang web của họ hoạt động ở chế độ mặc định của trình duyệt và điều này có thể bị ghi đè.
Sơ lược về lịch sử CSS
Trong những ngày đầu của web (cuối những năm 1980 và đầu những năm 1990), các trang web chủ yếu là văn bản thuần túy với các tùy chọn định dạng tối thiểu. Sự ra đời của HTML cho phép định dạng cơ bản bằng cách sử dụng các thẻ như `<font>` và `<b>`.
Năm 1994, Håkon Wium Lie và Bert Bos , cả hai đều làm việc tại CERN, đã giới thiệu khái niệm CSS trong một bài báo có tiêu đề “Các biểu định kiểu HTML xếp tầng: một đề xuất”. Họ ủng hộ việc tách nội dung và cấu trúc của tài liệu web khỏi cách trình bày trực quan của chúng.
CSS Cấp 1:
CSS cấp 1 đã trở thành khuyến nghị chính thức của World Wide Web Consortium (W3C) vào tháng 12 năm 1996. Nó giới thiệu các thuộc tính tạo kiểu cơ bản như màu sắc, phông chữ, lề và vị trí.
CSS Cấp 2 (1998-2007):
CSS cấp 2 Đã mở rộng dựa trên CSS1 bằng cách thêm các tùy chọn tạo kiểu nâng cao hơn, bao gồm cải thiện vị trí, đường viền, hình nền và hỗ trợ cho các loại phương tiện. Tuy nhiên, việc triển khai một số tính năng CSS2 khác nhau giữa các trình duyệt khác nhau, dẫn đến sự không nhất quán trong kết xuất và cách hiển thị nội dung.
Cuối những năm 1990 và đầu những năm 2000 được đánh dấu bằng ” Cuộc chiến trình duyệt “, nơi Internet Explorer và Netscape Navigator cạnh tranh để thống trị web. Thời đại này chứng kiến sự hỗ trợ CSS không nhất quán trên các trình duyệt, dẫn đến nhu cầu về các giải pháp phức tạp để đạt được các thiết kế nhất quán.
Năm 2003, dự án CSS Zen Garden đã thể hiện sức mạnh của CSS bằng cách chứng minh cách tạo kiểu cho cùng một nội dung HTML theo nhiều cách sáng tạo mà không làm thay đổi cấu trúc cơ bản. Dự án này nhấn mạnh tầm quan trọng của việc tách biệt nội dung và trình bày.
CSS Cấp 3 (2001-2017):
CSS cấp 3 đã giới thiệu nhiều tính năng và mô-đun mới, bao gồm các góc tròn, độ dốc, hoạt ảnh, chuyển tiếp và bố cục hộp linh hoạt. Tuy nhiên, bản chất mô-đun của CSS3 đã dẫn đến việc áp dụng dần dần, với các tính năng khác nhau sẽ có sẵn vào những thời điểm khác nhau.
Mặc dù không có thông số kỹ thuật chính thức được gọi là CSS4, nhưng thuật ngữ này đã được sử dụng để chỉ sự phát triển liên tục của CSS ngoài các mô-đun CSS3. W3C đã hướng tới mô-đun hóa để cho phép phát triển và triển khai độc lập các tính năng CSS khác nhau.
CSS là một công nghệ cơ bản trong việc định hình thiết kế trực quan của web. Sự phát triển của nó đã góp phần tách biệt các mối quan tâm trong phát triển web, giúp việc tạo các trang web phản hồi nhanh, dễ truy cập và hấp dẫn về mặt hình ảnh trở nên dễ dàng hơn.
CSS hoạt động như thế nào?
CSS chứa các quy tắc và giá trị mà trình duyệt web sau đó có thể áp dụng cho nội dung của trang web để hiển thị chính xác nội dung của nó. Ví dụ: bạn có thể sử dụng CSS để xác định rằng phần nội dung của trang có nền màu xanh lam và văn bản được hiển thị bằng phông chữ Helvetica màu trắng với kích thước 18px. Ngược lại, những người xây dựng trang web sử dụng phần mềm What You See is What You Get (WYSIWYG) không yêu cầu người dùng nhập bất kỳ mã mô tả nào – tất cả đều được tích hợp sẵn trong nền tảng.
Các quy tắc CSS được đọc theo thứ tự ưu tiên cụ thể trong tài liệu (và do đó có từ “xếp tầng” trong Cascading Style Sheets). Thông thường, quy tắc ở sau trong tài liệu CSS sẽ là quy tắc chiến thắng – trừ khi quy tắc đầu tiên cụ thể hơn. Ví dụ: bạn có thể có hai quy tắc xung đột trong tệp CSS của mình – như đặt phông chữ nội dung thành màu xanh lam và phông chữ đoạn văn thành màu xanh lục. Trong trường hợp này, quy tắc chiến thắng sẽ là phông chữ của đoạn văn, vì nó cụ thể hơn phông chữ nội dung.
Các loại CSS hiện nay
CSS nội tuyến
CSS nội tuyến liên quan đến việc thêm CSS trực tiếp vào các thành phần HTML bằng thuộc tính `style`. Cách tiếp cận này rất hữu ích để áp dụng các phong cách độc đáo cho các phần tử cụ thể. Tuy nhiên, nó thường không được khuyến khích cho kiểu dáng quy mô lớn vì nó có thể dẫn đến mã ít được bảo trì hơn và giảm sự phân tách các mối quan tâm.
Example:
“`html
<p style=”color: blue; font-size: 16px;”>This is a blue paragraph.</p>
“`
CSS nội bộ hoặc nhúng
CSS nội bộ hoặc nhúng được đặt trong phần tử `<style>` trong phần `<head>` của tài liệu HTML. Nó áp dụng kiểu cho các thành phần HTML cụ thể trên trang đó. Mặc dù nó cung cấp nhiều tổ chức hơn CSS nội tuyến nhưng nó vẫn bị giới hạn ở tệp HTML cụ thể.
Example:
“`html
<head>
<style>
p {
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a red paragraph.</p>
</body>
“`
CSS bên ngoài
CSS bên ngoài liên quan đến việc tạo một tệp CSS riêng biệt với tất cả các kiểu và liên kết nó với tệp HTML bằng cách sử dụng phần tử `<link>` trong phần `<head>`. Cách tiếp cận này thúc đẩy việc phân tách các mối quan tâm và cho phép bạn áp dụng các kiểu giống nhau cho nhiều tệp HTML.
Example (style.CSS):
“`CSS
/* style.CSS */
p {
color: green;
font-size: 20px;
}
“`
“`html
<head>
<link rel=”stylesheet” type=”text/CSS” href=”style.CSS“>
</head>
<body>
<p>This is a green paragraph.</p>
</body>
“`
Kết luận
Như vậy trong bài viết này chúng mình đã giúp bạn tìm hiểu về CSS là gì, cách hoạt động của CSS, và các loại CSS phổ biến hiện nay rồi. Hy vọng giúp ích được các bạn. Hẹn gặp lại bạn tỏng bài viết tiếp theo.