Cú pháp CSS như thế nào?

Thích 1.9 K ● Bình luận 0 ●
863 đánh giá
34.4 K

Cú pháp CSS (CSS Syntax) bao gồm Selector và các thuộc tính, các thuộc tính được nằm trong dấu {…} Tên thuộc tính và giá trị thuộc tính như sau:

  • Cú pháp css
    Một Selector có thể có nhiều thuộc tính như: màu sắc, font-size, background…
    Selector{ tên_thuộc_tính_1: giá_trị_của_thuộc_tính_1; tên_thuộc_tính_2: giá_trị_của_thuộc_tính_2;... tên_thuộc_tính_n: giá_trị_của_thuộc_tính_n;}
  • Giải thích ý nghĩa của cú pháp
    – Selector có thể là 1 số thành phần sau:
      + Selector là ID trong thẻ html như ví dụ dưới đây:
    <a id="header">Header ID</a>

      + Selector là Class trong thẻ:

    <a class="header">Header ID</a>

      + Selector là tên thẻ hoặc dấu *, trường hợp này bạn không phải đặt thông tin thẻ mà sẽ quy định trong CSS
      + Các selector này nếu cùng chung thuộc tính sẽ viết cách nhau bởi dấu phẩy như ví dụ phía đưới

    – Thuộc tính và giá trị thuộc tính của 1 đối tượng bắt buộc phải nằm trong {…}  và có thể viết thành 1 dòng thay vì viết như trên. Nhưng mình khuyến khích bạn nên viết khoa học để dê kiểm tra lỗi. Có rất nhiều loại chúng ta sẽ bắt đầu và tìm hiểu kỹ ở bài học phần III của bài Hướng dẫn học CSS

  • Chú thích cú pháp trong CSS: Chú thích trong css như sau /* chú thích */ xem ví dụ phía dưới
  • Ví dụ cú pháp và chú thích trong css (Chú ý bạn nên học song song với html cơ bản để hiểu rõ ví dụ này)
    <!DOCTYPE><html><head>	<meta http-equiv="content-type" content="text/html; charset=utf-8" />	<title>Cú pháp CSS</title> <style type="text/css"> *{font-size: 12px; font-family: Arial;} /* Selector la dau (*) */ body{line-height: 18px;} /* Selector la body */ #main{width: 980px; margin: 0px auto;} /* Selector la ID (main) */ .header,.content,.footer{float:left; width: 980px; height:auto; margin: 0px auto;} /* Selector la Class (header,content,footer) */ </style></head><body><div id="main"> <div class="header">Header</div> <div class="content">Footer</div> <div class="footer">Footer</div></div></body></html>

    Ví dụ về CSS trên đây đã chỉ rõ cho bạn các loại đối tượng và thuộc tính cơ bản của nó, chốt lại phần cú pháp bạn chỉ cần hiểu sơ bộ như vậy!

 » Trở về xem bài Hướng dẫn học CSS


Bình luận