แปลความหมายเพลง Olivia Ong – The Girl From Ipanema

20/05/2014

แปลความหมายเพลง Olivia Ong – Back to Life

24/05/2014

พื้นฐาน CSS Properties – Lists And Links

22/05/2014
empty image
empty image

Lists and Link

List

 List หรือรายการเป็นอีก element ที่นิยมใช้กันมาก ส่วนใหญ่จะเกี่ยวกับการทำ css menu หรือ Navigation (ลิ้งนำทาง) ซึ่งจะใช้ Tag <ul>, <ol>, <li>, ซึ่งถ้าเราไม่กำหนดอะไร มันก็แสดงผลเป็นค่าปกติของมัน แต่ถ้าเราอยากเปลี่ยนรูปแบบการแดสงผลล่ะ ก็ต้องใช้ CSS เข้ามาช่วย

      การแสดงผลเมื่อไม่ได้กำหนดอะไร

โค้ด

    <ul>
    <li>หน้าหลัก</li>
    <li>สินค้า</li>
    <li>วิธีการสั่งซื้อสินค้า</li>
    <li>วิธีการชำระเงิน</li>
    <li>ติดต่อเรา</li>
    </ul>

จะเห็นว่ามันก็ธรรมดาๆ อ่ะ ถ้าเราจะปรับแต่งได้มั้ย อ่าได้ ก็ต้องใช้ความสามารถของ CSS
Property ที่ใช้ในการจัดรูปแบบของ list ก็คือ
list-style-type เป็นรูปสัญลักษณ์ที่อยู่หน้ารายการ ประกอบด้วย

disc วงกลมทึบ เป็นค่าปกติ
armenian
circle
cjk-ideographic
decimal
decimal-leading-zero
georgian
hebrew
hiragana
hiragana-iroha
katakana
katakana-iroha
lower-alpha
lower-greek
lower-latin
lower-roman
square

upper-alpha
upper-latin
upper-roman
none คือไม่ใส่สัญลักษณ์

list-style-image กำหนดที่อยู่รูปภาพที่จะใช้เป็นสัญญลักษณ์ วิธีใช้ก็ง่ายๆ ใส่แค่ url(ที่อยู่ของภาพ)
ตัวอย่าง
list-style-image: url(images/zzz14.png);

list-style-position กำหนดตำแหน่งของสัญลักษณ์ มี 2 ค่าคือ inside, outside โดยค่าปกติคือ outside
ความแตกต่าง outside ก็คือรายการที่อยู่ทางฝั่งซ้าย ส่วน inside ก็คือรายการที่เยื้องเข้าไปข้างใน


list-style ซึ่งเป็นรูปแบบย่อ โดยมีลักษณะการเขียนดังนี้
list-style: type position image;
list-style: none inside url(images/zzz14.png);

Link 

         Link ก็คือลิ้งหรือการเชื่อมโยงไปยังที่อยู่เว็บต่างๆ ซึ่งทุกเว็บไซต์ต้องมีแน่นอน การแสดงผลของลิ้งที่เป็นค่าปกติ

<ul>
<li><a href="#">หน้าหลัก</a></li>
<li><a href="#">สินค้า</a></li>
<li ><a href="#">วิธีการสั่งซื้อสินค้า</a></li>
<li ><a href="#">วิธีการชำระเงิน</a></li>
<li><a href="#">ติดต่อเรา</a></li>
</ul>


จากตัวอย่าง ข้อความที่เป็นลิ้งจะมีสีฟ้า มีเส้นใต้ และลิ้งที่ถูกคลิกจะเปลี่ยนเป็นสีม่วง ถ้าเราไม่ต้องการแบบนี้ล่ะ อยากจะเปลี่ยนในรูปแบบที่เราต้องการ ก็เลยต้องใช้ CSS เข้ามาช่วย
ก่อนอื่นมาดู selector ซึ่งเป็น Pseudo Classes ที่ต้องใช้
a กำหนดรูปแบบของ Tag <a>
a:link คือกำหนดรูปแบบของลิ้ง ที่ยังไม่ถูกกด
a:visited กำหนดรูปแบบของลิ้งที่ถูกกดแล้ว เยี่ยมชมแล้ว
a:hover กำหนดรูปแบบของลิ้งเมื่อเมาส์วางบนลิ้ง
a:active กำหนดรูปแบบของลิ้งเมื่อลิ่งถูกกด
a:focus กำหนดรูปแบบของลิ้งเมื่อถูกโฟกัสโดยคีย์บอร์ด (ส่วนใหญ่มักจะไม่กำหนดตรงนี้)
และมี property อีกหลายๆ ตัวที่นิยมใช้ เช่น
color กำหนดสีข้อความ
background-color สีพื้นหลังง
text-decoration การขีดฆ่า
cursor เคอร์เซอร์เมาส์ โดยปกติจะเป็นรูปมือ ซึ่งจริงๆ แล้วมีหลายรูปแบบ แต่ไม่ค่อยนิยมใช้กัน ใช้แต่รูปมือนี่แหละ หรือไม่ก็ใช้รูปที่กำหนดเอง

หลักๆ ก็มีแค่นี้แหละ มันเป็นเหมือนเหตุการณ์ที่เราต้องรู และเราจะแก้ไขว่าเหตุการณ์เหล่านั้น จะให้มีรูปแบบอย่างไรดี อันนี้ก็แล้วแต่
ตัวอย่าง

a:link{text-decoration: none; color:#090;} /*ให้อักษรเป็นสีเขียว และไม่มีเส้นใต้*/
a:visited {color:#06F;} /*เมื่อกดลิ้งให้เปลี่ยนเป็นสีน้ำเงิน*/
a:hover {font-weight: bold;} /*เมื่อชี้ลิ้งให้เป็นตัวหนา*/
a:active {color:red;} /*เมื่อคลิกลิ้งให้เป็นสีแดง*/


จริงๆ แล้วสามารถปรับรูปแบบได้อีกมากมาย ซึ่งสามารถเอามาทำเป็น CSS Menu ได้โดยใช้ความรู้เรื่อง List และ Link เดี๋ยวไว้ค่อยลองทำ…

วันนี้นอนดีกว่า…ต้อนรับรัฐประหาร…Happy Coup d’etat Day… เน็ตจะตัดแล้วด้วย Y^Y …Zzz