CSS là gì?
Những bạn thường xuyên làm việc với lập trình WEB thì không xa lạ gì với CSS nhưng rất nhiều người không biết CSS là gì. Vậy CSS là gì?
CSS là gì? Và liên quan gì tới HTML?
CSS là viết tắt của cụm từ tiếng Anh “Cascading Style Sheet language”. Nó có nghĩa là ngôn ngữ tạo phong cách cho các trang web.
Trong khi HTML được sử dụng để cấu trúc một tài liệu web (xác định những thứ như tiêu đề và đoạn văn bản và cho phép bạn nhúng hình ảnh, video và phương tiện khác), CSS xuất hiện và quy định cụ thể bố trí của tài liệu của bạn phong cách trang, màu sắc và phông chữ đều xác định với CSS.
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 một chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc,…rất nhiều.
CSS được phát triển bởi W3C (World Wide Web Consortium= Hiệp hội mạng toàn cầu) vào năm 1996, vì một lý do đơn giản. HTML không được thiết kế để gắn tag để giúp định dạng trang web. Bạn chỉ có thể dùng nó để “đánh dấu” lên site.
CSS hoạt động như thế nào?
CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc bạn có thể tận dụng. HTML không được dùng để tạo phong cách cho các yếu tố, nó chỉ đánh dấu từng phần để biết được yếu tố đó là gì thôi.
CSS mang lại phong cách cho các trang web của bạn bằng cách tương tác với các yếu tố HTML. Các phần tử là các thành phần HTML riêng lẻ của một trang web, ví dụ như một đoạn văn bản mà trong HTML có thể trông như thế này:
<p> Đây là đoạn của tôi! </ p>
Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất đơn giản. Nó có phần block chọn và block khai báo. Bạn chọn một yếu tố và khai báo làm gì với nó. Rất đơn giản phải không?
Tuy nhiên, cũng có nhiều quy tắc cần ghi nhớ.
Selector sẽ trỏ về yếu tố HTML bạn cần muốn tạo phong cách. Block khai báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy,
Mỗi khai báo bao gồm một tên CSS và giá trị, cách nhấu bởi dấu 2 chấm. Khai báo CSS luôn kết thúc bằng dấu chấm phẩn, và block khai báo được đặt trong dấu ngoặc nhọn.
Hãy xem qua ví dụ:
Tất cả các thành phần trong element <p> sẽ dùng màu xanh và in đậm.
- <style>
- p {
- color: blue;
- text-weight: bold;
- }
- <style>
Ở ví dụ khác, tất cả các yếu tố trong <p> sẽ được canh giữa, rộng 16x và màu hồng.
- <style>
- p {
- text-align: center;
- font-size: 16px;
- color: pink;
- }
- </style>
Cấu trúc một đoạn CSS
Một đoạn CSS bao gồm 4 phần như thế này:
01 02 03 04 05 | 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.
Các loại Style CSS
- Style CSS Internal là style được tải lên mỗi khi trang web được refresh. Vì vậy nó tăng thời gian tải trang. Ngoài ra, bạn sẽ không dùng một style CSS cho nhiều trang vì nó chỉ áp dụng cho từng trang một. Tuy nhiên, lợi ích của style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó dễ chia sẽ trang để xem trước hơn.
- Style External là thuận tiện nhất. Mọi thứ được lưu trong file .css. Có nghĩa là bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn. External style sẽ cải thiện thời gian tải trang rất nhiều.
- Style CSS Inline. Inline hoạt động với một yếu tố nhất định có tag <style>. Mỗi thành phần đều cần được tạo phong cách riêng, vì vậy đây không hẳn là cách tốt nhất và dễ nhất để xử lý CSS. Nhưng có thể khá tiện lợi, vì nếu bạn muốn thay đổi chỉ một yếu tố, nhanh chóng xem trước thay đổi, bạn không cần truy cập trực tiếp vào file CSS để chỉnh sửa mà sử dụng Inline CSS.
Tóm lại qua bài viết này các bạn đã biết được CSS là gì và những vấn đề liên quan tới nó. Mong rằng bài viết sẽ giúp ích cho bạn. Chúc bạn thành công!
