[Tự Học CSS] Bài 1: Tổng Quan Về CSS

Chào các bạn, tiếp nối loạt bài thiet ke web hôm nay chúng ta sang một “sê-ri” mới đó là Tự Học CSS.  Để học được CSS các bạn phải có nền tảng là HTML.

Vào bài đầu tiên chúng ta sẽ tìm hiểu  CSS là gì, có ăn được không? Nếu mà không dung để ăn thì công dụng của CSS ra sao?

1. CSS và công dụng của CSS?

CSS là viết tắt của Cascading Style Sheets có nghĩa là Ngôn ngữ Định dạng Website.

Định dạng website là gì: Có thể hiểu như sau, website là một  bức tranh, bút chì là HTML, bạn dùng HTML để phác thảo phần thô, phần khung của bức tranh đó, còn CSS đóng vai trò là hộp bút màu, bạn dùng hộp bút màu này tô cho bức tranh có màu sắc đẹp hơn.

Vậy thì CSS không dùng để ăn rồi :D.

Công dụng của CSS:

Định dạng các phần của một website như: font chữ, độ rộng, màu nền, vị trí….

Giúp code của website được tối ưu hơn ( khắc phục được những khuyết điểm của HTML).

Dùng CSS là dùng đúng chuẩn lập trình website ( tốt cho SEO).

2. Cách sử dụng CSS:

- Khai báo:

Có 3 các khai báo ứng với 3 cách định dạng chính của CSS.

a. CSS trong: 

Cú pháp: 

Mọi định dạng CSS được đặt trong thẻ <style></style>, trong bài…. Của phần Tự Học HTML mình đã có nhắc đến vị trí của thẻ này, bạn nào quên có thể xem lại.

Cách dùng này thường sử dụng cho làm bài tập để hiểu là chính, vì ít dùng, trên thực tế với một website nếu định dạng các phần tử ngay trong thẻ <style> thì code của bạn sẽ dài và rối.

b. CSS nội tuyến:

CSS nội tuyến được khai báo ngay tại thẻ html cần định dạng.

Ví dụ: <span sytle= “color:red”> Website giá rẻ</span>

Cách này cũng ít dùng vì rào cản giống như dùng CSS trong.

c. CSS ngoại tuyến:

Là sử dụng một file có phần mở rộng là .css độc lập (dùng trình soạn thảo như notepad, notepad++, dreamviewer…để tạo ra file .css) , file html được liên kết với thẻ này thông qua thẻ <link>đã học trong phần HTML.

Các khai báo CSS ngoại tuyến thường được sử dụng phổ biến vì có thể dùng file .css định dạng cho nhiều phần tử trong trang web, chuyên nghiệp, dễ chỉnh sửa.

Độ ưu tiên của các cách khai báo CSS nếu cùng tác động lên một đối tượng là: CSS nội tuyến > CSS trong >CSS ngoại tuyến.

3. Ví dụ mở đầu:

Định dạng CSS cho chuỗi sau: Thiet Ke Web Bat Dong San.

Cách 1 (CSS trong):

Với đoạn code trên thì chuỗi text nào nằm trong thẻ <p> để sẽ có màu đỏ.

Cách 2 ( CSS nội tuyến):

Code HTML:

Trình duyệt hiển thị:

Cách 3 (CSS ngoại tuyến):

- Tạo file style.css:

- Liên kết file css đã tạo với HTML:

- Trình duyệt hiển thị:

Bài tập thực hành:

Dùng CSS để tạo ra bài thơ sau theo 3 cách: CSS trong, CSS ngoại tuyến, CSS nội tuyến. Biêt tiêu đề dùng thẻ h2, size chữ là 20px .

Chúc các bạn học tốt!