แนวทาง การใช้งาน php กับ css กำหนด รูปแบบ style อย่างง่าย

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
php css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ php css

ดูแล้ว 33,824 ครั้ง


กรณีไฟล์ทดสอบ สมมติให้ชื่อว่า php_css.php
ในที่นี้จะแนะนำ การใช้งาน php กับ css ที่นำมาใช้งานในรูปแบบต่างๆ ได้แก่
แบบ in-line
แบบ Internal
แบบ External

ศึกษาการใช้งาน css ใน 3 รูปแบบได้ที่
https://www.ninenik.com/การใช้งาน_CSS__ศึกษาิวิธีการนำ_CSS_ไปใช้กับ_HTML-59.html

1. การใช้งาน php กับ css แบบ inline โดยการแทรกค่าตัวแปร php เข้าไปใน css style แบบ inline
โค้ดไฟล์ php_css.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php css random</title>
</head>

<body>

<?php
// กำหนดค่า array สี สำหรับทดสอบ
$arr_mycolor=array("#5AB820","#E7CD3A","#3A7BE7","#E73AE1","#E73A6B");

// แบบที่ 1
// อธิบาย  array_rand($arr_mycolor) ทำการ random เอาค่า key ของ array ค่าสี
$my_randcolor=$arr_mycolor[array_rand($arr_mycolor)]; // ดึง array ค่าสีจาก key ที่ random ได้

// แบบที่ 2
//	shuffle($arr_mycolor); // ทำการสลับตำแหน่งของ array
//	$my_randcolor=$arr_mycolor[0]; // ดึงค่า array สีตัวแรกหลังสลับตำแหน่งแล้ว
?>

<p style="color:<?=$my_randcolor?>;">www.ninenik.com</p>

</body>
</html>

2. การใช้งาน php กับ css แบบ Internal โดยการแทรกค่าตัวแปร php เข้าไปในส่วน head ด้วยแท็ก style
โค้ดไฟล์ php_css.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<?php
// กำหนดค่า array สี สำหรับทดสอบ
$arr_mycolor=array("#5AB820","#E7CD3A","#3A7BE7","#E73AE1","#E73A6B");

// แบบที่ 1
// อธิบาย  array_rand($arr_mycolor) ทำการ random เอาค่า key ของ array ค่าสี
$my_randcolor=$arr_mycolor[array_rand($arr_mycolor)]; // ดึง array ค่าสีจาก key ที่ random ได้

// แบบที่ 2
//	shuffle($arr_mycolor); // ทำการสลับตำแหน่งของ array
//	$my_randcolor=$arr_mycolor[0]; // ดึงค่า array สีตัวแรกหลังสลับตำแหน่งแล้ว
?>
<style type="text/css">
p{
	background-color:<?=$color?>;	
}
</style>
</head>

<body>

<p>www.ninenik.com</p>

</body>
</html>

3. การใช้งาน php กับ css แบบ External โดยการสร้างไฟล์ css จาก php ไฟล์ สมมติชื่อ gencss.php
แล้วนำมาใช้ในไฟล์ php_css.php ด้วย แท็ก link
โค้ตไฟล์ gencss.php

<?php
header("Content-type:text/css; charset=UTF-8");            
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
// กำหนดค่า array สี สำหรับทดสอบ
$arr_mycolor=array("#5AB820","#E7CD3A","#3A7BE7","#E73AE1","#E73A6B");

// แบบที่ 1
// อธิบาย  array_rand($arr_mycolor) ทำการ random เอาค่า key ของ array ค่าสี
$my_randcolor=$arr_mycolor[array_rand($arr_mycolor)]; // ดึง array ค่าสีจาก key ที่ random ได้

// แบบที่ 2
//	shuffle($arr_mycolor); // ทำการสลับตำแหน่งของ array
//	$my_randcolor=$arr_mycolor[0]; // ดึงค่า array สีตัวแรกหลังสลับตำแหน่งแล้ว    
?>
p{
	color:<?=$my_randcolor?>;		
}

โค้ดไฟล์ php_css.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--นำ css ไฟล์จากการ gen ด้วย php มาใช้งานแบบ external-->
<link rel="stylesheet" type="text/css" href="gencss.php" />
</head>

<body>

<p>www.ninenik.com</p>

</body>
</html>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: php css







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ