การเขียนบล็อก 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 |
Last Update : 30 มิถุนายน 2552 11:14:38 น. |
|
27 comments
|
Counter : 2180 Pageviews. |
|
|
|
โดย: CoffeeBake วันที่: 30 มิถุนายน 2552 เวลา:10:29:20 น. |
|
|
|
โดย: CoffeeBake วันที่: 30 มิถุนายน 2552 เวลา:10:30:46 น. |
|
|
|
โดย: พรหมญาณี วันที่: 30 มิถุนายน 2552 เวลา:12:19:24 น. |
|
|
|
โดย: numvug วันที่: 30 มิถุนายน 2552 เวลา:12:24:31 น. |
|
|
|
โดย: พรหมญาณี วันที่: 30 มิถุนายน 2552 เวลา:12:25:45 น. |
|
|
|
โดย: maew_kk วันที่: 30 มิถุนายน 2552 เวลา:12:37:04 น. |
|
|
|
โดย: kobnon วันที่: 30 มิถุนายน 2552 เวลา:13:10:02 น. |
|
|
|
โดย: หนึ่งคิด วันที่: 30 มิถุนายน 2552 เวลา:14:40:30 น. |
|
|
|
โดย: Elbereth วันที่: 30 มิถุนายน 2552 เวลา:15:47:10 น. |
|
|
|
โดย: Mermaid AI วันที่: 30 มิถุนายน 2552 เวลา:16:19:44 น. |
|
|
|
โดย: หน่อย (noi&poj ) วันที่: 30 มิถุนายน 2552 เวลา:17:22:36 น. |
|
|
|
โดย: แม่ปุ้มปุ้ย วันที่: 30 มิถุนายน 2552 เวลา:19:19:39 น. |
|
|
|
โดย: ชวนชมนะ วันที่: 11 กรกฎาคม 2552 เวลา:9:40:49 น. |
|
|
|
โดย: LeaDGlasS วันที่: 15 กรกฎาคม 2552 เวลา:16:39:08 น. |
|
|
|
โดย: culcita วันที่: 25 กรกฎาคม 2552 เวลา:17:20:14 น. |
|
|
|
โดย: Gin-GaL วันที่: 14 กุมภาพันธ์ 2553 เวลา:23:32:59 น. |
|
|
|
โดย: athee_p วันที่: 27 กุมภาพันธ์ 2553 เวลา:16:24:36 น. |
|
|
|
โดย: peenuy (nuyect ) วันที่: 20 มีนาคม 2553 เวลา:14:14:59 น. |
|
|
|
โดย: renting วันที่: 22 กรกฎาคม 2553 เวลา:14:29:43 น. |
|
|
|
โดย: ป้าณู วันที่: 15 ตุลาคม 2553 เวลา:3:25:26 น. |
|
|
|
โดย: dada_aeiou วันที่: 20 พฤษภาคม 2554 เวลา:2:29:28 น. |
|
|
|
โดย: Ozabew วันที่: 7 มิถุนายน 2554 เวลา:16:30:35 น. |
|
|
|
|
|
|
/--โค้ด BG-->
/--ลบกรอบ-->
/--นับคอมเม้น>
/รูปกล่องคอมเม้น>
/--เปลี่ยนรูป Bullet>
/--เปลี่ยน submit and reset>
/--Emotion>
| | | |
| | | | |
|
|
|
|
| 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | |
|
|
|
|
|
|
|
|
|
|
ใจดีจัง เอาโค๊ดมาลงให้ดูด้วย อิอิ
ขอบคุณมากๆนะคะ