CSS là gì?
Danh mục bài viết
Hướng dẫn CSS này giải thích rằng CSS là ngôn ngữ để kiểm soát bố cục của các thành phần HTML và sự xuất hiện của chúng. Tuy nhiên, việc thay đổi màu sắc, chiều rộng và chiều cao và khoảng cách giữa các thành phần chỉ là một vài ví dụ về CSS được sử dụng để làm gì.
Nó cũng được áp dụng để làm cho các trang web đa nhiệm và thân thiện với thiết bị di động.
Những quy tắc cú pháp
Nguyên tắc chính của việc sử dụng CSS là thiết lập các giá trị cho các thuộc tính kiểu dáng. Bạn cần bao gồm các bộ chọn là các thành phần HTML mà bạn muốn tạo kiểu.
Một khối khai báo bao gồm thuộc tính (ví dụ: padding) và giá trị (ví dụ: chỉ báo độ dài tính bằng pixel).
Sự khác biệt giữ CSS và HTML
HTML là ngôn ngữ với mục đích là tạo ra những nội dung như đoạn văn, hình ảnh, bảng, liệt kê,…. Trong khi HTML là thành phần chính của Website, thì CSS kiểm soát bố cục và đặt thiết kế web (cách trình bày các trang).
Ngôn ngữ CSS đặt nền, đệm, màu sắc và nhiều thuộc tính khác cho các thành phần HTML. Bạn có thể sử dụng CSS để tạo hình động và các tính năng thú vị khác, chẳng hạn như phòng trưng bày hình ảnh.
Note: Cách dễ dàng nhất để miêu tả CSS và HTML là chúng là 2 ngôn ngữ lập trình tách biệt nhau, bổ sung cho nhau. HTML tạo nội dung của trang web và CSS theo phong cách đó.
Cách sử dụng CSS
Có rất nhiều cách để sử dụng CSS. Cách cơ bản nhất của các phần tử kiểu dáng là đặt thuộc tính style cho bất kỳ phần tử HTML nào. Tùy chọn này được gọi là CSS kiểu dáng nội tuyến. Đây là một ví dụ cơ bản:
<p style="color: blue;">This is a paragraph.</p>Một tùy chọn khác về cách sử dụng CSS là bao gồm tất cả các thuộc tính kiểu dáng trong thẻ <style>. Sau đó, bạn cần đặt nó trong phần tử <head>. Tùy chọn này là internal:
<head>
<style>
h1 {
color: red;
margin-left: 20px;
}
p {
color: blue;
}
</style>
</head>Điểm cuối cùng trong hướng dẫn CSS này là học cách liên kết CSS với HTML. Hãy nói rằng bạn tạo một tài liệu có tên mystomme.css với các thuộc tính kiểu dáng cho trang web của bạn. Dưới đây là các bước để làm theo để sử dụng tùy chọn bên ngoài này:
- Chọn tài liệu HTML mà bạn muốn tạo kiểu.
- Thêm
<link rel="stylesheet" href="mystyling.css">giữa các thẻ<head> - Style nên được áp dụng cho trang web của bạn.
- Cập nhật mystyling.css bất cứ lúc nào và cập nhật trang web của bạn với các xu hướng thời trang giao diện mới nhất.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>Những hướng dẫn thêm về CSS
- Tệp .css bên ngoài không được chứa bất kỳ mã HTML nào.
- Mô hình hộp (box model) CSS xác định rằng các trình duyệt coi tất cả các thành phần HTML là các hộp hình chữ nhật.
- CSS có thể ẩn các phần tử, định vị chúng, thêm bóng hoặc đặt các góc tròn.