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

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