Cách chèn CSS vào website

05/05/2019

Bài sau » « Bài trước

Khi trình duyệt (browsers) đọc các dòng code CSS, nó sẽ định dạng (format) file HTML dựa theo các dòng code CSS đó.

Có 3 cách chèn CSS vào website như sau:

  • Gọi file CSS từ bên ngoài (External style sheet)
  • Viết CSS trong trang HTML (Internal style sheet)
  • Viết trên các thẻ HTML (Inline style)

Gọi file CSS từ bên ngoài - External style sheet

- Với cách gọi file CSS từ bên ngoài, khi bạn muốn thay đổi giao diện website thì bạn chỉ cần chỉnh sửa style trong file CSS đó.

- Để gọi file CSS từ bên ngoài bạn sử dụng thẻ <link> và đặt nó nằm trong thẻ <head>. Xem ví dụ bên dưới :

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

- File css bạn có thể viết trên bất cứ editor nào bạn cảm thấy dễ nhất. 

- File css được lưu có đuôi mở rộng là .css

- Dưới đây là file "mystyle.css" :

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

Chú ý: Không được viết khoảng trắng giữa giá trị và đơn vị (như là margin-left: 20 px) mà phải là margin-left: 20px;

Viết CSS trong trang HTML - Internal style sheet

- Viết CSS trong trang HTML có lẽ được dùng cho trường hợp landing page.

- Ta chỉ cần viết chúng trong thẻ <style> và đặt vào trong thẻ <head>.

<head> <style> body { background-color: blue; } h1 { color: navy; margin-left: 20px; } </style> </head>

Viết trên các thẻ HTML - Inline style

- Cách viết này thì đoạn css chỉ ảnh hưởng trong chính thẻ HTML được viết.

- Tại các thẻ HTML, bạn chỉ cần thêm thuộc tính style và viết các thuộc tính CSS mà bạn muốn. Ví dụ bên dưới cho thẻ h1 có màu đỏ và cách lề trái 30px:

<h1 style="color:red;margin-left: 30px;">Đây là tiêu đề</h1>

Chú ý: Viết thuộc tính CSS trong thẻ HTML dễ bị xung đột (conflict) với CSS trong file CSS từ bên ngoài. Khi đó thuộc tính trong thẻ HTML sẽ quan trọng hơn. Nên hết sức cân nhắc khi viết CSS theo kiểu này.

Sử dụng nhiều file CSS

- Trong trường hợp trang web của bạn sử dụng nhiều file CSS khác nhau. Sẽ có nhiều bộ chọn (selector) trùng nhau, với các thuộc tính CSS khác nhau. Thì bộ chọn (selector) với thuộc tính CSS nằm dưới cùng sẽ được dùng.

- Cùng phân tích ví dụ dưới đây để hiểu rõ hơn:

- File "mystyle.css" có thẻ h1 màu đỏ.

h1{ color: red; }

- File "mystyle2.css" có thẻ h1 màu xanh.

h1{ color: blue; }

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

Chèn CSS vào website

- Trong trường hợp trên thì thẻ h1 sẽ có màu xanh của file "mystyle2.css" do bộ chọn h1 trong file này nằm sau cùng.

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

Chèn CSS vào website

- Khi ta đổi vị trí 2 file css với nhau thì lúc này thẻ h1 sẽ có màu đỏ của file "mystyle.css" do bộ chọn h1 trong file này nằm sau cùng.


Trên đây là 3 cách chèn CSS vào website và sử dụng nó. Các bạn nếu có thắc mắc gì thì hãy để lại bình luận nhé.


Bài sau » « Bài trước

Bình luận

labedroommut 25/04/2020

Girls bedroom sets
Conceived update your? Check out the news products home from new compilation, in her represented as products with bright floral patterns and and goods with gorgeous texture and finish metallic. Bench for the garden is today necessary attribute each modern villas. In our online store today you can buy best furniture for apartments. We will deliver in WILSHIRE customer all furniture at desired time days.Price lists, those that provides online shop furniture items WEST HOLLYWOOD (WEST HOLLYWOOD) quite all customer.Again relatively low fee causes some questions regarding quality. The catalog which filled diverse items furniture represents exclusively high quality factory products.

evavdfvop 15/02/2020

Maintain the excellent job and delivering in the group! https://shop4shoe.com
Back to top