Cú pháp trong CSS

  • Nguyễn Lê Điệp
  • 04-12-2016
  • 293
  • 0
  • 2
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Một style trong CSS gồm có ba phần tử như phần selector, property và value

    Selector: Là một phần tử mà tại đó bạn áp dụng một style cho nó. Đó có thể là bất kỳ một thẻ HTML nào, như thẻ div, thẻ h,…

    Property: Là thuộc tính của thẻ HTML. Nói một cách đơn giản thì tất cả các thuộc tính trong HTML được chuyển đổi thành các CSS thuộc tính. Đó có thể là backgroundmargin,...

    Value: Là các giá trị được gán cho các thuộc tính. Ví dụ, background có thể có các giá trị là blue (xanh da trời),  #ff0000 (đỏ),...

    Cú pháp css

    selector { property: value }

    Ví dụ

    h1{
      border-color: blue;
      color: #ff0000;
    }
    Trong ví dụ bên trên ta hiểu như sau:
    • h1 là phần selector
    • border-color và color là các property
    • blue và #ff0000 là các giá trị value
    Và nó sẽ chỉ ảnh hưởng tới tất cả các thẻ h1 trong HTML như sau:
    • Có khung là màu xanh
    • Có màu chữ là màu đỏ
    Lưu ý: Một thuộc tính CSS luôn luôn kết thúc với một dấu chấm phảy và các thuộc tính được bao bởi cặp dấu ngoặc móc.

    Các loại selector

    Class selector

     
     Bạn có thể áp dụng cho các phần tử với thuộc tính class của phần tử đó.
    Ví dụ bên dưới định nghĩa cho tất cả các phần tử có thuộc tính là class="left"
    .left{
      text-align: left;
      color: red;
    }
    Trong trường hợp nếu bạn có nhiều phần tử và bạn muốn áp dụng định nghĩa style này có một phần tử và phần tử đó là h1 thì bạn có thể làm như sau:
    h1.left{
      text-align: left;
      color: red;
    }
    Các phần tử HTML có thể có nhiều class khác nhau ví dụ như class left bên trên và thêm class background thì ta có thể viết
    <div class="left background">
      div này sẽ được tạo style bởi hai class là left và background.
    </div>

    Id selector

     
    Cũng tương tự như class selector nhưng điểm khác ở đây là class dùng dấu chấm (.) trước mỗi selector và id thì dùng dấu thăng (#) và là duy nhất mỗi phần tử chỉ nên tồn tại một id.
    Ngoài ra nếu bạn chỉ muốn áp dụng style này cho một con trong phần tử ví dụ như id="center" thì ta có thẻ làm như đoạn style bên dưới
    #center h1{
      color: #cccccc;
    }
    Và đồng nghĩa trong thẻ id="center" có những thẻ h1 nào thì style sẽ áp dụng cho h1. Để các bạn bạn hình dung ra hơn ta có ví dụ sau:
    <div id="center">
    	<h1>Học css tại Kennis.vn</h1>
    	<p>Những bài học cho người mới bắt đầu</p>
    </div>
    Ở ví dụ HTML trên thì style #center h1 chỉ áp dụng cho thẻ h1 còn thẻ p không ảnh hưởng bởi style này.

    Element selector

     
     Element selector thường được sử dụng trong các thẻ định dạng văn bản như các thẻ: h1, h2, p,...
    Ví dụ ta có thẻ h1 thì ta có style như sau:
    h1{
      color: #cccccc;
    }
    Style bên trên nó sẽ áp dụng cho tất cả các thẻ h1 có trong trang web của bạn.

    Universal selector

     
     Nếu bạn muốn áp dụng style này cho tất cả các phần tử trong HTML thì sẽ này nó sẽ đảm nhiệm
    *{
      color: #cccccc;
    }

    Descendant selector

     
     Giả sử bạn muốn áp dụng style này có phần tử con của phần tử ví dụ ta có HTML như sau
    <ul>
    	<li>
    		Học css tại Kennis.vn
    	</li>
    </ul>
    Ta chỉ muốn áp dụng cho thẻ li thì ta có style bên dưới
    ul li{
      color: #cccccc;
    }

    Child selector

     
    Cũng giống như descendant selector các bạn có thể xem ví dụ bên dưới để hiểu hơn
    body > p {
       color: #cccccc; 
    }
    Đoạn style trên nó áp dụng cho tất cả các thẻ p trong web của bạn.

    Attribute selector

     
    Bạn cũng có thể áp dụng style cho một thẻ HTML cụ thể nào đó ví dụ ta có thể HTML: <input type="text"> thuộc tính của thẻ này là type="text" đúng không ạ? Ta có style như bên dưới
    input[type = "text"]{
       color: #cccccc; 
    }
    
    Phương thức này chỉ ảnh hưởng đến các input có type là text còn các input type khác sẽ không ảnh hưởng ví dụ như type submit hoặc email...

    Multiple Style

     
    Bạn cũng có thể định nghĩa nhiều property cho một selector h1 như ví dụ bên dưới
    h1{
       color: #cccccc; 
       text-align: left;
       width: 200px;
       line-height: 20px;
       background: yellow;
    }
    Như ở trên thì các thuộc tính được ngăn cách bở dấu chấm phảy như bên trên mình đã nói đúng không ạ? Có thể các bạn chưa hiểu hết những thuộc tính trên nhưng các bạn an tâm vì các bạn mới bắt đầu rồi dần dần các bạn sẽ biết và hiểu các thuộc tính ấy.

    Grouping selector

     
    Có đôi khi ta muốn các thẻ HTML áp dụng cho một style nào đó thì các bạn cứ an tâm CSS vẫn hỗ trợ cho các bạn với tên gọi đó là grouping selector. Ở ví dụ dưới sẽ giải quyết được sự tò mò của các bạn
    h1, h2, h3{
       color: #cccccc; 
       text-align: left;
       width: 200px;
       line-height: 20px;
       background: yellow;
    }
    Như các bạn đã thấy ví dụ trên thì chúng ta có các thẻ h1, h2, h3 liên tiếp đúng không ạ? Đoạn style trên có nghĩa là các thẻ h1, h2, h3 đều sử dụng các thuộc tính như trên.
    Lưu ý: Giữa các thẻ trong grouping phải được ngăn cách bởi dấu phảy (,). Nếu bạn vô tình quên thì style sẽ không hiểu bạn đang muốn didnjhdangj cho thẻ HTML nào.
    Ngoài ra grouping selector nó cũng áp dụng cho các thuộc tính class và id như ví dụ bên dưới.
    .left, .right, .center{
       color: #cccccc; 
       text-align: left;
       width: 200px;
       line-height: 20px;
       background: yellow;
    }
    
    #left, #right, #center{
       color: #cccccc; 
       text-align: left;
       width: 200px;
       line-height: 20px;
       background: yellow;
    }

    Thẻ chú thích

    Trong quá trình viết style tất nhiên một trang web lớn thì buộc style sẽ rất dài đúng không các bạn? Vậy làm sao về sau khi code style xong bạn vào sửa lại style mà không bị mờ mắt vì tìm phần tử nào đó trong style của mình. Thì trong css có hỗ trợ cho bạn đó là thẻ chú thích với mở đầu /* và kết thúc */ . Ở ví dụ dưới sẽ giúp các bạn hiểu về thẻ này cũng như cách sử dụng nó.
    p {
        color: red;
        /* vi du ve chu thich nam tren mot dong */
        text-align: center;
    }
    
    /* vi du ve
      chu thich nam 
      tren nhieu dong 
    */
    Ví dụ thực tế với HTML
    <!DOCTYPE html>
    <html>
       <head>
          <style>
             p {
                color: red;
                /* Vi du ve the chu thich tren mot dong */
                text-align: center;
             }
             /* Vi du ve the chu thich 
             	tren nhieu dong
             	trong CSS
             */
          </style>
       </head>
       <body>
          <p>Hoc CSS co ban tai Kennis.vn!</p>
       </body>
    </html>
    Kết quả sẽ là:

    Hoc CSS co ban tai Kennis.vn!

    Từ khóa:

    Cú pháp trong CSS

    Cú pháp trong CSS

    Cú pháp trong CSS

    Cú pháp trong CSS
    Cú pháp trong CSS
    2 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    452
    - Hôm qua:
    904
    - Tuần này:
    4.914
    - Tuần trước:
    6.504
    - Tháng này:
    19.071
    - Tháng trước:
    24.702
    - Năm này:
    136.462
    - Năm trước:
    17.373
    - Tổng cộng:
    153.835