Để trả lời câu hỏi CSS là gì? Tại sao CSS lại tồn tại và tác dụng của CSS ra sao thì trước tiên cùng mình tìm hiểu một chút về lịch sử phát triển của website trước đã.
Từ Khi Web phát triển phổ biến vào những năm 90, ý định áp dụng một thiết kế đặc biệt cho một trang web cũng tăng lên. Các lập trình viên web đã dựa vào các thẻ HTML cụ thể để cải thiện các trang web như:
- <basefont> đã xác định phông chữ cho toàn bộ tài liệu HTML
- <font> đã xác định kiểu chữ, màu sắc và kích thước cho văn bản chứa
- <centre> tập trung theo chiều ngang tất cả nội dung của nó
- <big> tăng kích thước của văn bản
- <strike> hiển thị văn bản với một gạch ngang văn bản
Một số thuộc tính HTML cũng có thể được sử dụng:
- bgcolor: Xác định màu nền của phần tử
- text: Xác định màu văn bản
- margin: Được sử dụng để thêm khoảng trắng ở các phía của phần tử
Tránh sử dụng table (bảng)
Nhưng hầu hết, để tạo các cột, sắp xếp trực quan các phần tử thì các lập trình viên Web đã sử dụng phần tử <table></table> để thiết kế trang web của họ vì nó cung cấp một lưới trực quan:
Tuy nhiên, cách tiếp cận này là cồng kềnh vì một số lý do:
- Các bảng HTML dài dòng: chúng yêu cầu rất nhiều mã soạn sẵn
- Markup bị sai về mặt ngữ nghĩa: các bảng nên được sử dụng cho dữ liệu đa chiều
- Thay đổi bố cục lại cần phải để thay đổi HTML: nếu chúng ta muốn di chuyển cột bên trái sang bên phải, chúng ta phải quay về sửa đổi cấu trúc HTML
- Các bảng dễ bị lỗi cú pháp: các hàng và ô cần được sắp xếp và lồng nhau theo một cách cụ thể để hợp lệ
- Markup là không thể đọc được: Các bảng được lồng trong các bảng, nếu bảng phức tạp thì không biết phải đọc nó thế nào. Quá mất thời gian.
Đó là lý do tại sao việc sử dụng các table (bảng) cho mục đích bố trí đã dần bị loại bỏ và CSS được sử dụng để thay thế.
CSS là gì?
CSS là gì? Tác dụng của CSS
CSS là viết tắt của Cascading Style Sheets. là định kiểu cho các ngôn ngữ đánh dấu (như HTML hoặc XML). Do đó, CSS không có giá trị, trừ khi nó được liên kết với một tài liệu HTML.
CSS giúp cho tài liệu HTML trở nên sống động hơn, bằng cách chọn phông chữ (font), áp dụng màu sắc (color), xác định lề (margin), các yếu tố định vị (position), hoạt ảnh (animation) và nhiều hơn nữa.
Giống như con người vậy, HTML như là bộ xương. CSS sẽ thêm da, thịt, quần áo, phụ kiện, …. để giúp con người trở nên sống động hơn.
p{ color: red;}
Từ “Style” có thể không đủ nghĩa. Bạn có thể nghĩ rằng CSS chỉ được sử dụng để thay đổi màu sắc, kích thước và phông chữ của văn bản. Nhưng CSS có thể xác định bố cục của tài liệu HTML, bằng cách xác định chiều cao, chiều rộng, lề trong và ngoài, vị trí, cột.
Viết CSS ở đâu?
Viết CSS như một thuộc tính
Bạn có thể viết CSS trực tiếp trên một phần tử HTML (CSS nội dòng – Inline style), bằng cách sử dụng thuộc tính style:
<p style="color: red;">This text is important.</p>
Viết CSS ở phần head
Bạn có thể sử dụng thẻ <style> trong <head> của tài liệu HTML của mình:
<html>
head>
<title>Hello World</title>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>This paragraph will be red.</p>
</body>
</html>
Viết CSS ở File bên ngoài
Thông thường, để tách mã CSS ra khỏi Mã HTML để dễ dàng quản lý, sửa chữa và phát triển thì người ta hay viết CSS ra file riêng, sau đó trong HTML thì gọi / nhúng / liên kết file CSS vào.
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
Ở đây chúng ta viết mã CSS vào file mystyle.css sau đó gọi đến nó ở trong phần head trong HTML.
Có thể bạn sẽ thích: 8 Loại CSS Selector cần biết
Lời kết.
CSS là một ngôn ngữ định kiểu rất thú vị, chúng làm cho các website trở nên thân thiện hơn, đẹp hơn và dễ mến hơn trong mắt Khách hàng. Thậm chí chính người viết CSS cũng cảm thấy thoải mái vì làm việc với cái đẹp. 😀
Quan trọng, một website có CSS tốt tăng khả năng thu hút khách hàng tiềm năng rất tốt.
Và lương của lập trình viên viết CSS cũng không hề thấp đâu nhé!
