Cuối cùng, bạn cũng có thể bao gồm tệp CSS qua PHP. Điều này về cơ bản sẽ chèn tệp vào vị trí này trên trang khi nó được thực thi giống như sao chép và dán
<PHP> include('style.css'); <PHP>GHI CHÚ. Bạn sẽ phải bao gồm
<style>và
</style>các thẻ ở đầu và cuối tệp css nếu sử dụng phương pháp này
Có rất nhiều cách sử dụng PHP echo out CSS cho bạn. Một vài ví dụ là người dùng tùy chỉnh chủ đề của họ và lấy các giá trị CSS từ cơ sở dữ liệu, có một kiểu khác cho các tác nhân người dùng khác nhau và lấy kiểu tùy chỉnh từ cookie
Trên các trang web được cung cấp bởi PHP, đánh dấu HTML, biểu định kiểu CSS và tập lệnh JavaScript được lưu trữ trong tệp PHP
Bất kỳ mã nào không được đặt trong thẻ PHP (tức là, <?php ?>) không phải tuân theo cú pháp PHP và sẽ được xuất ra dưới dạng mã tĩnh cho tài liệu HTML mà máy chủ tạo ra để đáp ứng yêu cầu của trình duyệt
Mặt khác, mã được đính kèm trong thẻ PHP phải tuân theo cú pháp ngôn ngữ PHP và sẽ được xuất động sang tệp HTML do trình duyệt của người dùng tải
Nói cách khác, có một cách tĩnh và một cách động để thêm CSS bằng PHP—và chúng ta sẽ tìm hiểu cả hai cách đó trong phần còn lại của bài viết này
Thêm CSS bằng PHP theo cách tĩnh
Trong tệp PHP của bạn, bạn có thể nội tuyến mã CSS của mình trong thuộc tính <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>0 của các phần tử HTML, nhúng mã đó vào thẻ <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>1 trong tiêu đề hoặc liên kết với mã đó trong thẻ <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>2 và mã sẽ được xuất ra như cũ
Tệp PHP sau
<!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>Sẽ dẫn đến đánh dấu HTML sau
<!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>Tuy nhiên, điều này giả định rằng bạn chỉ viết mã HTML/CSS và lưu trữ mã đó trong tệp PHP, trong trường hợp đó, bạn không tận dụng được khả năng của ngôn ngữ kịch bản PHP để làm cho trang web của bạn trở nên động.
Thêm CSS với PHP theo cách động
Bây giờ chúng ta đã đề cập đến cách làm việc tĩnh, hãy dành một hoặc hai phút để nói về cách thêm mã CSS vào tài liệu HTML của bạn một cách linh hoạt
Một trong nhiều điều mà bạn có thể làm với PHP là khai báo các biến và lưu trữ thông tin trong đó. Sau đó, bạn có thể tham chiếu các biến này trong các câu lệnh PHP <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>3 của mình để xuất thông tin được lưu trữ trong chúng ra màn hình
Ví dụ: bạn có thể lưu trữ các giá trị cho thuộc tính CSS của mình trong các biến PHP, sau đó xuất chúng sang các tệp HTML phía máy khách để tự động tạo mã CSS của bạn theo mọi yêu cầu
<?php $h1_size = "42px"; $h1_color = "blue"; $stylesheet_url = "style.css"; ?> <!doctype html> <html> <head> <?php echo "<style> font-size: {$h1_size}}; </style>" ?> <?php $url = "style.css"; echo "<link rel='stylesheet' href='{$stylesheet_url}'>"; ?> </head> <body> <h1 <?php echo "style='color:blue'" ?>>Hello, world!</h1> </body> </html>Kết quả giống như ví dụ tĩnh một vài đoạn trên. Nhưng điểm khác biệt là bạn có thể xác định các giá trị của mã CSS—và sử dụng lại chúng trong các quy tắc CSS
<!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>Càng xa càng tốt
Nhưng sức mạnh thực sự của PHP, như W3Schools giải thích trong hướng dẫn này, đến từ các chức năng của nó
For example, you can create a function to generate a element with the rel=”” and href=”” attributes stored in variables:
<?php // Define the linkResource() function function linkResource($rel, $href) { echo "<link rel='{$rel}' href='{$href}'>"; } ?>Sử dụng chức năng này, bạn có thể liên kết bất kỳ biểu định kiểu CSS bên ngoài hoặc tập lệnh JS nào
Lưu ý việc sử dụng dấu ngoặc đơn và dấu ngoặc kép. Nếu bạn đang sử dụng dấu ngoặc kép trong mã PHP của mình, thì bạn cần sử dụng dấu ngoặc kép đơn cho mã HTML trong câu lệnh <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>3 của mình và ngược lại
Nếu bạn gọi hàm <!doctype html> <html> <head> <style> font-size: 42px; </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color:blue">Hello, world!</h1> </body> </html>5 ở bất kỳ đâu trong tệp PHP của mình với các tham số sau
// Call the linkResource() function <?php linkResource("stylesheet", "/css/style.css"); ?>It will output a DOM element with those parameters to the client-side HTML file:
<link rel="stylesheet" href="/css/style.css">Đây là những gì nó trông giống như trong thực tế. Tệp PHP phía máy chủ bên dưới
<?php function linkResource($rel, $href) { echo "<link rel='{$rel}' href='{$href}'>"; } ?> <!doctype html> <html> <head> <?php linkResource("stylesheet", "/css/normalize.css"); ?> <?php linkResource("stylesheet", "/css/style.css"); ?> </head> <body> <h1>Hello, world!</h1> </body> </html>Sẽ xuất tệp HTML phía máy khách bên dưới
<!doctype html> <html> <head> <link rel='stylesheet' href='/css/normalize.css'> <link rel='stylesheet' href='/css/style.css'> </head> <body> <h1>Hello, world!</h1> </body> </html>Ghi chú. Bạn có thể kiểm tra tất cả các mã PHP bằng cách thực thi nó trong một trong những công cụ yêu thích của tôi, hộp cát PHP dựa trên trình duyệt tại onlinephp. io
Tóm lại là
Có hai cách để thêm mã CSS với PHP. Một là cách tĩnh hoặc hai là mã hóa cứng nó vào các tệp PHP của bạn và cách còn lại là cách động hoặc để tạo bằng các hàm và biến
Bây giờ bạn đã biết cách sử dụng cả hai, bạn có thể chọn cái phù hợp với dự án của mình tùy thuộc vào nhu cầu và yêu cầu hiện tại
Cảm ơn bạn đã đọc đến đây và nếu bạn có bất kỳ câu hỏi nào hoặc muốn chia sẻ mẹo của riêng mình với những độc giả còn lại của bài đăng này, đừng quên để lại câu trả lời bên dưới