Thiết kế web CSS là gì? thiet ke website css la gi

Đây là bài viết chia sẻ cho bạn những web new muốn học hỏi các khái niên cơ bản về css, định nghĩa css là gì, và css có vai trò như thế nào trong thiết kế website

CSS là gì ?

CSS (Cascading Style Sheets) là một ngôn ngữ cho giao diện để định nghĩa tính chất các thành phần trong HTML layout. Một ví dụ, Với CSS bạn có thể tạo kiểu cho fonts, chỉnh màu sắc, canh lề, kẻ bảng, định chiều cao, chiều dọc, hình nền, và xác định vị trí cho đổi tượng cùng nhiều thứ khác…

Tại sao ta nên dùng CSS để thiết kế web ?

Khi thiết kế web, một câu hỏi đặt ra đó là những tùy chỉnh về fonts, chỉnh màu sắc , canh lề, kẻ bảng,.. bên HTML mình vẫn có thể làm được vậy tại sao không dùng mà phải dùng CSS:

- Bạn có thể quản lý toàn bộ các thành phần (giao diện) của trang web bạn thông qua 1 file CSS

- Điều khiển chính xác hơn cách trình bày Layout.

- Quan trọng nhất là tái sử dụng, tôi thích cái này nhất

- Sử dụng được các kỹ thuật tiên tiến, phức tạp mà HTML không làm được.

Bắt đầu với CSS như thế nào ?

Cần những gì để viết được CSS ? Trước tiên muốn viết về nó thì các bạn cũng cần có một lượng kiến thức về HTML một tí, vì các tag dùng để viết CSS hầu như y chang bên HTML. Về công cụ để viết CSS, không cần một công cụ chuyên dụng nào cả, các bạn có thể viết với Notepad, WordPad, WinWord,… Nhưng tôi khuyên bạn nên dùng một TextEditor nào có khả năng chuyển màu ( Sẽ ít bị lỗi khi viết).

CSS làm việc như thế nào ?

Chúng ta thử làm một ví dụ về nó theo các bước sau:

Tạo một file html và gán thuộc tính màu nền (bgcolor) và màu chữ cho nó xem.

Vậy là bạn có một trang web và có màu nền là #FF0000. Thử viết có CSS xem sao nha. Tạo file CSS có nội dung

body {background-color: #FF0000}

h1 {color:# FFFF00}

Lưu lại với tên style.css (cùng cấp với file HTML) Bây giờ ở file HTML ta viết lại như sau :

Bạn thử chạy trên trình duyệt với cả 2 trường hợp xem, không có gì khác đúng không các bạn. Vậy tại sao lại viết thêm 1 file CSS làm gì mắc công ? Nhưng bạn thử nghĩ nếu như bạn có 100 file HTML và mỗi file bạn cần dùng lại thuộc tính nào đó vài lần thôi thì bạn phải lặp đi đoạn code đó trong từng trang là bao nhiêu lần và thử nhân lên con số 100 trang xem. Vì vậy dùng CSS bạn chỉ cần khai báo toàn bộ những thuộc tính đó vào file CSS và các trang HTML dùng file CSS là được đúng không các bạn. Và đây là cái ưu điểm của CSS mà ai cũng thích cả vì nó làm giảm code, ít mất thời gian viết lại những cái đã viết,…