Làm quen CSS

Nếu HTML được xem như là bộ xương của một website thì CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.

CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ giúp trình duyệt hiểu được các thiết lập định dạng và bố cục cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể tách biệt được cấu trúc (HTML) và định dạng (CSS).

CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được quy định ở trong chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở trong một file CSS bên ngoài.
Cú pháp cơ bản của CSS

Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn (selector), thuộc tính (property) và giá trị (value).
01 VÙNG-CHỌN {
02 Thuộc-tính-1: giá-trị-1;
03 Thuộc-tính-2: giá-trị-2;
04 }

Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ cha – con – hậu duệ…
Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML thuộc vùng chọn.
Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau. Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay mã màu (black, white, #000, #FFFFFF), hay một giá trị kích thước tính bằng px, em, rem, %.

Các vùng chọn CSS (selector) cần biết cho blogger

+ #ID
Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể (ID). Do đó, bản chất của việc sử dụng ID không thể tái sử dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho nó.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>
+ Class
Dấu “.” đại diện cho tên lớp. Nhiều thẻ HTML có thể có cùng tên lớp. Do đó, sự khác nhau giữa ID và Class là: ID chỉ cho phép chọn 1 phần tử, còn Class cho phép bạn chọn nhiều thẻ HTML cùng lúc.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

+ A.Class
Vùng chọn này giúp xác định tất cả các thẻ HTML cùng thuộc một lớp.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

+ A B
Vùng chọn này còn được gọi là vùng chọn hậu duệ (descendant). Vùng chọn này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, ngôi thứ như là con, là cháu, là chắt chút chít gì đó.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>
+ A > B
Vùng chọn này còn được gọi là vùng chọn con (child), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong thẻ nào khác.

01 <div id="vi-du">
02 <h2>Thạch Phạm Blog</h2>
03 <p>Cạch. WordPress blog lớn nhất Việt Nam.</p>
04 <div>
05 <p class="grand-child">Yêu màu tím. Sống nội tâm. Hay khóc thầm. Nhưng không gay.</p>
06 </div>
07 </div>

Add to Cart