Cách sử dụng CSS trong HTML đơn giản nhất cho người mới bắt đầu

Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp. Vì vậy hãy tìm hiểu về cách sử dụng CSS trong HTML để có thể định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Mẫu website 24h sẽ hướng dẫn cách sử dụng CSS trong HTML đơn giản nhất cho người mới bắt đầu. Hãy cùng theo dõi đến cuối bài viết nhé.

Lý do cần sử dụng CSS trong HTML?

Chúng ta cần sử dụng CSS trong HTML vì nó cho phép định dạng kiểu và cách hiển thị của các phần tử HTML. CSS sẽ hỗ trợ bạn phân tách nội dung và cách trình bày trang. Nếu bạn chỉ sử dụng HTML thì việc định dạng các phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, việc này gây khó khăn cho việc bảo trì.

Những định dạng sẽ được loại bỏ khỏi văn bản HTML, định dạng sẽ được lưu vào một file CSS khi bạn sử dụng CSS.

Sử dụng css trong HTML

Các khái niệm cần biết khi sử dụng CSS trong HTML

Property (Thuộc tính): Là thuộc tính của phần tử HTML, ví dụ như:

  • Font-size (kích cỡ chữ của phần tử)
  • Color (màu sắc chữ của phần tử)
  • Background-color (màu nền của phần tử)

Sử dụng css trong HTML

Value (Giá trị): 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.

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

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

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

Lưu ý:

  • Phía sau mỗi cặp property : value phải được kết thúc bằng 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:40px;color:white;background-color:black;}p{background-color:gray;}
    

Các thuộc tính định dạng CSS quan trọng

1. Color (Màu sắc)

Thuộc tính Color dùng để thiết lập màu chữ cho phần tử. Xác định giá trị của thuộc tính theo:

  • Tên màu
  • Giá trị Hex
  • Giá trị RGB

2. Background – color ( Màu nền)

Thuộc tính Background – color thiết lập màu nền cho phần tử. Xác định giá trị thuộc tính theo tên màu, giá trị Hex, giá trị RGB.

3. Font – size ( Cỡ chữ)

Thiết lập kích cỡ chữ cho phần tử. Giá trị thuộc tính xác định theo:

  • px
  • em (1em = 16px)

4. Font – family

Thiết lập kiểu chữ cho phần tử.

5. Text – align (Căn lề)

Căn lề cho nội dung của phần tử. Có 3 giá trị:

  • Left: Căn lề trái
  • Center: Căn lề giữa
  • Right: Căn lề phải

6. Border

Tạo đường viền bao xung quanh phần tử.

7. Width, height (Chiều rộng – cao)

Thiết lập chiều rộng và chiều cao cho phần tử. Có thể xác định theo đơn vị px hoặc %.

Cách sử dụng CSS trong HTML

Chúng ta sẽ có 3 cách sử dụng CSS trong HTML là:

  • Inline: mã CSS viết tại thuộc tính Style của phần tử HTML
  • Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>
  • External: mã CSS ở một file riêng biệt sau đó nạp vào HTML bằng phần tử <link>

Sử dụng css trong HTML

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.

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ẻ <style type=”text/css”></style>

Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head>

3. External CSS

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

Trong cặp thẻ <head></head> của tập tin HTML, ta dùng thẻ <link rel=”stylesheet’type=”text/css”hrè=”đường dẫn đến tập tin CSS”> để nhúng tin CSS vào trang web.

Thứ tự ưu tiên sử dụng CSS trong HTML

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

1. Inline

2. Internal

3. External

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.

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

Mặc định, 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.

Cách ghi chú thích

Nếu bạn muốn vô hiệu hóa một số mã CSS với mục đích nào đó (ví dụ 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:40px;*/
    background-color:red;
    /*Đây là một câu chú thích*/
}

Lời kết

Các bạn đã hiểu tầm quan trọng khi sử dụng CSS trong HTML hay chưa. Qua những chia sẻ của Mẫu Website 24h, hi vọng các bạn có thể thực hiện và sử dụng CSS trong HTML một cách dễ dàng nhất. Chúc các bạn thành công, mọi thắc mắc hãy liên hệ với chúng tôi – Dịch vụ thiết kế website hàng đầu Việt Nam.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *