การเขียน style sheet ให้มีได้หลายแบบใน 1หน้าเว็บ

คุณสามารถลิ้งค์ style sheet ได้มากกว่า 1 อัน(เหมือนเลือก theme ของเว็บ) เพื่อที่จะสามารถให้ผู้ใช้ได้เลือก style ได้ด้วยตนเอง ว่าแบบไหนจึงจะเหมาะ โดยการเลือก จะเป็นการเลือก style แบบถาวร โดยการปรับได้ใน preference โดยปรกติ default จะถูกเลือกเอาไว้ ถ้า user ไม่มีตัวเลือก

จากบทความเก่าเราจะจำได้ว่าตอนนี้เรามี styles.css ที่มี rule ว่า? img { border: 4px solid red; }

การสร้าง style sheet อันใหม่ เพื่อให้ผุ้ใช้เลือกเปลี่ยนได้
1.สร้าง style sheet ขึ้นมาโดยอันที่สร้างนี้เราจะให้เป็น default ก่อนการเปลี่ยนของ user(อันนี้ไม่ต้องตั้งชื่อ)
2.สร้าง style sheet ขึ้นมาใหม่อีกอันนึง โดยที่เราจะต้องชื่อให้ โดยการตั้งชื่อให้เราใส่ title=”label” โดยที่ label คือชื่อที่เราตั้งให้ และจะเป็นตัวเลือกแรกสุด
3..สร้าง style sheet ขึ้นมาใหม่อีกอันนึง โดยที่เราจะต้องชื่อให้ โดยการตั้งชื่อให้เราใส่ rel=”alternate stylesheet” title=”label” ใน link element? เพื่อเป็นตัวเลือกถัดๆไป

img { border: 4px solid blue;}
สิ่งเพิ่มเติมที่ 8.5 css ตัวใหม่ที่เราตั้งชื่อไฟล์ให้ว่า styles_blue.css

img { border: 4px solid black;}
สิ่งเพิ่มเติมที่ 8.6 css ตัวใหม่ที่เราตั้งชื่อไฟล์ให้ว่า styles_black.css

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=tis-620″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
<link rel=”stylesheet” type=”text/css” href=”styles_blue.css” title=”Blue” />
<link rel=”alternate stylesheet” type=”text/css” href=”styles_black.css” title=”Black” />
</head>
<body>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<p><img src=”mindwebhost_logo.png” /></p>
สิ่งเพิ่มเติมที่ 8.7 เราเขียนให้มี style 3 ชุดใน 1 หน้า โดยเมื่อ user เปิดหน้าเว็บก็จะถูกเลือกเอาไว้ที่ Blue ก่อน จากนั้น user ก็สามารถเลือกเปลี่ยนเป็น black หรือ styles.css ธรรมดาก็ได้

เปลี่ยน style หน้าเว็บ
สิ่งเพิ่มเติมที่ 8.8 เมื่อเปิดหน้าเว็บแล้วเลือกเพื่อเปลี่ยน style ของหน้าเว็บก็จะมีให้เลือกระหว่าง blue และ black ที่เราได้เขียนเอาไว้ก่อนหน้านี้แล้ว

เปลี่ยน style หน้าเว็บ
สิ่งเพิ่มเติมที่ 8.9 หลังจากที่เรากดเปลี่ยน style เป็น black จะเห็นได้ว่าเส้นรอบรูปนั้นเปลี่ยนเป็นสีดำทันที

เพิ่มเติม
- คุณสามารถสร้าง style เพื่อใช้สำหรับเครื่อง printer อย่างเดียวได้ หรือสำหรับ อุปกรณ์พกพาต่างๆก็ได้

No comments yet.
You must be logged in to post a comment.