บทความ CSS

วิธีทำ link หลายสีใน page เดียวกัน ด้วย CSS

การทำลิงค์หลายสีหลายแบบในหน้าเว็บเดียวกัน เมื่อก่อนผม งง มาก ทำได้อย่างไร แต่พอได้ศึกษาหัดเล่นไปเรื่อยๆก็พอเข้าใจบ้าง จริงๆสามารถเขียนได้หลายแบบ แต่ในตัวอย่างนี้ผมขอยกตัวอย่าง การเขียนแบบ class ใน css ขั้นตอน 1. สร้างไฟล์ style.css มานึ่งไฟล์ ขั้นตอน 2. เขียนตามรูปแบบ code นี้ ตั้งชื่อ class เป็น link2 ขั้นตอน 3. เรียกใช้งาน ให้เพิ่ม class=”link2″ เวลาสร้างลิงค์ link2 คือชื่อ class ของ css ที่เราเขียนไว้ code ใน {} ชุด1 กำหนดให้เมื่อแสดงลิงค์เฉยๆ code ใน {} ชุด2 กำหนดให้เมื่อเอาไปชี้ mouse over เพิ่มเติม text-decoration: none; // กำหนดให้มีเส้นใต้หรือไม [...]

ทำขอบโค้งมนด้วย css คำสั่ง -moz-border-radius

หรือ เขียนไว้ในไฟล์ style.css ก็ได้ เช่น เวลาเรียกใช้ เรียกแบบ class เช่น ผลลัพธ์ที่ได้ ข้อความตัวอย่าง ทำขอบโค้งมนด้วย css border: solid 1px #E5E5E5; คือ ขอบหนา 1px -moz-border-radius: 5px 5px 5px 5px; คือ ทำให้ขอบโค้งด้านละ 5px (นับหมุนตามเข็นนาฬิกา 12น. 3น. 6น. 9น.) เช่น 5px 5px 5px 5px background-color:#F4F4F4; คือ สีพื้นหลัง padding:10px; คือ พื้นที่ภายในนับจาก ขอบ(border) เข้ามา เช่น 10px ก็หมายความว่าห่างจาก ขอบ(border) เข้ามา 10px ลองนำไปใช้ดูครับ สามารถปรับเปี่ยนได้ตามต้องการ

วิธีทำขอบเส้นประ ด้วย CSS และ ทำเส้นประใต้บทความ

ตัวอย่างเส้นประ สร้างเส้นประด้วยชุดคำสั่ง CSS (Cascading Style Sheets) เป็นเทคนิคหนึ่งที่ช่วยเพิ่มความน่าสนใจให้ข้อความ การสร้างเส้นประด้วย css ก็ไม่ยาก code สั่นๆ ลองทำดูตามนี้ ให้สร้างกล่อง div มาหนึ่งกล่อง (สร้างในส่วนของ code น่ะ) เช่น div เราสามารถกำหนดรูปแบบ style ให้ข้อความได้ โดยใช่ คำสั่ง style รูปแบบของคำสั่ง style style=”” ในระหว่างเครื่องหมาย ” double quote หรือ ฟันหนู เราสามารถ ให้ใส่คำสั่งต่างๆ ได้ ในที่นี้เราต้องการทำเส้นประ ให้ใช้คำสั่ง border-bottom:; (border-bottom หรือ ขอบล้าง) ต่อไปให้กำหนดคุณสมบัติของขอบล้าง ต้องการทำเป็นเส้นประ ให้ใช้ dashed กำหนดให้ขอบหนา 1px เป็นสีเทา นั้นก็คือ dashed 1px [...]

Web Page Design
    เครือข่าย

    ติดต่อเรา

สงวนลิขสิทธิ์ © 2555 ดับเบิลยู พี ดีไซน์ (WPDSign) Web Page Design
ระบบขับเคลื่อนด้วย WordPress ธีมอนุญาติแบบเดียวกัน ห้ามทำซ้ำทั้งหมด หรือบางส่วน
Mediapartners-Google (Adsense) Gearch Engine เข้ามาเก็บข้อมูลล่าสุด เมื่อวันที่ 23 กุมภาพันธ์ 2555 เวลา 05.59 น.