Để một website trở nên chuyên nghiệp hơn thì không thể thiếu được CSS. Vậy CSS là gì? Bố cục và cấu trúc của CSS là gì? Hãy cùng panamwf.org đi tìm hiểu qua bài viết dưới đây nhé.
1. CSS là gì?
CSS là từ viết tắt của Cascading Style Sheets, là một ngôn ngữ lập trình dùng để định dạng lại cho những phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói cách khác, trong một website, HTML dùng để định dạng các phần tử như tiêu đề, bảng biểu, tạo đoạn văn bản,… còn CSS giúp cho các phần tử HTML trở nên sinh động hơn, nổi bật hơn với các tuỳ chỉnh về màu sắc trang, màu chữ,…
2. Bố cục của CSS
Bố cục của CSS bao gồm:
- Padding (Vùng đệm): Không gian xung quanh nội dung, chẳng hạn như không gian xung quanh một đoạn văn bản
- Border (Đường viền): Là đường liền nằm bên ngoài phần đệm
- Margin (Lề): Khoảng cách xung quanh bên ngoài của phần tử.
3. Cấu trúc của một đoạn CSS
Một đoạn CSS bao gồm các phần sau:
- Phần thứ 1: Vùng chọn {
- Phần thứ 2: Thuộc tính :
- Phần thứ 3: Giá trị;
- Phần thứ 4: }
4. Cách viết CSS trong HTML
Có 3 cách viết CSS trong HTML là:
Kiểu viết CSS trực tiếp (Inline CSS)
Kiểu viết này được sử dụng thông qua thuộc tính style, và chỉ được áp dụng trong trường hợp bạn trang trí một kiểu cho một thành thẻ của HTML
Ví dụ: Để đổi màu chữ của đề mục, bạn viết đoạn CSS có mã như sau:
<!DOCTYPE html>
<html>
<body>
<h1 style=”color:red”>Đây là đề mục đỏ</h1>
</body>
</html>
Kiểu viết CSS nội bộ (Internal CSS)
Bạn sử dụng thuộc tính style trong phần head của trang HTML, dùng để trang trí toàn bộ thành phần có trong HTML
Ví dụ: Cách viết CSS nội bộ như sau:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: grey}
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
Kiểu viết CSS ngoài (External CSS)
Cách viết này thực sự hữu ích khi bạn muốn trang trí nhiều trang. Đồng thời nếu cần thay đổi chi tiết trang trí, bạn chỉ cần điều chỉnh trên một tệp tin CSS thì các trang HTML sẽ được thay đổi theo.
Ví dụ: Cách viết CSS ngoài tệp tin .css, sau đó thông qua <head> để gọi vào trang HTML như sau:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”/wp-content/uploads/2015/05/demo_style.css”>
</head>
<body>
<h1>Đây là đề mục</h1>
<p> Đoạn văn bản.</p>
</body>
</html>
Trên đây là những thông tin xoay quanh CSS là gì cách để viết CSS trong HTML. Tuy nhiên để có thể hiểu hơn về CSS bạn nên tham ra một khoá học về CSS. Cảm ơn bạn đã theo dõi bài viết.