Bạn đang xem: Cú pháp CSS – các cách viết CSS – Freetuts Tại DongnaiArt

Ở bài trước, chúng ta đã tìm hiểu css là gì rồi phải không? Vì vậy, trong bài viết này, chúng ta sẽ học cú pháp viết css và tìm hiểu ba cách để hiển thị css (inline, external, internal).

1. cú pháp css

chúng tôi chia mã css thành hai phần:

• selector : selector sẽ trỏ đến các đối tượng (html) bị ảnh hưởng bởi css
• khai báo : thuộc tính css được sử dụng để tạo kiểu thẻ của bộ chọn

ví dụ : Đặt màu nền thành đỏ và văn bản thành xanh lam cho thẻ h1

ở đâu:

bài viết này đã được xuất bản trên [free tuts .net]

• h1 là bộ chọn
• nền, các thuộc tính màu bên trong {} dấu ngoặc là phần khai báo.

Xem Thêm : Cách cắt, ghép và chỉnh sửa File PDF bằng Adobe Reader nhanh, dễ dàng

có lẽ về selector thì mình sẽ giới thiệu ở bài sau nên mình sẽ không nói nhiều trong bài này. Riêng phần khai báo, bạn sẽ nhận thấy bên trong là danh sách các thuộc tính và giá trị của thuộc tính đó (key: value), mỗi thuộc tính sẽ kết thúc bằng dấu chấm phẩy (;).

2. viết css ở đâu?

Trong cú pháp css có lẽ tôi vẫn còn hơi mơ hồ, phải không? vì vậy phần này sẽ thực sự thú vị vì chúng tôi sẽ trình diễn trực quan và chân thực.

chúng tôi có ba cách để viết css đó là:

• inline : viết trực tiếp vào thẻ thông qua thuộc tính style
• external : viết một thẻ riêng biệt với phần mở rộng .css và sau đó nhập nó bằng thẻ liên kết.
• inner – ghi vào tệp html hiện tại và bên trong thẻ kiểu

# nội tuyến

trong thẻ html, chúng tôi tạo một style = “css code”.

ví dụ : xem bản trình diễn

# nội bộ

chúng tôi sẽ mã hóa bên trong & lt; style type = “text / css” & gt; mã css & lt; / style & gt ;.

ví dụ : xem bản trình diễn

# bên ngoài

Xem Thêm : 30 Mẫu Vẽ Tranh Tường Thiếu Nhi Đẹp Ngộ Nghĩnh

Cách này hơi rườm rà vì chúng ta cần tạo tệp style.css (có đuôi .css) rồi nhập vào tệp html thông qua thẻ liên kết. đây là một ví dụ cho điều này.

bước 1 : tạo tệp style.css với nội dung sau:

Bước 2 : Tạo tệp index.html ở cùng cấp với tệp style.css với nội dung sau:

sau đó chạy nó và bạn sẽ thấy kết quả không khác gì hai ví dụ trước. nhưng có một số lưu ý cho bạn như sau:

• với thẻ href trong thẻ liên kết, bạn sẽ chuyển đường dẫn đến tệp css của mình
• rel = “style sheet” cho trình duyệt biết đây là gì từ một tệp css

3. lưu ý quan trọng khi viết css

Tôi chỉ đến đây để nói với bạn một số lưu ý cho bạn khi viết css như thế này:

• không nên inline vì khó quản lý và không tốt cho seo
• nội bộ thì ok nhưng bạn phải đặt css phía trên thẻ head, điều này cũng không tốt cho seo tương tự. sang biểu mẫu bên trong khi nhập bằng thẻ liên kết, bạn cần đặt nó vào thẻ chính.

Các vấn đề về seo có thể tham khảo loạt bài về seo onpage.

4. kết luận

Tóm lại, trong bài viết này, bạn đã biết cách viết css chưa? một số lưu ý quan trọng khi viết css nội tuyến, ngoại cảnh, nội bộ. Bài viết này mình xin dừng lại ở đây vì mình muốn trình bày mỗi bài một số kiến ​​thức nhỏ để các bạn dễ tiếp thu.