CSS được biết đến với vai trò là xử lý một phần giao diện của trang web. Vậy CSS là gì và nó có mối quan hệ như thế nào với HTML? Các bạn hãy cũng Taimienphi tìm hiểu trong bài viết dưới đây!
CSS là viết tắt của từ Cascading Style Sheets. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết về CSS là gì nhé.
CSS là gì?Tìm hiểu về hoạt động của CSS
1. CSS là gì? Mối quan hệ giữa CSS và HTML?
- CSS là chữ viết tắt của Cascading Style Sheets, một ngôn ngữ dùng để định dạng cho các phần tử trên trang web. Trong khi HTML đóng vai trò trong việc tạo ra các phần tử, như đoạn văn bản, tiêu đề và bảng thì CSS cho phép bạn thay đổi bố cục, màu sắc, font chữ và nhiều khía cạnh khác của các phần tử HTML, giúp tạo ra giao diện đẹp và thú vị cho trang web.
- CSS và HTML có mối quan hệ mật thiết với nhau trong việc xây dựng trang web. HTML giống như động cơ của một chiếc xe hơi, còn CSS là kiểu dáng và màu sắc của chiếc xe. Một trang web có thể hoạt động với HTML mà không có CSS, nhưng nó sẽ thiếu đi tính thẩm mỹ. CSS làm cho trang web trở nên hấp dẫn và cung cấp trải nghiệm người dùng tốt hơn. CSS không chỉ quản lý bố cục và định dạng, mà còn xử lý màu sắc chữ, kích thước hình ảnh, khoảng cách giữa các phần tử văn bản.
2. Bố cục của một đoạn CSS
Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp và các thuộc tính quản lý không gian trong và xung quanh hộp đó, bao gồm:
- Padding (Đệm): Đây là khoảng không gian xung quanh nội dung bên trong hộp, chẳng hạn như khoảng cách xung quanh một đoạn văn bản. Padding giúp tạo khoảng trắng xung quanh nội dung.
- Border (Đường viền): Border là đường viền nằm ngay bên ngoài phần đệm. Nó xác định đường viền hoặc đường biên của hộp, thường là các đường kẻ bao quanh phần tử.
- Margin (Khoảng cách): Margin là khoảng cách từ bên ngoài của phần tử đến các phần tử khác hoặc ranh giới của trang. Nó xác định khoảng cách giữa phần tử hiện tại và các phần tử khác xung quanh nó.
3. Cấu trúc của một đoạn CSS
Một đoạn CSS có cấu trúc như sau:
- Vùng chọn (Selector): CSS sẽ được áp dụng cho các phần tử HTML cụ thể trên trang web. Vùng chọn được đặt trong dấu ngoặc đơn (hoặc ngoặc nhọn).
- Khai báo thuộc tính và giá trị: Bên trong vùng chọn, bạn sẽ khai báo các thuộc tính CSS cùng với giá trị của chúng. Mỗi thuộc tính sẽ đi kèm với một giá trị của nó, được cách nhau bằng dấu hai chấm. Mỗi cặp thuộc tính và giá trị sẽ nằm trong cặp dấu ngoặc nhọn {}.
- Dấu chấm phẩy (Semicolon): Mỗi cặp thuộc tính và giá trị trong một vùng chọn sẽ được kết thúc bằng dấu chấm phẩy. Dấu chấm phẩy đánh dấu sự kết thúc của một khai báo và chuẩn bị cho khai báo tiếp theo.
Ví dụ về cấu trúc của 1 đoạn CSS:
vùng-chọn {
thuộc-tính-1: giá-trị-1;
thuộc-tính-2: giá-trị-2;
thuộc-tính-3: giá-trị-3;
}
CSS được sử dụng để định dạng các thuộc tính hiển thị trên trang web bằng cách tương tác với các phần tử HTML riêng lẻ, chẳng hạn như đoạn văn bản trong HTML có dạng như dưới đây:
Trong trường hợp nếu muốn định dạng màu font chữ văn bản là màu hồng và in đậm trên trình duyệt của khách truy cập, chúng ta sử dụng mã CSS có dạng như dưới đây:
Trong trường hợp này, "p" (paragraph hay đoạn văn bản) được gọi là "selector", là một phần của mã CSS, được sử dụng để chỉ định phần tử HTML áp dụng CSS Style. Trong CSS, selector được đặt ở phía bên trái dấu ngoặc nhọn đầu tiên.
Các thông tin được đặt trong dấu ngoặc nhọn được gọi là khai báo, bao gồm các thuộc tính và giá trị được áp dụng cho selector. Các thuộc tính bao gồm kích thước font chữ, màu sắc và căn lề, và các giá trị là các cài đặt cho thuộc tính đó.
Trong ví dụ trên, "color" và "font-weight" là các thuộc tính, "pink" và "bold" là các giá trị của các thuộc tính đó.
{ color:pink; font-weight:bold; } là khai báo và "p" (hay paragraph trong HTML) là selector.
Ngoài ra chúng ta có thể áp dụng các nguyên tắc cơ bản này để thay đổi kích thước font chữ, màu nền, căn lề, ... .
Cho ví dụ:
body { background-color:lightblue; } định dạng màu nền của trang web là màu xanh da trời. xem Mã màu trong CSS tại đây.
Hoặc p { font-size:20px; color:red; } thiết lập kích thước font chữ là 20px và định dạng font chữ là màu đỏ.
Nếu đang thắc mắc làm thế nào để áp dụng các mã CSS này cho nội dung HTML. Cũng tương tự như HTML, chúng ta có thể viết các mã CSS thông qua trình soạn thảo hoặc trình xử lý văn bản trên máy tính, và có thể thêm các mã CSS này trên các trang web HTML thông qua 3 cách.
Mã CSS (hay Style Sheets) có thể chèn trực tiếp vào tài liệu HTML (Inline CSS), nội tuyến (Internal CSS) hoặc ngoại tuyến (External CSS). Trong đó các file ngoại tuyến CSS được lưu dưới dạng các file .css và được sử dụng để chỉ định giao diện toàn bộ trang web thông qua 1 file (thay vì thêm các file CSS riêng lẻ cho các phần tử HTML mà chúng ta muốn chỉnh sửa).
Để sử dụng CSS ngoại tuyến, các file .html phải bao gồm phần tiêu đề được liên kết với CSS ngoại tuyến và có dạng như dưới đây:
Đoạn mã trên sẽ liên kết file .html với CSS ngoại tuyến (trong ví dụ này là mysitestyle.css) và tất cả hướng dẫn CSS trong file sẽ được áp dụng cho các trang .html được liên kết.
Ngoài ra chúng ta có thể chèn mã CSS nội tuyến vào tiêu đề của trang .html cụ thể, chẳng hạn như đoạn mã dưới đây:
Đoạn mã trên sẽ áp dụng màu nền là màu đỏ tím, kích thước font chữ 20px và màu font chữ là màu xanh cho trang .html duy nhất này.
Cuối cùng, chúng ta có thể chèn các mã CSS trực tiếp vào mã HTML, tuy nhiên cách này chỉ áp dụng cho một mã duy nhất. Ví dụ:
Trong đoạn mã trên tiêu đề trên 1 trang .html duy nhất sẽ được định dạng là màu tím, kích thước font chữ 40px.
4. Cách nhúng CSS vào website
Có 3 cách để nhúng CSS vào một trang web, cụ thể như sau:
Cách 1. Nhúng CSS trực tiếp (Inline CSS): Bạn sử dụng dấu chấm phẩy để ngăn cách giữa các quy tắc và đặt chúng trong thuộc tính style.
Cách 2. Nhúng CSS nội tuyến (Internal CSS): Bạn sử dụng thẻ style để đặt mã CSS bên trong tài liệu HTML.
Cách 3. Nhúng CSS ngoại tuyến (External CSS): Bạn viết mã CSS trong một tệp riêng với phần mở rộng là .css, sau đó sử dụng phần tử link để liên kết tệp CSS này với tài liệu HTML.
https://thuthuat.taimienphi.vn/css-la-gi-55526n.aspx
Trong bài viết, Taimienphi đã chia sẻ CSS là gì, cấu trúc, bố cục của một đoạn CSS cũng như cách nhúng CSS vào website, hy vọng sẽ mang lại những thông tin hữu ích mà bạn đang tìm kiếm.