สร้าง Link ด้วย CSS

เว็บที่ใช้แสดงผล http://www.kroovit.com/  ครูวิทย์สอนวิทยาศาสตร์

      ก่อนอื่นก็งูๆ ปลา ๆ เขียน CSS ไปลองผิดลองถุกไปเรื่อย พอเห็นว่าสวยดูดี ก็เอาเลย บ้างอันก็ Copy มาน่ะ แล้วมาเปลี่ยนแปลง ให้เป็นแนวของเรา งงอยู่เหมือนกัน ภาษาแต่ละภาษานี่แหละ ทำให้งง แต่ก้ได้ศึกษาเนื้อหาเบื้องต้นมาแล้วน่ะ ก็เนื้อหาก่อน ๆ หน้านี้ที่โพสไปล่ะครับ 

      แต่ว่าวันที่ก็เอา โค้ดที่ตัวเองเขียนมาเพื่อมาเผยแพร่เป็นวิทยาทานให้แก่ชาวโปรแกรมเมอร์ เว็บโปรแกรมเมอร์ทั้งหลาย ท่านที่ชำนาญก็สามารถติชมผมมาได้นะครับ ที่เมล์ผมเลย อิอิ ไม่อยากให้ติชมในนี้ ประจานความโง่เขลาของผมเอง 555 ส่วนเว็บโปรแกรมเมอร์มือใหม่ ก็สามารถ คัดลอก โค้ดไปศึกษาเนื้อหาได้เลยนะครับ ไม่หวงห้าม อีกอย่าง ถ้าต้องการดูตัวอย่างให้ไปดูได้ที่เว็บ ครูวิทย์สอนวิทยาศาสตร์ นะครับ หน้าแรกเลย ตัวอย่างเป็นอย่างนั้น ๆ แหละ ครับ  

    โปรแกรมมเมอร์สามารถปรับเปลี่ยนเนื้อหาสามารถคลิกไปคลิกมาได้นะครับ ลองดูละกัน ครับ 

ผมเอาโค้ดเค้ามาก้ลองเปลี่ยนค่าดู และ ลอง แสดงผลตัวอย่างดูเอา เปลี่ยนค่าไปเรื่อย ๆ หลาย ๆ ตัว จนได้เว็บเพจมาได้อย่างพอใจ เลยได้อย่างที่เห็ฯในเว็บตัวอย่างนี่แหละครับ 

Code CSS 

ที่ผมเขียนตอนนั้นผมเขียนโดยใช้ โปรแกรมดรีมเอเวอร์ 8  แต่ตอนนี้มาแก้ไขด้วยเวอร์ชั้น CS6 ก็ไม่ต้องกลัวอะไรนะครับ เพราะใช้ได้เหมือนกัน แล้วก็ไฟล์ที่ทำสำเร็จก็ไม่เปลี่ยนแปลงอะไร 

เอาแหละ ร่ำเพ่อ พรรณนามามากพอสมควรแล้ว เอาโค้ดไปดุกันเลยนะครับ 

#tables a {

display: block;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

margin: 0px;

padding: 0px;

font-size: 12pt;

text-decoration: none;

}

#tables a:hover{

padding: 20px;

list-style-position: outside;

color: #009;

text-align: center;

font-size: 12pt;

text-decoration: blink;

font-weight: bold;

background-color: #9F9;

letter-spacing: normal;

word-spacing: normal;

border-top-style: groove;

border-right-style: groove;

border-bottom-style: groove;

border-left-style: groove;

 

}

ตัวอย่างที่เว็บ ครูวิทย์สอนวิทยาศาสตร์  ครับ

ประวัติของ CSS

จะเล่าเอาโดยสำคัญเท่านั้น จะได้ไม่เรื้อรังครับ

ประวัติของ CSS

         CSS เริ่มต้นมาตั้งแต่ปี พ.ศ. 2513 แต่อย่างไรก็ดีการแสดงผลของ CSS นั้นขึ้นอยู่กับคนเขียนเว็บ, web browser ที่ตอนนั้นคนรู้จักยังน้อย คนใช้น้อย และยังยากทำให้ไม่ได้รับความชื่นชอบเท่าไร

        แล้วก็ผ่านการพัฒนามาอย่างต่อเนื่องหลากหลายแบบ หลายวิธีการทำ และใช้งาน และแสดงผล จนกระทั่ง  2539 CSS ก็ถูกประกาศใช้อย่างเป็นทางการ โดย CSS1 เสร็จในธันวาคมปีนั้นเอง

          จากนั้น ก็ได้ตามล่าการใช้งาน CSS1 มาระยะนึงแล้วพัฒนาแก้ไขกันจนกระทั่งได้สร้างออกมาเป็น CSS2 ในวันที่ 4 พฤศจิกายน  2540 และถูกเผยแพร่ โดย W3C เมื่อ 12 พฤษภาคม 2541 นั่นเอง โดย CSS3 ก็เริ่มพัฒนาในปี  2541 และก็ยังพัฒนากันจนถึงปี 2552

         ในปี  2548 กลุ่มที่ดูแล CSS ได้ทำการปรับปรุง CSS ให้มีหลักเกณฑ์ที่เจาะจงมากขึ้น ดังนั้นเลยทำให้ กฏเกณฑ์ที่ประกาศไปแล้วก็คือ CSS 2.1 และ CSS 3 Selector และ CSS 3 Text ถูกเปลี่ยนจาก Candidate Recommendation กลับไปเป็น Working Draft อีกครั้งหนึ่ง


CSS 1

CSS level 1 ที่ประกาศออกมาตั้งแต่ ธันวาคม  2539 นั้นรองรับดังนี้

1. Font property เช่นประเภทของ font และ ตัวเอียง สีของ ตัวหนังสือ, พื้น,และส่วนอื่นๆ
2. การแสดงผลของส่วนต่างๆ เช่นพวกช่องว่าง ของข้อความ ตัวหนังสือ บรรทัด
3. การจัดเรียงของย่อหน้า เช่นชิดซ้าย ขวา , รูปภาพ ตาราง และส่วนอื่นๆ
4. การเว้นระยะ, เส้นขอบ, เว้นย่อหน้า, และการจัดตำแหน่งของ element

ปัจจุบัน W3C ไม่มีการปรับปรุงมาตรฐานใด ๆ ของ CSS1

CSS 2

       CSS level 2 ประกาศใช้เมื่อ  2541 โดยมีการรวมเข้ามาจาก CSS 1 และเพิ่มใหม่อีกหลายอย่าง เช่น absolute, relative และ fixed ตำแหน่งของ element รวมไปถึง z-index การรองรับ bidirectional text รวมทั้งค่า property ใหม่ของตัวหนังสือเช่น shadows
      CSS level 2 revision 1 หรือ CSS 2.1 ได้แก้ error ต่างๆใน CSS2 โดยลบลูกเล่นต่างๆที่ไม่จำเป็น รวมทั้งปรับข้อกำหนดของมาตรฐาน web browser ใหม่ โดยประกาศใช้จริงอย่างเป็นทางการเมื่อ กรกฎาคม 2550

CSS 3

            CSS level 3 ปัจจุบันยังอยู่ระหว่างการพัฒนา ตั้งแต่ 15 ธันวาคม  2548 โดยมีหลายส่วนก็เริ่มเอามาใช้จริงบ้างแล้ว
            สรุป เทคโนโลยีที่กำลังมาก็คือ CSS3 แต่ก็ยังไม่เหมาะเอามาทำงาน production   เพราะว่าหลาย browser ยังใช้งานได้ไม่เต็มขนาดเป็นเพราะว่า มาตรฐานที่ยังไม่หยุดนิ่งเองด้วยส่วนหนึ่ง ดังนั้น ช่วงปีนี้ ให้ศึกษา CSS 2 (รวมถึง 2.1) ให้เก่งก่อนจะดีกว่า เพราะว่าถึงเป็น CSS 3 แต่การเขียนก็เหมือนเดิมเกือบทั้งหมดครับ
           
        สรุป การใช้งาน ตอนนี้เราจะใช้งานที่ CSS 2.1 กันอยู่ ส่วนคนที่ใช้ CSS 3 ก็มีบ้างแล้วเช่นกัน แต่ต้องเป็นพวกไม่แคร์สื่อ (web browser) ก็คือไม่สนใจว่าใครจะได้หน้าตาไม่เหมือนตามที่ตั้งใจไว้ ฉันจะใช้ ประมาณนั้น แต่อย่างไรก็ดีหลายส่วนก็เอามาใช้จริง ๆ ได้แล้วครับ แต่กลุ่มที่จะประสบปัญหาดูแล้วได้หน้าตาไม่เหมือนที่อื่นก็คือ internet explorer เลยครับ ต้องรอ internet explorer 9 ล่ะครับ