Cafedev sẽ giới thiệu cho ace một cách chi tiết và đơn giản nhất cho người mới bắt đầu dễ hiểu về CSS, và bạn nên nhớ rằng CSS luôn đi kèm với HTML. Chúng là một cặp HTML/CSS. Tại sao vậy chúng ta sẽ tìm hiểu sau đây. Và trong series tự học CSS này sẽ dạy bạn hiều về CSS từ cơ bản đến nâng cao với ví dụ cụ thể kèm theo.
Nếu ace nào chưa rõ về HTML, bạn có thể tham khảo series tự học HTML này.
Nội dung chính
1. CSS là gì?
CSS là ngôn ngữ mô tả style(phong cách) cho một tài liệu HTML nào đó.
CSS mô tả cách mà các phần tử HTML sẽ được hiển thị hay nói dễ hiểu hơn thì css sẽ làm đẹp cho các phần tử html ví dụ như tô màu nó lên, tạo border, viền, phân chia bố cục trang web,…
- CSS viết tắt của Cascading Style Sheets
- CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong phương tiện khác
- CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều trang web cùng một lúc
- Các bảng style bên ngoài được lưu trữ trong các file CSS
2. Tại sao nên sử dụng CSS?
CSS được sử dụng để xác định kiểu(style) cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau.
Ví dụ:
<!--
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: cafedevn@gmail.com
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
-->
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example of Cafedev</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. CSS giải quyết một vấn đề lớn
HTML KHÔNG BAO GIỜ có ý định chứa các thẻ để định dạng một trang web!
HTML được tạo để mô tả nội dung của một trang web, như:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>Khi các thẻ như font và các thuộc tính màu được thêm vào đặc tả HTML 3.2, nó đã bắt đầu một cơn ác mộng đối với các developer web. Phát triển các trang web lớn, nơi phông chữ và thông tin màu sắc được thêm vào mỗi trang, trở thành một quá trình lâu dài và tốn kém.
Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo CSS.
CSS đã xóa định dạng style từ trang HTML!
4. CSS tiết kiệm rất nhiều công việc!
Các định nghĩa style thường được lưu trong các file .css bên ngoài.
Với file stylesheet bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi chỉ một file! thay vì đi đổi từng tý trong code html 😀
Quá tuyệt vời khi HTML/CSS đi với nhau.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
