การเขียน 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 ธรรมดาก็ได้
สิ่งเพิ่มเติมที่ 8.8 เมื่อเปิดหน้าเว็บแล้วเลือกเพื่อเปลี่ยน style ของหน้าเว็บก็จะมีให้เลือกระหว่าง blue และ black ที่เราได้เขียนเอาไว้ก่อนหน้านี้แล้ว
สิ่งเพิ่มเติมที่ 8.9 หลังจากที่เรากดเปลี่ยน style เป็น black จะเห็นได้ว่าเส้นรอบรูปนั้นเปลี่ยนเป็นสีดำทันที
เพิ่มเติม
- คุณสามารถสร้าง style เพื่อใช้สำหรับเครื่อง printer อย่างเดียวได้ หรือสำหรับ อุปกรณ์พกพาต่างๆก็ได้