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í 17++ 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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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...

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. Có thể nói Facebook hiện nay đang là trang mạng xã hội được nhiều người quan tâm nhất tại Việt...
    21 giây trước
  2. Thiết kế website luôn là một ngành công nghiệp kết hợp giữa các yếu tố khoa học công nghệ và...
    16 giây trước
  3. Nếu bạn nhận thấy một cái gì đó khác nhau trong bảng xếp hạng tìm kiếm, có lý do chính...
    29 giây trước
  4. Rất nhiều người thường nhầm lẫn về 2 phần mềm làm phim Windows Movie Maker và Windows Live Movie Maker....
    4 giây trước
  5. Keyword Planner là một công cụ lên kế hoạch từ khóa được Google phát triển vào năm 2013. Với đa...
    27 giây trước
  6. Câu hỏi Hôm qua tôi đã đọc bài You don't know Query của @nacin's và tôi cảm thấy bị loạn. Trước đó, tôi...
    8 giây trước
  7. Trong số chúng ta chắc hẳn đã ít nhất một lần làm việc hoặc nghe tới  khái niệm “bảng” rồi...
    19 giây trước
  8. “Có nên yêu một cô nàng IT?” - 3 ngàn lý do khiến bạn Mê mẩn với một cô gái...
    22 giây trước
  9. 5 bước hiệu quả của marketing trong thời đại Net. Chỉ có khi nào bạn đang sống ẩn mình trên...
    5 giây trước
  10. Title tag là gì? Title tag là một phần của bảng mã HTML hiển thị tiêu đề của một trang...
    25 giây trước