Làm sao chèn CSS vào trang Web? Cách nhúng css vào website

Thứ hai - 26/07/2021 00:09
Bạn đã có một file CSS của bạn, bây giờ công việc tiếp theo là làm thế nào để chèn những đoạn CSS của bạn vào trong trang, Và xem chúng hoạt động như thế nào. Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về cách chèn một đoạn style trong trang HTML hay liên kết tới một file CSS viết sẵn.
Làm sao chèn CSS vào trang Web? Cách nhúng css vào website
Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ được định dạng theo các thuộc tính đã được khai báo trong phần CSS. Có ba cách cho phép chúng ta chèn định dạng CSS vào trong Website. 
1. CSS được khai báo trong file riêng.
Toàn bộ mã CSS được chứa trong file riêng có phần mở rộng .css là một ý tưởng được dùng khi một file CSS sẽ được áp dụng cho nhiều trang khác nhau. Bạn có thể thay đổi cách hiển thị của toàn bộ site mà chỉ cần thay đổi một file CSS. Trong cách này thì file CSS sẽ được chèn vào văn bản HTML thông qua thẻ <link>...</link>. Ta có cú pháp như sau:
<html><head><link rel="stylesheet" type="text/css" href="/mystyle.css"medial="all" /></head><body></body></html>
Trình duyệt sẽ đọc toàn bộ các định dạng được quy định trong file mystyle.css và định dạng cho văn bản HTML. File CSS có thể được soạn thảo bằng một số trình duyệt khác nhau. Trong file không được chứa mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại với phần mở rộng là .css. Giả sử chúng trong file mystyle.css ở trên chứa đoạn mã sau:
hr {color: sienna}p {margin-left: 20px}body {background-image: url('/images/back40.gif')}
2. Chèn CSS trong tài liệu HTML
Chèn thẳng CSs trong tài liệu được áp dụng trong trường hợp những định dạng CSS này chỉ giành riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì đoạn mã của bạn phải đặt trong thẻ <style> và đặt trong phần <head>.
<head><style type="text/css">hr {color: sienna}p {margin-left: 20px}body {background-image: url('/images/back40.gif')}</style></head>
Có một số trình duyệt cũ sẽ không hiểu thẻ <style>, nó sẽ bỏ qua thẻ này. Tuy nhiên thì nội dung trong thẻ <style> vẫn hiển thị ra trang HTML. Vì vậy mà chúng ta sẽ phải dùng định dạng chú thích trong HTML để chứa phần nội dung của thẻ <style>.
<head><style type="text/css"><!--hr {color: sienna}p {margin-left: 20px}body {background-image: url('/images/back40.gif')}--></style></head>
3. Chèn trực tiếp vào thẻ của HTML(inline style)
Inline style được sử dụng nhiều trong trường hợp một thẻ HTML nào đó cần có style riêng cho nó. Inline style được áp dụng cho chính thẻ HTML đó, cách này sẽ có độ ưu tiên lớn nhất so với hai cách trên. Dưới đây là một ví dụ mà chúng ta dùng Inline style
<p style="color: sienna; margin-left: 20px">This is a paragraph</p>
4. Nhiều Stylesheet
Trong trường hợp mà có một số thẻ có cùng định dạng, chúng ta có thể gộp chúng lại với nhau. Giả sử như sau:
h1, h2, h3 {margin-left: 10px;font-size: 150%;...}
 
 Tags: Học CSS

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Những tin mới hơn

Những tin cũ hơn

File mới

Full code theme tin tức Nukeviet Xứ Quảng News ver 2
19/12/2023

Full code theme tin tức, blog công nghệ Xứ Quảng News
18/12/2023

Share full code shop quần áo, điện tử mã nguồn Nukeviet
29/12/2021

Share modules Lưu niệm ( Guestbook ) cho Nukeviet
31/12/2021

Full code theme tin tức, blog công nghệ Xứ Quảng News
18/12/2023

Đây là 50 số điện thoại tuyệt đối chặn ngay khi vừa nhận cuộc gọi
15/12/2023

Cách lấy lại Menu chuột phải cổ điển trên Windows 11 hiển thị giống như Windows 10
16/01/2022

Share full code shop quần áo, điện tử mã nguồn Nukeviet
29/12/2021

Hướng dẫn tắt tính năng autosave của trình soạn thảo ckeditor cho nukeviet
22/12/2021
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây