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

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

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



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

ศึกษาการใช้งาน css ใน 3 รูปแบบได้ที่
http://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 สำหรับอ้างอิง











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