การเขียนบล็อก IV - เปลี่ยนสีตัวหนังสือและเปลี่ยนสีลิ้ง
บล็อกนี้เว้นช่วงห่างจากบล็อกที่แล้วซะหลายวันเลย ก็เนื่องจากมัวแต่ไปทำเว็บไซต์อีกแห่งหนึ่ง
ตอนนี้เรามาต่อกันด้วยเรื่องการเปลี่ยนสีตัวหนังสือ การเปลี่ยนแบบอักษรและการเปลี่ยนสีลิ้งนะค่ะ ในการเปลี่ยนสีตัวหนังสือในบล็อกนั้น จะแยกออกเป็น 2 แบบ คือ
1. การเปลี่ยนสีตัวหนังสือตามปกติ ซึ่งมักจะใช้ในเวลาเขียนบล็อกบล็อกใหม่ ซึ่งโค้ดที่ใช้ก็คือ
ตัวอย่าง
<font color=red>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
<font color=blue>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
<font color=green>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
หรือเราอาจจะใช้โค้ดสีที่เป็นตัวเลขแทนเช่น
<font color=#0000cc>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
<font color=#ffffcc>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
<font color=#00cc99>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ
2. การเปลี่ยนสีตัวหนังสือในแบบที่ 2 จะเป็นการเปลี่ยนสีตัวหนังสือทั้งหน้าเว็บพร้อมทั้งเปลี่ยน font ด้วยคะ ใช้โค้ดนี้ค่ะ
มาอธิบายตรงโค้ดสีแดงที่ละส่วนนะค่ะ
รูปแบบของฟอนต์ เป็นรูปแบบของฟอนต์ที่ใช้ในบล็อก อยากรู้ว่าเราใช้ฟอนต์อะไรได้ ก็ดูในเครื่องของเราค่ะ ว่ามีฟอนต์อะไรบ้าง
หมายเหตุ--*ในการที่เราใช้ฟอนต์แปลกๆ คนที่เข้าชมเว็บเราจะต้องมีฟอนต์นั้นด้วยนะค่ะ ถึงจะมองเห็นฟอนต์ที่เราใช้อยู่ได้ ถ้าไม่มีก็จะมองเห็นเป็นรูปแบบปกติหรือบางทีอาจจะแสดงผลเพี้ยนไปเลย เช่น ตัวหนังสือใหญ่เกินไปค่ะ
ขนาดของตัวหนังสือptจะต้องเป็น pt นะค่ะ เช่น 12pt, 14 pt
สีตัวหนังสือ เราจะใส่เป็นชื่อสีเลยก็ได้เช่น red, blue, yellow หรือ ถ้าเป็นโค้ดสีก็เช่น #9900cc, #000000, #ffffff
ข้อคิดเห็นของการเปลี่ยนสีตัวอักษรทั้งหน้าบล็อก เมื่อเพื่อนๆ ได้ทำการเปลี่ยนสีตัวหนังสือแล้ว จะพบว่า ยังมีสีตัวอักษรในส่วนที่เป็นลิ้งไม่ได้เปลี่ยนตาม ถ้าเราอยากจะได้สีของลิ้งเหมือนกับสีของตัวหนังสือในบล็อกเราจึงต้องใช้โค้ดอีกโค้ดสำหรับการเปลี่ยนสีลิ้ง
ให้เพื่อนๆ ดูความหมายของสีในส่วนของ hover visited และ Link ตามตัวหนังสือสีแดงเลยนะค่ะ ส่วนโค้ดที่เป็นตัวหนังสืแดงอีกอันหนึ่งที่เพื่อนๆ เห็นคือ position: relative;left: -2px โค้ดในส่วนนี้จะเป็นการกำหนดให้ลิ้งของเรายุบลงไปเมื่อเลื่อนเม้าไปวางเหนือลิ้ง ตรงส่วนนี้เพื่อนๆ จะแก้ไขตัวเลขเป็น -1,-2,-3 หรือถ้าไม่อยากจะให้ลิ้งยุบเลยก็กำหนดให้เป็น 0px ก็ได้ค่ะ
หวังว่าคงจะไม่ยากเกินไปนะค่ะ หากเพื่อนๆ ทำแล้วไม่เข้าใจหรือติดปัญหาอย่างไร ก็เม้นทิ้งไว้นะค่ะ
Create Date : 30 มิถุนายน 2552 |
|
27 comments |
Last Update : 30 มิถุนายน 2552 11:14:38 น. |
Counter : 2190 Pageviews. |
|
|
|
ใจดีจัง เอาโค๊ดมาลงให้ดูด้วย อิอิ
ขอบคุณมากๆนะคะ