HTML/CSS

[W3schools Tiếng Việt] – Cách nhúng mã nguồn CSS vào HTML

Trong bài này mình sẽ tổng hợp thêm 1 cách nữa ngoài hướng dẫn theo w3shools, vì vậy chúng ta sẽ có tất cả 4 cách.

04 cách để nhúng CSS vào HTML

  • External style sheet
  • Internal style sheet
  • Inline style
  • Import style sheet (bonus)

External Style Sheet

Ngắn gọn là bạn sẽ tạo một tệp css riêng biệt (có đuôi mở rộng là .css) sau đó link vào tài liệu HTML qua khai báo trong phần <head>.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Trong phần trên mystyle.css chính là tệp css chứa các thuộc tính quy định, trông nó sẽ như thế này:

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

Lưu ý: Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị (chẳng hạn như lề trái: 20 px;). Cách chính xác là: margin-left: 20px;

Cách này rất dễ cho chúng ta bảo trì và tái sử dụng sau này nên khuyến khích các bạn sử dụng theo cách này. Bạn có thể sử dụng bất kỳ kiểu nào trong một tệp riêng lẻ được liên kết với bất kỳ tệp nào. của các trang. Đây là lựa chọn lý tưởng cho nhiều nhà phát triển web. Bởi vì nó có khả năng tái sử dụng cao, nội dung CSS và HTML của bạn sẽ rõ ràng vì cả hai đều nằm trong các tệp riêng biệt, Nó cũng là công cụ tìm kiếm thân thiện.

Internal Style Sheet

Đây là cách chèn trực tiếp mã nguồn css vào code HTML thông qua thẻ <style>. thẻ này được khai báo trong phần <head> của trang HTML.

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

Với cách Internal Style Sheet thì tính tái sử dụng là không có, vì css chỉ được áp dụng trên một trang web, trong khi đó 1 website bình thường sẽ là tổng hợp của rất nhiều trang web, nên cách này chỉ thích hợp với kiểu web được viết với một bản HTML.

Inline Styles

Kiểu này được sử dụng để áp dụng kiểu duy nhất cho một phần tử đơn lẻ. Để sử dụng kiểu Inline Styles, hãy thêm thuộc tính kiểu cho phần tử có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.

Ví dụ dưới đây cho thấy cách thay đổi màu và lề trái của phần tử <h1>:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Import style sheet

Hiểu cơ bản đây là cách chia nhỏ mã nguồn file css ra thành nhiều file khác nhau để dễ quản lý hơn.

Ta khai báo như sau:

<head>

    <style>

    @import 'mystyle.css';

    </style>

</head>

 

Với cách viết này thì gần như không khác gì Internal Style Sheet nhưng lại có toàn bộ ưu điểm của External Style Sheet.

Vậy việc chia nhỏ để dễ quản lý là như thế nào?. Ví dụ bạn có nhiều file css với mỗi file bạn sẽ định nghĩa nhóm style khác nhau cho các HTML Element thì việc quản lý và sửa chữa sẽ rất đơn giản và chuyên nghiệp.

Ngoài ra bạn cũng có thể nhúng các file css vào nhau để sử dụng. Ví dụ:

Ta có 2 file css là mystyle.css và more-mystyle.css:

more-mystyle.css:

ul {margin:5px};

li{color:red};

và file mystyle.css đang import file more-mystyle.css.

@import 'more-mystyle.css';

h2 {color:blue};

p {font-size: 20px};

Vậy kết quả sẽ tương đương với file mystyle.css được viết thành:

ul {margin:5px};

li{color:red};

h2 {color:blue};

p {font-size: 20px};

Multiple Style Sheets – Nhiều thuộc tính một phần tử.

Đôi khi trong tài liệu css của chúng ta có xuất hiện trường hợp có nhiều thuộc tính nhưng được xác định cho một phần tử, thì giá trị của thuộc tính cuối cùng sẽ được sử dụng.

Và nếu phần tử đó được định dạng bằng nhiều cách (4 cách kể trên) thì thứ tự ưu tiên sẽ là: Inline Styles > Internal Style Sheet > External Style Sheet

Ví dụ:

Giả sử rằng phần tử <h1> đang được css định dạng theo kiểu External Style Sheet :

h1 {
color: navy;
}

Sau đó, cũng có 1 định dạng css khác được áp dụng (phần tử chịu tác động vẫn là <h1>) được định dạng lại theo kiểu internal style sheet

h1 {
color: orange; 
}

Kết quả thẻ <h1> sẽ có mầu Cam.

Nhưng nếu, trong quá trình viết css thẻ <h1> được định dạng lại theo kiểu Inline Style thì thứ tự ưu tiên sẽ hiển thị theo kiểu này:

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Lúc này thẻ <h1> sẽ có mầu Xanh (blue).

Tóm lại thứ tự ưu tiên sẽ là : Inline Styles > Internal Style Sheet > External Style Sheet

Về tác giả

Tiến Đức

Để lại một bình luận