Cùng xem Cú pháp CSS – các cách viết CSS – Freetuts trên youtube.
Ở 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 : 51+ hình nền máy tính đẹp, dễ thương năm 2022
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 : Verify là gì? Những điều về xác thực có thể bạn chưa biết
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.
Nguồn: https://dongnaiart.edu.vn
Danh mục: Tổng hợp
Lời kết: Trên đây là bài viết Cú pháp CSS – các cách viết CSS – Freetuts. Hy vọng với bài viết này bạn có thể giúp ích cho bạn trong cuộc sống, hãy cùng đọc và theo dõi những bài viết hay của chúng tôi hàng ngày trên website: Dongnaiart.edu.vn
