CSS là gì và nó tham gia thế nào trong thiết kế web
CSS là gì?
CSS (Cascading Style Sheets) là hỗ trợ quản lý các thuộc tính cho ngôn ngữ HTML trong việc định dạng 1 trang web như layout, position, color, font chữ,...
Một số bài viết cho rằng HTML sẽ thiếu hụt rất lớn nếu không có CSS. Điều này sai. HTML hoàn toàn có thể sống tốt mà không cần đến CSS. Tuy nhiên nếu có CSS thì công việc thiết kế web sẽ nhanh hơn, đặc biệt trong các chỉnh sửa hàng loạt.
CSS nằm ở đâu
- Nằm trong tag HTML (inline) Chèn ngay tại thẻ: <a style="....">
- Nằm trên head trong thẻ style (internal) Dồn tất cả thuộc tính css lên thẻ <head>để dễ quản lý:<style> p {margin-left: 20px;}</style>
- Nằm file css rời bên ngoài file htm (extenal) Tách các thuộc tính ra 1 file nằm ngoài các file html: file có đuôi là css và trong file html sẽ có đường link <link rel="stylesheet" type="text/css" href="/mystyle.css">
Cú pháp CSS
id và class
Đặt tên cho thẻ để áp thuộc tính riêng cho thẻ đó
- Tên theo kiểu id: cho những thành phần "duy nhất" trong trang
- Tên theo kiểu class cho nhiều thành phần có thuộc tính chung
Lưu ý: tên thẻ không được có khoảng trắng
Đối tượng
- p {color: red;} // chữ trong tất cả các thẻ <p> đều màu đỏ
- p.note {color: red;} // chữ trong thẻ <p> có tên class "note" có màu đỏ
- #slogan p {color: red;} // chữ trong thẻ <p> của <div class "slogan"> có màu đỏ
Đôi nét về CSS3
CSS đượci Håkon Wium Lie giới thiệu lần đầu tiên vào ngày 10/10/1994. Phiên bản hiện tại là CSS3 với tính năng đáng chú ý là mô-đun linh họat kết hợp với những tính năng mới và khả năng tương thích ngược với các phiên bản trước đó. CSS3 cũng bổ sung các bộ chọn và thuộc tính mới cho phép linh hoạt hơn với bố cục và trình bày trang.
Những tính năng mới của CSS3
Nói đến các tính năng mới trong CSS3 thực sự có rất nhiều. Tuy nhiên, có thể kể đến những tính năng nổi bật như:
- Bộ chọn
- CSS3 Pseudo-Classes
- Màu trong CSS3
- CSS3 RGBA
- CSS3 HSL và HSLA
- CSS3 Opacity
- Góc làm tròn: Bán kính đường viền
- Drop Shadows – Hiệu ứng bóng đổ
- Text Shadow – Bóng văn bản
- Linear Gradients – Độ dốc tuyến tính
- Radial Gradients – Độ dốc xuyên tâm
- Multiple Background Images – Nhiều hình nền
