Ví dụ

Xem cây bút
Demo Div 1 by Cường Tiến (@cuongtien)
trên CodePen

• • Cách sử dụng CSS
    • CSS nội tuyến. application for a HTML section
    • CSS nội bộ. áp dụng cho một trang HTML
    • CSS bên ngoài. áp dụng cho nhiều trang HTML
      • Với CSS bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tập tin
  • Ví dụ
    • CSS nội tuyến

Xem cây bút
Demo Inline CSS của Cường Tiến (@cuongtien)
trên CodePen

• • • CSS nội bộ

Xem cây bút
Demo Internal CSS của Cường Tiến (@cuongtien)
trên CodePen

• • • CSS bên ngoài

Xem cây bút
Demo External CSS của Cường Tiến (@cuongtien)
trên CodePen

Vùng lựa chọn dựa trên tên thẻ

Ví dụ. Định dạng thẻ h1 thì vùng lựa chọn sẽ là h1 như sau

h1 {
    background: red;
    color: blue;
}

Đây là dạng định dạng đơn giản, nhưng được khuyến cáo không nên sử dụng nhiều do ngẫu nhiên khi bạn định dạng như vậy thì tất cả các thẻ h1 trong trang web sẽ chuyển thành định dạng như vậy. Ví dụ trong trang web có 100 thẻ h1 thì tất cả 100 thẻ đó đều giống nhau 1 màu sắc như trên

Lựa chọn vùng dựa trên id

Khi nhắc đến id nghĩa là chỉ có duy nhất mà không có trùng lặp. Nếu bạn cố tình cho nhiều tên id giống nhau thì code vẫn chạy bình thường nhưng khi đến side server side setting thì sẽ bị lỗi. Vì vậy không nên sử dụng nhiều tên id giống nhau. Id sử dụng bạn sẽ định dạng được các thẻ theo ý riêng của mình

Ví dụ. Định dạng thẻ h1 dựa vào id=”nenvang” thì đoạn mã của thẻ h1 sẽ như sau

 Học lập trình web 

Code definite css as after

#nenvang {
    background: yellow;
    color: blue;
}

Nhìn vào cú pháp bạn sẽ thấy. Để định dạng vùng theo id thì sử dụng cú pháp #nameID trong đó nameID là tên id bạn đặt trong thẻ cần định dạng và trước tên id sẽ là dấu #, khi chạy chương trình thì chỉ có các thẻ h1 có id=”nenvang . Đây là một cách được sử dụng rất nhiều hiện nay

Vùng lựa chọn dựa trên lớp

Vùng chọn dựa trên lớp khá giống với vùng chọn id chỉ khác đó là tên lớp có thể nhiều tên giống nhau và thay vì sử dụng dấu # trước tên lớp, chúng ta sẽ sử dụng dấu chấm. Ngay sau dấu chấm sẽ là tên lớp

Ví dụ. Định dạng thẻ h2 dựa vào class=”nenxanh” thì đoạn mã của thẻ h2 sẽ như sau

 Học css căn bản 

Code definite css as after

.nenxanh {
    background: blue;
    color: red;
}

Như vậy chỉ có các thẻ h2 mà có class =”nenxanh” mới chịu tác động css. Đây cũng là bộ chọn phổ biến trong các trang web hiện nay mà bạn cần biết

Phân vùng lựa chọn

Ở 3 vùng lựa chọn trên khá đơn giản và dễ hiểu nhưng đến cùng lựa chọn này thì mức độ phức tạp sẽ cao hơn. Vùng chọn phân cấp tức thời là bạn cần định dạng 1 thẻ mà thẻ đó nằm trong 1 thẻ khác hay trong 1 id, lớp khác và id, lớp đó lại nằm trong 1 id, lớp khác nữa

A B
Vùng chọn này còn được gọi là vùng chọn hậu duệ (hậu duệ). Lựa chọn vùng này sẽ xác định tất cả các thẻ B nằm bên trong thẻ A, không kể phân cấp, vị trí thứ như là con, là cháu, là thoáng chút gì đó

Ví dụ. Định dạng tất cả thẻ h3 nằm trong thẻ div có id=”nenmaudo” thì code HTML as after

     

	 
Học CSS Cơ Bản
     

Code format css as after

#nenmaudo h3 {
    background: red;
    color: white;
}

Một > B
Vùng chọn này còn được gọi là vùng chọn con (con), và có nét tương đồng với vùng chọn hậu duệ. Tuy nhiên, vùng chọn này chỉ xác định tất cả các thẻ B là con trực tiếp của thẻ A, chứ không nằm bên trong bất kỳ thẻ nào khác

Ví dụ. Định dạng thẻ h3 nằm trong thẻ div có class=”content” thì code HTML as after

    
 
         
Học CSS Cơ Bản
    
 

Code format css as after

________số 8_______

Chọn tất cả các vùng

Nghe tên vùng chọn thôi bạn cũng đã hiểu ý nghĩa của nó rồi đúng không? . Có nhiều bạn nhầm lẫn giữa vùng chọn này với vùng chọn theo tên nội dung. Vì vậy bạn cần phân biệt 2 vùng lựa chọn này hoàn toàn khác nhau nhé. Vùng chọn theo thân thẻ chưa chắc đã tác động lên tất cả các thẻ HTML còn vùng chọn * thì chắc chắn sẽ tác động lên tất cả các thẻ HTML trong trang web