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

ningâ¤ · 17 มี.ค. 2006, 13:20 น.

(พี่แอนคะ ที่จริงนั่งงงกับโพสนั่นอยู่เกือบครึ่งชั่วโมง แล้วค่อยไปถามจานวี เพียง 3 นาทีเท่านั้น เข้าใจเลย

)

+1 พี่อจวว ค่ะ

iannnnn · 17 มี.ค. 2006, 13:29 น.

ningâ¤ · 17 มี.ค. 2006, 13:34 น.

icez · 18 มี.ค. 2006, 18:22 น.

เสริมนิดนึงนะครับ

ในหน้าเว็บนึง เราสามารถใช้การตั้งค่า CSS ได้ทั้ง 3 แบบเลย

โดยระบบจะเลือกใช้แบบที่ 1 เป็นตัวแม่ (อยู่นอกสุด)
แบบที่สองเป็นตัวรองลงมา และแบบที่ 3 เป็นตัวในสุด

เวลามองก็ซ้อนกันจากนอกเข้ามา

เช่นจากในแฟ้ม style.css (เรียกใช้แบบที่ 1 ใส่ไปว่า <link rel="stylesheet" type="text/css" href="style.css">)

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

font {
font-family: Tahoma;
font-size: 20px;
color: red
}

และกำหนดใน header แบบที่ 2

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

<style  type="text/css">
font { color: black }
</style>

แล้วมากำหนด ใน tag ตามแบบที่ 3

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

<font style="font-size: 15px">

จะได้คุณสมบัติสุดท้ายคือ

font-family: Tahoma; (จากตัวที่ 1 เพราะไม่มีการเปลี่ยนแปลง)
font-size: 15px; (จากตัวที่ 3)
color: black; (จากตัวที่ 2)

Black-Pigeon · 19 มี.ค. 2006, 19:02 น.

+1 ไอซ์

ningâ¤ · 21 มี.ค. 2006, 15:30 น.

จบบทเรียนแล้วหรอคะพี่ อจวว

saa3 · 21 มี.ค. 2006, 15:39 น.

เพิ่งเข้ามาดู

เปิดเป็นแตกสอนเล้ยยย สอนกันเยอะเหลือเกิน

Black-Pigeon · 21 มี.ค. 2006, 18:06 น.

ยังไม่จบครับ แต่ขี้เกียจ ฮ่าๆๆๆๆๆ

ooooo · 25 พ.ค. 2006, 06:38 น.

ขุด

สุดยอดโปรแกรมดูพรีวิว CSS แบบสดๆ
ที่สำคัญคือดูได้ทั้ง IE กับไฟร์ฟอกซ์ ได้ในเวลาเดียวกัน!!

แก้แล้วเห็นผลทันที ไม่ต้องเซฟอะไรเลย
(เหมือน extension EditCSS)

ดาวน์โหลดที่นี่ (ฟรี)
http://www.sitevista.com/cssvista/

iannnnn · 25 พ.ค. 2006, 06:44 น.

ขอบใจ

อ๊ะ ไอ้อี

X11 · 25 พ.ค. 2006, 18:09 น.

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

ของเว็บผู้จัดการไม่แน่ใจ คำสั่ง javascript setStyle() แล้วให้มันไปเซ็ทเป็น cookie ซึ่ง cookie ตัวนี้จะไปกำหนดลิ้งไฟล์ css ที่ต้องดึงมาใช้ในหน้านั้นๆ ถ้า small ก็เปิดไฟล์ css_S.css ถ้าเป็น large ก็เปิด css_L.css

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

function InitStyle()
{
	var strCss = getCookie("css");

	if(typeof(strCss) == "undefined")
		strCss = "Normal";

	if(strCss == "Small")
		document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css">');
	else
		document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css" disabled>');

	if(strCss == "Normal")
		document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css">');
	else
		document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css" disabled>');

	if(strCss == "Large")
		document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css">');
	else
		document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css" disabled>');

	if(strCss == "ExtraLarge")
		document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css">');
	else
		document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css" disabled>');

	return true;
}

function SetStyle(strName)
{
	var intCount;

	for(intCount = 0;intCount < document.styleSheets.length; intCount++) {
		if(document.styleSheets[intCount].title == strName)
			document.styleSheets[intCount].disabled = false;
		else
			document.styleSheets[intCount].disabled = true;
	}

	setCookie("css", strName, 30, "/", null);
}

ที่หน้านั้นก็เรียก

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

<link rel="stylesheet" title="Mocked" href="/css/css.css" type="text/css" disable>
กับ

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

<SCRIPT LANGUAGE="JavaScript" SRC="/JavaScript/Style.js"></SCRIPT>
และลืมใส่อันนี้จนได้

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

<SCRIPT LANGUAGE="JavaScript">
InitStyle();
</SCRIPT>

ลืมคำสั่งที่ปุ่ม

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

<a href="Small%20Style" onclick="SetStyle('Small'); return false;" > <img name="imgSmallCss" src="http://www.manager.co.th/images/SmallCss.gif" border="0" height="23" width="13"></a>

อาจจะส่งตัวแปรหลายทอดไปหน่อย

แต่ถ้าจะเอาโค้ดอย่างง่ายๆ ก็

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

<html>
<head>
	<title>Untitled</title>
	<script>
	function setStyle(a) {
		switch (a) {
			case "tt1" : {
			document.getElementById('plaintext').style.fontSize="10pt";
			break;
			}
			case "tt2" : {
			document.getElementById('plaintext').style.fontSize="12pt";
			break;
			}
			case "tt3" : {
			document.getElementById('plaintext').style.fontSize="14pt";
			break;
			}
		}
	}
	</script>
</head>

<body>
<input type="button" value="1" onclick="setStyle('tt1')">&nbsp;&nbsp;
<input type="button" value="2"   onclick="setStyle('tt2')">&nbsp;&nbsp; 
<input type="button" value="3" onclick="setStyle('tt3')">&nbsp;&nbsp;
<br><span id="plaintext">
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.</span>
</body>
</html>

โค้ดอันนี้ก็ตรงไปตรงมา
เซ็ท id ให้กับข้อความว่า plaintext
มีปุ่มสามปุ่ม ปุ่มแรกถ้ากดก็ให้ไปเรียก function จาก javascript ชื่อ setStyle (ขอยืมใช้ชื่อฟังก์ชั่นผู้จัดการละกัน) โดยให้กำหนดค่าเป็น tt1
ปุ่มที่สองก็เป็น tt2 แล้วปุ่มที่สามเป็น tt3
ตัวฟังก์ชั่น setStyle() ก็ให้รับค่าเข้ามา

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

function setStyle(a)

ตัวแปร a คือตัวที่จะรับค่าเข้ามาในฟังก์ชั่น
จากนั้้นในฟังก์ชั่นก็ให้ตรวจสอบตัวแปร a ด้วย switch
ถ้าเป็น tt1 ให้เปลี่ยนขนาดฟอนต์ของ id plaintext เป็น 10pt

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

document.getElementById('plaintext').style.fontSize="10pt";

iannnnn · 25 พ.ค. 2006, 18:19 น.

(+2)

ถ้ายังงี้มันก็น่าจะบันทึกค่าการปรับขนาดตัวอักษรไว้ใช่ไหมครับ
ว่าเราปรับเป็นเล็กหรือใหญ่มาก่อน
แต่ทำไมเข้า ผจก ทีไรตัวเล็กจิ๋วหลิวเหมือนเดิมทุกที

โปรแกรมเมอร์เขาไม่ได้ทำเผื่อตรงนี้ไว้หรือเปล่า
เอ๊ะ หรือเขาทำมาให้ชาวไออีอย่างเดียว

X11 · 25 พ.ค. 2006, 21:11 น.

ใช่จ้ะ มันน่าจะบันทึกการปรับค่า เพราะคนเขียนเว็บผู้จัดการตั้งวันหมดอายุไว้ซะ 30 วันแน่ะ

อ้างอิงsetCookie("css", strName, 30, "/", null);

แต่ไม่รู้ทำไมมันไม่ทำงานใน firefox ทั้งที่มันก็ setcookie ได้เรียบร้อย
เปิด tools > options > privacy > cookies > view cookies
แล้วหาเว็บ manager.co.th ชื่อ cookie "css" มันก็มีบันทึกแล้ว
ทำไมเปลี่ยนหน้าใหม่ไม่ยอมเรียกก็ไม่รู้

ลองกับ IE ก็ทำงานนะ
เปิดหน้าแรก กดตัวอักษรใหญ่สุด
แล้วไปเปิดหน้าสอง หน้าสาม ก็ยังคงขนาดใหญ่ได้

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')">&nbsp;&nbsp;
<input type="button" value="2"   onclick="setStyle('tt2')">&nbsp;&nbsp; 
<input type="button" value="3" onclick="setStyle('tt3')">&nbsp;&nbsp;
<br>
<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 ใหม่แล้วอยากให้แสดงรูปแบบอย่างไร

แก้ไข... ลืมใส่ rows[0]
มิน่ารันบน firefox มันหา object ไม่เจอ

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

document.getElementById('plaintext').rows[0].cells[0].className=a;

iannnnn · 26 พ.ค. 2006, 11:42 น.

+

ขอบคุณครับ