Hướng dẫn inline css - css nội tuyến

CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ dùng để định dạng cho các phần tử HTML (Ví dụ: chỉnh kích cỡ chữ, chỉnh font chữ, màu chữ, màu nền, hình nền, đường viền,....) dựa trên các cặp thuộc tính:giá trị thuộc tínhthuộc tính:giá trị thuộc tính

Với việc sử dụng CSS, ta có thể định dạng ra các phần tử HTML thật đặc biệt và chuyên nghiệp.

Hướng dẫn học Lập Trình Web

Theo phong cách học từ a đến z

Hướng dẫn học HTML

Hướng dẫn học CSS

Cách sử dụng CSS

Có ba cách để sử dụng CSS: Inline, Internal, External

1) Inline CSS

Ta đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS (Bạn có thể tham khảo cách sử dụng CSS bằng Inline trong bài Thuộc tính Style trong HTML).


Hướng dẫn inline css - css nội tuyến

Xem ví dụ

2) Internal CSS

Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ

Cặp thẻ thì được đặt bên trong cặp thẻ




    
        
    
    
        
Hướng dẫn inline css - css nội tuyến

Xem ví dụ

2) Internal CSS

element {
    property1 : value;
    property2 : value;
    property3 : value;
    ....
    propertyN : value;
}



    
        
    
    
        

heading 1

heading 2

heading 3

Xem ví dụ

2) Internal CSS

Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ

  • Cặp thẻ thì được đặt bên trong cặp thẻ
  • Để định dạng cho một phần tử, ta sử dụng cú pháp:

3) External CSS

  • Với Internal CSS:
  • Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ để nhúng tập tin CSS vào trang web.

Rồi cặp thẻ thì đặt bên trong cặp thẻ

h2 {
    color:red;
    font-size:50px;
    font-family:Courier;
}

Với External CSS:



    
        
    
    
        

Hello HTML

Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS

Trong cặp thẻ của tập tin HTML, ta dùng thẻ để nhúng tập tin CSS vào trang web.
Ta có thể nhúng vào trang web nhiều tập tin CSS bằng cách viết nhiều thẻ

Tôi có một tập tin dinhdang.css (cùng cấp với tập tin HTML) có nội dung là

Khi thực thi tập tin HTML có nội dungMàn hình trình duyệt sẽ hiển thị làXem ví dụ
2) Internal CSS

Ta đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ

  • Cặp thẻ thì được đặt bên trong cặp thẻ
  • Để định dạng cho một phần tử, ta sử dụng cú pháp:
  • 3) External CSS
Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

  • Với External CSS:
  • Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS
Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

  • Với External CSS:
  • Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS
  • Trong cặp thẻ của tập tin HTML, ta dùng thẻ để nhúng tập tin CSS vào trang web.
  • Tôi có một tập tin dinhdang.css (cùng cấp với tập tin HTML) có nội dung là
  • Khi thực thi tập tin HTML có nội dung
  • Màn hình trình duyệt sẽ hiển thị là
  • Cách tạo tập tin CSS giống với cách tạo tập tin HTML (thay .html bằng .css)Ta có thể nhúng vào trang web nhiều tập tin CSS bằng cách viết nhiều thẻ
  • Một số thuộc tính định dạng CSS quan trọng
  • Thuộc tính
  • Ý nghĩa
  • color
  • Thiết lập màu chữ cho phần tử. Giá trị của thuộc tính color có thể xác định theo:
  • Tên màu (Ví dụ: green, blue, red, yellow, pink, black, white,....)
Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

  • Với External CSS:
  • Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS
  • Trong cặp thẻ của tập tin HTML, ta dùng thẻ để nhúng tập tin CSS vào trang web.
Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

  • Với External CSS:
  • Ta đặt các thuộc tính định dạng vào bên trong tập tin CSS
  • Trong cặp thẻ của tập tin HTML, ta dùng thẻ để nhúng tập tin CSS vào trang web.
Với Internal CSS:
Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ

Rồi cặp thẻ thì đặt bên trong cặp thẻ

Với Internal CSS:

Ta đặt các thuộc tính định dạng vào bên trong cặp thẻ