ขอถามเรื่อง CSS หน่อยครับ

ooooo · 19 มิ.ย. 2006, 16:08 น.

อ้างคำพูดจาก: iannnnn เมื่อ 16 มี.ค. 2006, 09:17 น.
ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด

http://labs.silverorange.com/archives/2004/september/csszooming

ที่มา : Digg.com

iannnnn · 20 มิ.ย. 2006, 10:37 น.

(+2) เฮ้ย ประโยชน์สูงสุด!!

ooooo · 25 มิ.ย. 2006, 22:42 น.

10 อย่าง ที่คนมักเข้าใจผิดเกี่ยวกับการใช้โค้ด CSS
http://www.designdetector.com/link/to/ten-common-css-mistakes/

ที่มา http://digg.com/programming/Ten_Common_CSS_Mistakes

ooooo · 27 มิ.ย. 2006, 00:20 น.

เว็บไซต์ CSS ที่รวมทุกด้าน มีตัวอย่างประกอบ แกะโค้ดศึกษากันเอาเอง
http://www.cssplay.co.uk

digg อีกรอบ คนแถวนั้นชอบ css
http://digg.com/programming/CSSPlay.co.uk_|_tons_of_cascading_style_sheet_ideas

iannnnn · 27 มิ.ย. 2006, 16:10 น.

อันสุดท้ายกดไม่ไปครับ ลิงก์ผิด

ooooo · 27 มิ.ย. 2006, 16:58 น.

ขอโทษครับ

iannnnn · 27 มิ.ย. 2006, 17:02 น.

อ้าว แค่นั้นเองเรอะ ตูคิดว่าสะกดผิดอะไรงี้

//แก้ไข
อ๋อ เว็บนี้ตูเข้าบ่อย ลอกบ่อยด้วย

http://www.cssplay.co.uk/menus/flyout_horizontal.html
อันนี้ช่วยอธิบายเรื่องเมนูโปร่งแสงได้ดีมากๆ เลย
(ถ้าใช้ ie ก็ใช้เป็นความโปร่ง ส่วนสำหรับ ฟฟ หรือ อปร ก็ใช้ alpha ของ .png เอา

)

iannnnn · 09 ก.ค. 2006, 01:23 น.

อ้างคำพูดจาก: X11 เมื่อ 25 พ.ค. 2006, 22:28 น.
คิดเปลี่ยนขนาดมาให้อีกแบบ
ผูก javascript กับ css

อ้างอิง<html>
<head>
   <style>
   #plaintext td.tt1 {
      font-size : 10pt;
      color : red;
   }
   #plaintext td.tt2 {
      font-size : 12pt;
      color : green;
    }

   #plaintext td.tt3 {
      font-size : 14pt;
      color: blue;
      text-decoration : bold;
   }

   </style>
   <script>
   function setStyle(a) {
         document.getElementById('plaintext').rows[0].cells[0].className=a;
   }
   </script>
</head>
<body>
<input type="button" value="1" onclick="setStyle('tt1')">  
<input type="button" value="2" onclick="setStyle('tt2')">  
<input type="button" value="3" onclick="setStyle('tt3')">  

<table id="plaintext" ><tr><td>This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.
This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.
A reference to all of the HTML DOM objects are listed in the menu to the left.</td></tr></table></span>
</body>
</html>

อันนี้คือกดปุ่มแล้วให้เปลี่ยน class
ทีนี้ก็ไปปรับดูว่าถ้าเปลี่ยน class ใหม่แล้วอยากให้แสดงรูปแบบอย่างไร

โค้ด เลือกทั้งหมด ขยายเนื้อหา
document.getElementById('plaintext').rows[0].cells[0].className=a;

อันนี้ประยุกต์ใช้เป็น javascript - random background ตอนโหลดหน้าเลยได้บ่ครับ
ในเมื่ออันนี้คือ bg ปกติที่ใส่ไว้ด้วย css

โค้ด เลือกทั้งหมด

body {
	background-image: url(images/bg1.jpg);
}

ooooo · 09 ก.ค. 2006, 09:11 น.

เมื่อเร็วๆนี้ตูไปแกะโค้ดเปลี่ยน background มาจาก
http://www.colorschemer.com/

ได้ผลเป็นที่น่าพอใจอย่างยิ่ง

X11 · 09 ก.ค. 2006, 13:08 น.

ได้นะ เท่าที่ลองดู

โค้ด เลือกทั้งหมด

<html>
<head>
	<style>
		body.test1 {
			background-image : url('bg1.jpg');
		}
		
		body.test2 {
			background-image : url('bg2.png');
		}
		
	</style>
	<script>
	function switchBg() {
		num=Math.floor(Math.random()*2+1);
		document.body.className="test"+num;
	}
	</script>
</head>

<body onload="switchBg();">
</body>
</html>

ตอนแรกคิดว่าถ้าเปลี่ยนเฉพาะ background image อย่างเดียว
จะเก็บเป็น array ของ javascript เฉยๆ ไม่ต้องผูกกับ css ก็ได้เหมือนกัน

โค้ด เลือกทั้งหมด

<html>
<head>
	<script>
	var bgx=new Array();
	bgx[0]="bg1.jpg";
	bgx[1]="bg2.png";
	function switchBg() {
		num=Math.floor(Math.random()*2);
		document.body.background=bgx[num];
	}
	</script>
</head>
<body onload="switchBg();">
</body>
</html>

เอ่อ...
เดี๋ยวค่อยมาอธิบายโค้ดนะ

Ah! · 09 ก.ค. 2006, 16:44 น.

พี่หน่อยจบโบราณไม่ใช่เหรอครับ

X11 · 09 ก.ค. 2006, 18:31 น.

โบราณเอกประวัติศาสตร์คอมพ์

อธิบายโค้ด... 1

โค้ด เลือกทั้งหมด

<html>
<head>
<style>
body.test1 {
background-image : url('bg1.jpg');
}

body.test2 {
background-image : url('bg2.png');
}

</style>
<script>
function switchBg() {
num=Math.floor(Math.random()*2+1);
document.body.className="test"+num;
}
</script>
</head>

<body onload="switchBg();">
</body>
</html>

ไม่มีอะไรมาก...
css สร้าง class ของ body ไว้ 2 ชุดชื่อ test1 กับ test2
ที่ให้ลงท้ายด้วย 1 กับ 2 เพราะจะได้ random ตัวเลขตัวท้าย จะสร้าง class กี่ตัวก็ให้มันเรียงไปละกัน
จากนั้นก็สร้าง function ชื่อ switchBg ใน javascript

บรรทัดแรก
num=Math.floor(Math.random()*2+1);
ก็คือให้มัน random ตัวเลขระหว่าง 0-1 (ไม่เกินสองว่างั้นเถอะ) >> Math.random() *2
แต่เนื่องจาก javascript มัน random ออกมาเป็นทศนิยมเพียบ ก็เลยต้องให้ปัดเศษเป็นเลขจำนวนเต็ม คือใส่ Math.floor ครอบอีกชั้น
เนื่องจากชื่อของ class มี test1 กับ 2 แต่ค่าที่ random ได้จะเป็น 0, 1 ก็เลยให้มัน +1 ทุกครั้งที่ random ออกมา ก็จะได้ 1 หรือ 2
ตรงนี้ถ้าใส่ class เพิ่ม ก็มาเพิ่มตรงตัวคูณของ random ได้
มี 5 ตัว ก็ใส่ Math.random()*5

บรรทัดต่อมา
document.body.className="test"+num;
ก็เป็นการเอาค่าที่ random มากำหนด class ของ body
document.body.className ก็คือกำหนด className ที่ต้องการใช้ให้กับ tag <body>
class คือเอาชื่อ test มาบวกกับค่า random 1 หรือ 2

เวลาใช้งาน ก็คือสั่งที่ <body>
สั่งตอนไหน ก็ onload ตอนที่กำลังโหลดเพจนั้น
ทำอะไร onload="switchBg()" ให้เรียกฟังก์ชั่น switchBg()

iannnnn · 09 ก.ค. 2006, 18:49 น.

(+3) ขอบคุณครับ

ที่ต้องการให้เป็น css เพราะพอดีผมลองทำเว็บนึงที่พยายามพึ่งการใช้ css มากกว่า html น่ะครับ
การกำหนดสไตล์ต่างๆ ก็เลยพยายามพึ่งมันแทน

X11 · 09 ก.ค. 2006, 19:20 น.

สคริปต์ 2

โค้ด เลือกทั้งหมด

<html>
<head>
<script>
var bgx=new Array();
bgx[0]="bg1.jpg";
bgx[1]="bg2.png";
function switchBg() {
num=Math.floor(Math.random()*2);
document.body.background=bgx[num];
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>

อันนี้คือทำทุกอย่างใน javascript เลย
สร้างตัวแปรเป็น Array เก็บชื่อ background image

var bgx=new Array();
bgx[0]="bg1.jpg";
bgx[1]="bg2.png";

ถ้าจะเพิ่ม ก็เพิ่มตัวแปร แล้วบวกตัวเลข index ของ array ไป
เช่น
bgx[2]="test.jpg";
bgx[3]="test2.jpg";

คำสั่ง random เหมือนกับอันก่อนนะ
num=Math.floor(Math.random()*2);

ส่วนอันนี้
document.body.background=bgx[num];
คือสั่ง background ของ body ตรงๆ เลย >> document.body.background
โดยให้ใช้ค่าจาก array ตาม index no ที่ random มา
ถ้า random ได้ 0 ก็จะได้ bgx[0] ไปเรียกไฟล์ bg1.jpg ราวๆ นี้

ปกติก็ไม่ค่อยได้สั่ง html เหมือนกัน
แต่ถ้าต้องการจะควบคุม template ของทั้งเว็บ จะตัดเป็นไฟล์ header.html กับ footer.html แล้วใช้คำสั่ง include ของ php เรียกเข้ามา
เวลาต้องการเปลี่ยน theme ใหม่ก็ตัด header กับบ footer ตัวใหม่มาแทนที่ ราวๆ นี้

ไฟล์ header.html

โค้ด เลือกทั้งหมด

<html>
<head>
	<title>Nattanan</title>
	<link type="text/css" href="main.css">
</head>

<body bgcolor="#F49AC1">
<table width="770" height="550" align="center"><tr><td valign="middle">
<table align="center" width="720" cellpadding="0" cellspacing="0" border="0">
<tr>
	<td align="center"><img src="images/logo.gif" width="82" height="70" alt="" border="0"></td>
</tr>
<tr>
	<td bgcolor="#ffffff" >

file footer.html

โค้ด เลือกทั้งหมด

</td>
</tr>
<tr>
	<td bgcolor="#F3BCD4">
	<!-- Menu of the site-->
	<table align="center" width="690" border="0">
		<tr>
			<td align="center"><a href="index.php"><img src="images/but_index.gif" width="37" height="20" alt="" border="0"></a></td>
			<td align="center"><a href="product.php"><img src="images/but_product.gif" width="51" height="20" alt="" border="0"></a></td>
			<td align="center"><a href="#"><img src="images/but_store.gif" width="38" height="20" alt="" border="0"></a></td>
			<td align="center"><a href="#"><img src="images/but_contact.gif" width="50" height="20" alt="" border="0"></a></td>
		</tr>
	</table>
	</td>
</tr>
<!-- Footer-->

</table>
</td></tr></table>

</body>
</html>

เสร็จแล้วก็เรียกใช้

โค้ด เลือกทั้งหมด

<? 
include("header.html");
?>
type body of the web page here........
<?
include("footer.html");
?>

iannnnn · 09 ก.ค. 2006, 19:27 น.

อู๊ย ชัดครับ เอกประวัติศาสตร์คอม