Cách Sử Dụng CSS Trong Trang Web HTML

Trang chủ » Chỉnh Css Trong Html » Cách Sử Dụng CSS Trong Trang Web HTML

Có thể bạn quan tâm

Cách sử dụng CSS trong trang web HTML

Khái niệm property, value, selector

Property là thuộc tính của phần tử HTML, ví dụ:

  • font-size (kích cỡ chữ của phần tử)
  • color (màu chữ của phần tử)
  • background-color (màu nền của phần tử)
  • .....

Value là giá trị của thuộc tính.

Selector (bộ chọn) là phần tử mà bạn muốn định dạng.

Ví dụ:

Trong đoạn mã phía dưới:

  • Bộ chọn là h1
  • Có 3 thuộc tính là font-size, color, background-color với giá trị lần lượt là 30px, white, red
h1 { font-size:30px; color:white; background-color:red; } Xem ví dụ

Cú pháp định dạng phần tử

Để định dạng cho một phần tử, ta sử dụng cú pháp như sau:

selector { property1: value; property2: value; property3: value; ..... propertyN: value; } Ví dụ: h1 { font-size:30px; color:white; background-color:red; } p { background-color:gray; } Xem ví dụ

Lưu ý:

  • Phía sau mỗi cặp property:value phải được kết thúc bởi dấu chấm phẩy (;)
  • Vấn đề xuống dòng và khoảng cách trong CSS là không quan trọng, đoạn mã ở ví dụ phía trên có thể viết lại như sau.
h1{font-size:30px;color:white;background-color:red;}p{background-color:gray;}

Cách sử dụng CSS

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

1) Inline CSS

Ta đặt các cặp property:value vào bên trong thuộc tính style nằm ở thẻ mở của phần tử.

Ví dụ: <p style="color:red;font-size:25px;background-color:blue">Web cơ bản</p> Xem ví dụ

Bạn có thể tham khảo thêm về thuộc tính style tại đây

2) Internal CSS

Đặt các bộ định dạng CSS vào bên trong <style type="text/css"></style>

<style type="text/css"></style> đặt bên trong phần <head></head>

Ví dụ: <!DOCTYPE html> <html> <head> <style type="text/css"> h1 { font-size:30px; color:white; background-color:red; } p { background-color:gray; } </style> </head> <body> <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1> <p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p> </body> </html> Xem ví dụ

3) External CSS

Đặt các bộ định dạng CSS vào bên trong một tập tin css

Trong phần <head>, ta sử dụng cú pháp phía dưới để nhúng tập tin css vào trang web.

<link rel="stylesheet" type="text/css" href="đường dẫn đến tập tin CSS">

Ví dụ, tôi có một tập tin css nằm cùng cấp với tập tin html

Tập tin css có tên là dinhdang và chứa nội dung như sau:

h1 { font-size:30px; color:white; background-color:red; } p { background-color:gray; }

Để nhúng tập tin css phía trên vào trang web thì ở tập tin html sẽ có nội dung như sau:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="dinhdang.css"> </head> <body> <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1> <p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p> </body> </html>

Lưu ý:

  • Cách tạo tập tin css giống với cách tạo tập tin html (chỉ thay .html bằng .css)
  • Trong tập tin css không được chứa cặp thẻ <style type="text/css"></style>

Thứ tự ưu tiên giữa các cách sử dụng CSS

Nếu một thuộc tính nào đó của phần tử được thiệt lập giá trị bởi nhiều cách, thì thuộc tính đó sẽ nhận giá trị của cách sử dụng CSS dựa theo độ ưu tiên như sau:

  • 1) Inline
  • 2) Internal
  • 3) External
Ví dụ:

Ở đoạn mã phía dưới, thuộc tính color của phần tử <h1> được thiết lập giá trị bởi 2 cách sử dụng CSS.Trong đó, kiểu Inline có độ ưu tiên cao hơn Internal, nên thuộc tính color sẽ nhận giá trị blue

<!DOCTYPE html> <html> <head> <style type="text/css"> h1 { color:red; } </style> </head> <body> <h1 style="color:blue">webcoban.vn (WEB CƠ BẢN .VN)</h1> </body> </html> Xem ví dụ

Thứ tự ưu tiên trong một bộ định dạng

Trong một bộ định dạng của một phần tử, nếu một thuộc tính nào đó bị viết lập lại nhiều lần, thì thuộc tính đó sẽ nhận giá trị ở lần viết cuối cùng.

Ví dụ:

Thuộc tính color của phần tử <h1> sẽ nhận giá trị ở lần viết cuối cùng là green

h1 { color:red; font-size:25px; color:green; } Xem ví dụ

Kế thừa giá trị thuộc tính từ phần tử tổ tiên

Thông thường, nếu một phần tử không thiết lập giá trị cho thuộc tính thì thuộc tính đó sẽ nhận giá trị từ giá trị thuộc tính của phần tử chứa nó và ở gần nó nhất.

Ví dụ: <!DOCTYPE html> <html> <body> <div style="color:red"> <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1> </div> <div style="color:red"> <div style="color:green"> <h1>webcoban.vn (WEB CƠ BẢN .VN)</h1> </div> </div> <div style="color:red"> <div style="color:green"> <h1 style="color:blue">webcoban.vn (WEB CƠ BẢN .VN)</h1> </div> </div> </body> </html> Xem ví dụ

Cách ghi chú thích

Khi bạn muốn vô hiệu hóa một số mã CSS với mục đích nào đó (chẳng hạn như để ghi nhớ, chú thích, hoặc test code) thì bạn đặt chúng vào bên trong cặp dấu /* */

Ví dụ:

Đoạn CSS nào nằm bên trong cặp dấu /* */ sẽ bị vô hiệu hóa

h1 { /*color:red; font-size:50px;*/ background-color:blue; /*Đây cũng là một câu chú thích*/ } Xem ví dụ

Từ khóa » Chỉnh Css Trong Html