PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

25 December 2010 By Ninenik Narkdee
php css

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



กรณีไฟล์ทดสอบ สมมติให้ชื่อว่า 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>

 







Tags:: css php






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


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