• Trang chủ
  • Học CSS
  • [Tự học CSS] – Tìm hiểu về các cách sử dụng CSS trong vài phút
209 lượt xem

[Tự học CSS] – Tìm hiểu về các cách sử dụng CSS trong vài phút

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Trong bài viết hôm nay mình sẽ giới thiệu đến các bạn các cách để viết code CSS. Hãy cùng mình theo dõi bài viết này nhé.

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 (thuộc tính : giá trị)  vào bên trong thuộc tính style nằm ở thẻ mở của phần tử.

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>

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.

Ví dụ,mình 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:

Để 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:

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

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ụ :

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ụ :

Và đây là kết quả

Cách ghi chú thích

Tiện thể trong bài viết này mình chỉ luôn các bạn 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

Lời kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Cảm ơn các bạn đã theo dõi bài viết.

[Tự học CSS] – Tìm hiểu về các cách sử dụng CSS trong vài phút
5 (1) vote

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

4 bình luận trong “[Tự học CSS] – Tìm hiểu về các cách sử dụng CSS trong vài phút

  1. trung toan says:

    chào admin,

    link ở bộ 2000 font chữ bị lỗi rồi,ad có thể sửa lại để mình xin tải về không

    cám ơn ad đã chia sẻ

  2. Hung Fieu says:

    Cho mình hỏi là tạo hình chữ nhật trắng có vai trò gì? Vì mình đã thử cả phương án tạo và không tạo đều ra kết quả như nhau. Cảm ơn bạn.

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 *