CSS là gì? Cấu trúc CSS trong một website

Bài đầu tiên trong Serie học CSS căn bản ngày hôm nay chúng ta sẽ cùng tìm hiểu CSS là gì? Cấu trúc của CSS trong một website như thế nào? Và Tại sao phải học CSS?

CSS là gì?

CSS là chữ viết tắt của cụm từ “Cascading Style Sheet” dùng để định dạng bố cục của một website dựa vào ngôn ngữ đánh dấu HTML. Nói một cách dễ hiểu CSS dùng để thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hay thêm phần thẩm mỹ cho website.

Một ví dụ đơn giản : Khi bạn xây một ngôi nhà thì gạch và vật liệu xây dựng là các thẻ HTML và CSS là sơn màu, hoa văn… Sơn màu sẽ tác động làm thay đổi màu mặc định của gạch giúp cho ngôi nhà thêm đẹp và sang trọng hơn.

CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có.

Tại sao phải học CSS?

CSS đóng vai trò rất quan trọng khi bạn xây dựng website, bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về kỹ thuật CSS. Thông thường các Developer sẽ sử dụng một chương trình thiết kế như photoshop để tạo giao diện sau đó convert sang file CSS riêng mà không phải ngồi viết từng dòng lệnh.

Các thể loại CSS thông dụng

•  Background : CSS tùy chỉnh hình nền
•  Text : CSS tùy chỉnh cách hiển thị đoạn text
•  Font : CSS tùy chỉnh kích thước, kiểu chữ
•  List : CSS tùy chỉnh danh sách
•  Table : CSS tùy chỉnh bảng
•  Link : CSS tùy chỉnh liên kết
•  Box model : CSS tùy chỉnh padding, margin, border

 

Cấu trúc CSS trong website

Một đoạn CSS bao gồm 4 phần như sau:

[html] vùng định dạng {
Thuộc tính : giá trị;
Thuộc tính : giá trị;
…
}
[/html]

Vùng định dạng ở đây là các đoạn text hay các thẻ HTML mà bạn muốn định dạng. Tất cả giá trị của vùng định dạng nằm trong cặp dấu ngoặc { }. Mỗi thuộc tính sẽ ứng với một giá trị, phần thuộc tính và giá trị cách nhau bởi dấu hai chấm, kết thúc một thuộc tính cách nhau bởi dấu chấm phẩy cuối cùng. Một vùng định dạng có thể sử dụng không giới hạn thuộc tính.

Sử dụng phần mềm gì để viết CSS?

Có rất nhiều phần mềm hỗ trợ nhưng phần mềm thường dùng nhất và mình sẽ giới thiệu trong Serie này sẽ là Notepad++ và Dreamweaver.

Bạn nên xem :

1. Hướng dẫn cài đặt Notepad Plus

2. Hướng dẫn cài đặt Dreamweaver CS6 

 

Lời kết : Kết thúc bài đầu tiên trong Serie học CSS căn bản hôm nay chúng ta đã biết được CSS là gì và cấu trúc CSS trong một website là như thế nào. Bài tới chúng ta sẽ cùng tìm hiểu cú pháp CSS và cách viết CSS trong một trang web.

Chúc bạn thành công!

 

•  Cùng chuyên mục : Serie hướng dẫn học HTML căn bản