Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Cú pháp CSS (Syntax CSS)

5/5 - (10 bình chọn)

Chào mừng bạn đã quay trở lại với series “Học HTML CSS cơ bản”, ở bài trước mình đã cùng các bạn đi tìm hiểu định nghĩa thế nào là CSS rồi, hôm nay mình sẽ hướng dẫn các bạn về cú pháp của CSS.

Cú pháp CSS

CSS được tạo thành từ các kiểu quy tắc (Style Rule). Các rule này sẽ được các trình duyệt khác nhau biên dịch và áp dụng cho các thành phần mà mình muốn thay đổi. Style rule này có tất cả 3 phần:

  • Selector: Là một thẻ HTML mà tại đó chúng ta có thể áp dụng CSS được với nó. Ví dụ như các thẻ div, a, span, p…
  • Property: Là các thuộc tính sẵn có của CSS như màu (color), cỡ chữ (font-size), màu nền (background)… mà có thể áp dụng được cho các selector ở trên.
  • Value: Là các giá trị có thể gán cho các thuộc tính (property). Ví dụ: Thuộc tính color có các giá trị như red, white, blue….

Xem thêm: Các phần từ và thẻ trong HTML

Cú pháp chung của CSS:

Cú pháp CSS (Syntax CSS) cu-phap-css

Ở trên mình đã giải thích tương đối đầy đủ rồi, ở đây mình chỉ bổ sung một số lưu ý quan trọng:

  • Selector ở đây đang trỏ đến phần tử body, đây là phần tử mình muốn tạo style cho nó
  • Declaration: là khối khai báo bao gồm thuộc tính (property) và giá trị (value). Một selector có thể có 1 hoặc nhiều declaration và chúng được ngăn cách với nhau bằng dấu chấm phẩy.

Chú ý: Một khai báo CSS luôn luôn kết thúc với một dấu chấm phẩy và phần khai báo này sẽ được bao quanh bởi cặp dấu ngoặc nhọn.

CSS được viết vào đâu?

Ở phần cú pháp CSS các bạn chắc cũng đã hình dung ra cách khai báo CSS như thế nào rồi? Nhưng đến đây có bạn sẽ đặt câu hỏi là viết CSS ở đâu để chúng có tác dụng và có mấy cách để có thể khai báo được CSS? Mình xin trả lời là có 3 cách để khai báo CSS là:

  • inline: Viết trực tiếp vào thẻ HTML thông qua thuộc tính style
  • internal: Viết tại file HTML và nằm trong cặp thẻ <style> </style>
  • external: Viết ra một file riêng có đuôi là .css và import lại vào file HTML thông qua thẻ <link>

Để hiểu sâu hơn về từng cách gọi CSS ra thì chúng ta đi vào một ví dụ cụ thể xem kết quả của chúng có khác nhau gì không nhé. Chúng ta sẽ tạo ra một thẻ div có màu nền là màu xanh lá cây, và trong thẻ div chúng ta sẽ có thẻ p có kiểu chữ là màu trắng, cỡ chữ 18px.

Cách 1: Inline

Trong thẻ HTML chúng ta tạo một thuộc tính là style. Cách này chỉ nên áp dụng với những đoạn code CSS chỉ có một hoặc hai khối khai báo (Declaration). Không nên viết kiểu này bởi vì nó khó quản lý và không tốt cho SEO

Cú pháp CSS (Syntax CSS) inline-css-a

Cách 2: Internal

Chúng ta sẽ thay đổi một chút là sẽ viết CSS vào trong cặp thẻ <style> viết CSS vào đây </style>. Cách này khá ngắn gọn nhưng không nên để quá nhiều vì nó sẽ làm rối code CSS và code HTML

Cú pháp CSS (Syntax CSS) internal-css-1

Cách 3: External

Cách này hơi lằng nhằng một chút nhưng nó sẽ tách biệt thành hai file riêng rẽ nên việc nhầm code là không có. Chúng ta sẽ tạo riêng một file có đuôi là .css và import vào file HTML thông qua thẻ <link>. Mình khuyên các bạn nên viết theo cách này vì nó rất tốt cho SEO và việc các coder quản lý code.

Bước 1: Tạo file css:

Cú pháp CSS (Syntax CSS) external-cssBước 2: Import vào file HTML thông qua thẻ <link>

Cú pháp CSS (Syntax CSS) link-css

Trong đó:

  • href=”style.css”: đường dẫn đến file css
  • rel=”stylesheet”: khai báo cho trình duyệt biết đó là file css

Đến đây các bạn thử chạy lần lượt cả 3 cách xem có gì thay đổi không nhé. Mình xin đưa ra kết quả là không có gì thay đổi cả, tuy cách khai báo và gọi file CSS khác nhau nhưng lại đưa ra cùng một kết quả.

Tóm lại qua bài này mình mong các bạn hiểu cách viết CSS như nào? Một số lưu ý về các cách khai báo CSS ở các dạng inline, internal, external. Mình xin dừng lại bài này ở đây, hẹn các bạn ở bài tiếp theo.

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Bạn có cập nhật các hướng dẫn mới nhất về nghiên cứu từ khóa không? Nghiên cứu từ khóa đã là...
    9 giây trước
  2. Xây dựng mối liên kết các trang web hay còn gọi là backlink thực sự là một điều thiết yếu...
    15 giây trước
  3. Như chúng ta đã biết, công cụ tìm kiếm Google hiện đang giữ vị trí số một trong bảng xếp...
    1 giây trước
  4. Navigation website - điều hướng website là một phần quan trọng không thể thiếu đối với mỗi trang web. Việc...
    27 giây trước
  5. Công cụ kiểm tra URL là gì? Cách sử dụng Công cụ kiểm tra URL cho website của bạn như...
    9 giây trước
  6. SEO 2017 là một quá trình kỹ thuật, phân tích và sáng tạo để cải thiện khả năng hiển thị của...
    1 giây trước
  7. Các yếu tố này của các SERP (Bảng xếp hạng kết quả tìm kiếm (tự nhiên)) có thể hướng sự...
    25 giây trước
  8. Nghiên cứu từ khóa cho thông tin là chủ đề đã và đang được đề cập hàng nghìn lần trên...
    6 giây trước
  9. Một bài viết chuẩn SEO là bài viết có content – nội dung hấp dẫn thu hút được sự quan...
    1 giây trước
  10. Bạn muốn tự tạo logo cho website WordPress của bạn? Logo giúp bạn tạo lập thương hiệu và làm cho...
    2 giây trước