Anchor Pseudo-classes

การใช้งานกับ Tag “a” เป็นแบ่งได้ 4 สถานะ คือ

a:link { color:#000000; }
a:hover {color:#ffffff; }
a:active { color:#333333; }
a:visited { color:#666666; }

เช่น
a:link { color:#000000; }
a:hover {color:#ffffff; }
a:active { color:#333333; }
a:visited { color:#666666; }

First Line Pseudo-element

การใช้งานกับ Tag “p” เป็นคำสั่งการใช้งานให้บรรทััดแรกของพารากราฟมีการแสดงผลอย่างไร

P:first-line {css }

เช่น p:first-line {font-weigth: blod;}

First Letter Pseudo-element

การใช้งานกับ Tag “p” เป็นคำสั่งการใช้งานให้ตัวแรกของพารากราฟมีการแสดงผลอย่างไร

P:first-letter { css }

เช่น P:first-letter {color: #666666;}

คอร์สเรียน XHTML และ CSS

WordPress-CSS Generated Classes

CSS กลุ่มนี้มีไว้ใช้เกี่ยวกับการจัดตำแหน่ง ( Alignment ) ของการ insert รูป ใน Wordpress ครับ

Font สามารถแบ่งเป็นออกได้เป็น 2 ประเภทใหญ่ๆด้วยกัน คือ

1. Sans-serif : เป็นลักษณะของตัวอักษรที่ไม่มีเส้นปิดหัวปิดท้าย
2. Serif : เป็นลักษณะของตัวอักษรที่ส้นปิดมีเส้นปิดหัวปิดท้าย

Font Family

ใช้กำหนดชนิดหรือประเภทของตัวอักษรบนเว็บครับ ซึ่งก็ขึ้นอยู่ที่เครื่องคอมของคุณแหละครับว่าจะมี font ที่กำหนดนี้ไว้หรือป่าว โดยทั่วไปจะเขียนกับไว้ว่าหาก Font-Family ที่อยู่ใน ” ” ไม่มี ให้เอาตัวหลังตัวอื่นมาแทนตามลำดับ

เช่น : font-family: “Lucida Grande”, Arial, Tahoma;
หมายความว่า หาก font “Lucida Grande” ในเครื่องไม่มี ให้เอา Arial มาแสดง แทน

font-style

ใช้กำหนดรูปแบบของตัวอักษรว่าจะเป็นอย่างไร normal ( ธรรมดา ) italic ( ตัวเอียง ) เป็นต้น เช่น font-style: italic;

font-variant

เป็น การแปลงตัวอักษรที่เป็นตัวพิมพ์เล็ก ให้กลายเป็นตัวพิมพ์ใหญ่ทั้งหมด โดยที่ขนาดยังคงเล็กเท่าตัวพิมพ์เล็ก
เช่น font-variant: smapp-caps;

font-weight

ใช้กำหนดขนาดความหนาของตัวอักษร เช่น font-weight: bold;

font-size

ใช้กำหนดขนาดของตัวอักษร เช่น font-size: 14px;

font

ใช้ กำหนดค่าของ property font แบบรวมทั้ง font-style, font-variant, font-weight, font-size, font-family ได้พร้อมกันตามลำดับ เช่น font: italic small-caps bold 14px Lucida Grande;

http://www.w3schools.com/css/css_font.asp

CSS3 มีการเพิ่มการทำขอบกล่องให้โค้งมน ซึ่งนอกจากเอาไปใช้กับกล่องทั่ว ๆ ไป ยังนิยมเอาไปใช้ในการทำลิงค์ให้น่าสนใจด้วย ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้ง ซึ่งหากยิ่งค่านี้เยอะยิ่งโค้งมาก

โค้ดจะออกมาประมาณนี้ครับ border-radius: …px;

อย่างไรก็ตาม เพื่อให้ browser ต่างๆแสดงผลได้อย่างได้อย่างถูกต้องจึงการเขียนโค็ดดังกล่าวเพื่อรองรับกับ browser โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox

นอกจากนั้น ยังสามารถกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย

สำหรับ -webkit-:

สำหรับ -moz-:

ซึ่งเรายังสามารถใส่สีให้กับกล่องโค้งมนของเราด้วยคำสั้ง background-color ได้ด้วยครับ

ตัวอย่างครับ

Box Shadow

หลักการทำงานของ Box Shadow ไม่ต่างจาก text-shadow เท่าไหร่ครับ แต่ความแตกต่างคือถ้าจะใช้ความสามารถนี้ เราต้องเขียน -webkit- กับ -moz- ทั้งสองอันด้วยครับ

โค้ดจะออกมาประมาณนี้ครับ box-shadow : (เงาในแกนตั้ง X) (เงาในแกนนอน Y) (ความเบลอ) (สีเงา);

ฟังก์ชั่นใหม่ที่เพิ่มเติมเข้ามา

RGBA

Code : background: rgba(R, G, B, A);

RGB เป็นหมวดสีที่ใช้กันในงานกราฟฟิกแต่เพิ่ม A เข้ามา ซึ่ง A นี้ก็คือ Alpha หรือก็คือ Transparency หรือ ค่าความโปร่งใส นั่นเองครับ โดยค่าของความโปร่งแสงมีช่วงอยู่ที่ 0 ถึง 1 ซึ่ง
0 คือ โปร่งใสจนมองไม่เห็นอะไรเลย
1 คือ เห็นปกติ ไม่มีความโปร่งใส
ซึ่งเราสามารถตั้งค่าความโปร่งใสเป็นจุดทศนิยมได้ครับ เช่น

background-color: rgba(255, 120, 100, .7);
color: rgba(255, 120, 100, .7);

ตัวอย่างครับ

ถ้าเห็นข้อความตัวนี้ใส ๆ แสดงว่า Browser ที่คุณใช้อยู่รองรับ CSS3 ครับ

ฟังก์ชั่น RGBA นี่สามารถใช้ได้ในทุกที่ที่ใช้ RGB ได้ครับ เช่น border, background, etc.

Text Shadow

การใส่เงาให้ตัวอักษร เป็นการเพิ่มเงาในแนวแกน x และ แกน y ให้กับข้อความของเรา

Code : text-shadow: (เงาในแกนตั้ง X) (เงาในแกนนอน Y) (ความเบลอ) (สีเงา);

เ่่ช่น text-shadow: 3px 3px 4px #999999;

ตัวอย่างครับ

ถ้าเห็นข้อความมีเงา แสดงว่า Browser ที่คุณใช้อยู่รองรับ CSS3 ครับ

แล้วอย่างนี้ควรใช้ Table เมื่อไหรดี

เราจะให้ table ก็ต่อเมื่อ เนื้อหาในเว็บไซน์มีการแสดงผลแบบเป็นแถว เป็นคอลัมน์ แบบเป็นตารางข้อมูล สถิติ คล้ายๆ เอกสารแบบ Excel การใช้ table ก็ยังสะดวกกว่าการใช้ div อย่างมาก

ตัวอย่างการเปรียบเทียบการการเขียนโครงสร้างแบบ Table Layout และ Tableless Layout

การเขียนโครงสร้างแบบ Table

<table width=”100%” >
<tr><td height=”86″>Banner + Logo</td></tr>
<tr><td height=”71″>Menu</td></tr>
<tr>
<td><table width=”100%”>
<tr>
<td height=”152″>Sidebar</td>
<td>Content</td>
</tr>
</table></td>
</tr>
</table>

การเขียนโครงสร้างแบบ Tableless

<div>
<div>Banner + logo</div>
<div>Menu</div>
<div>Sidebar</div>
<div>Content</div>
</div>

เริ่มจาก ยุคสมัยของ Table

ในช่วงนี้นั้น หลักการของ css ยังเป็นเรื่องแปลก ผู้คนยังไม่ค่อยจะรู้จักเท่าไหร่มากนัก การเขียนเว็บไซน์จึงใช้หลัก Table Layout คือ การเขียนโครงสร้างโดยใช้ table เป็นหลัก อยากได้อะไร ตรงไหน ก็สร้าง table ซ้อนทับขึ้นมาเรื่อยๆ หรืออาจกล่าวได้ว่า Table Layout นี้เป็นคำตอบเดียวที่จะสามารถจัดวางหน้าเว็บให้อยู่ถูกที่ ถูกทางตามที่ Designer ออกแบบมาให้ใกล้เคียงที่สุดและด้วยการช่วยเหลือของ Adobe Image Ready ด้วยแล้ว การตัดภาพออกมาก็ง่ายมากแค่กระดิกนิ้ว แถมยังบอกได้อีกว่า การสร้า้งเว็บสมัยนี้เป็นที่ชื่นชอบของเหล่า Designer เลยที่เดียว

เมื่อ Table ถูกลดความสำคัญลง

ความเปลี่ยนแปลงเริ่มเกิดขึ้น เมื่อ Google เข้ามามีบทบาทในกระแสของการทำเว็บไซน์ การเข้าถึงข้อมูลง่ายและรวดเร็ว เริ่มเป็นที่ติดปาก กระแส SEO หรือ Search engine optimization เริ่มเป็นที่ติดหู จะทำอย่างไรเพื่อที่จะทำเว็บให้ติดอันดับ “การค้นหาของ Google” ง่ายขึ้น วิธีการเขียนหน้าเว็บไซน์ จึงเริ่มเปลี่ยนไป ภาษา XHTML+CSS เริ่มถูกนำเข้ามาใช้ และ Table ถูกลดความสำคัญลงอย่างชัดเจน

ยุคสมัยของ CSS หรือ CSS2

แนวความคิดที่จะใช้โครงสร้าง Table ในการเขียนเว็บให้น้อยลง หลักการ Tableless Layout จึงเริ่มเข้ามา Tableless Layout คือ การใช้ table ให้น้อยลง แต่ไม่ใช่ว่าจะไม่ใช้เลย แต่ใช้เท่าที่จำเป็น ใช้ CSS เข้ามาเขียนโครงสร้างแทน Table แบบเดิมๆ ซึ่งการเขียนโครงส้รางแบบนี้ ทำให้บรรดา Search engine เช่น Google เข้าถึงข้อมูลได้ง่ายขึ้นและใช้เวลาโหลดหน้าเว็บรวดเร็วขึ้นด้วย

ยุคสมัยของ CSS ในอนาคต หรือ CSS3

ใน CSS2 นั้น จะใช้ Float ในการกำหนดโครงสร้างว่าจะอยู่ซ้ายหรือขวา แต่เจ้า CSS3 นั้นจะใช้หลักการของ ของ Selector ในการกำหนดโครงสร้างเข้ามาช่วย ซึ่งจะขอยกไปบทความถัดไปครับ

ปัจจุบันการทำเว็ปเริ่มเปลี่ยนรูปแบบไปจากเดิมมากเหมือนกันครับ โดยคนเริ่มหันมาเรียนทำเว็บด้วย CSS กันแล้ว แล้ว CSS คืออะไร?

CSS ย่อมาจาก Cascading Style Sheets เป็นคำสั่งช่วยแสดงผลของ HTML ครับ ซึ่งมันจะช่วยแก้ปัญหาหลายอย่างที่เดิมเว็ปไซต์ต้องประสบ ไม่ว่าจะเป็นเรื่อง FONT เอย, เรื่องหน้าเอย ซึ่ง CSS จะช่วยแก้ปัญหาเหล่านี้ได้ครับ สำหรับข้อดีของการใช้ CSS แทนการทำเว็ปด้วยระบบเก่าๆ ผมได้น้ำบทความจากเว็บ Ic-seo.com มาให้อ่านกันครับ  เขียนได้สั้น กระชับ และเข้าใจง่ายดีครับ

——————————————————————-

ข้อดีของการใช้ CSS

1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว

2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว และที่สำคัญ Google track keyword ได้เร็วกว่า Html  แบบ  table  มากๆ

3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร

4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser

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

6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี

บทความโดย : Ic-seo.com

การเขียนเว็บด้วย CSS จึงเป็นทางออกหนึ่งที่ดีครับ นอกจากจะแก้ไขง่าย, load เร็ว แล้วก็ยังสามารถแก้ปัญหาการแสดงผลบน browser ต่างๆได้ดีอีกด้วย แต่ก่อนที่เราจะเริ่มเขียน file CSS เราควรจะใส่ค่า เพื่อทำการ Reset file CSS ให้ทุก browser อ่านค่าเหมือนกัน อาจาร์ยเม่นได้ทำ Code reset CSS มาให้พวกเราใช้กัน จากการเรียน Course web development ของพวกเราอย่าลิม reset CSS ทุกครั้งก่อนสร้าง web นะครับ

/* CSS RESET */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; outline: 0; font-size: 100%; font-family: Thonburi, “Lucida Grande”, Arial, Tahoma, Sans-Serif; vertical-align: baseline;}
:focus {outline: 0;}
body {line-height: 1; color: black; background: white; margin: 0; padding: 0}
ol, ul {list-style: none;}
table {border-collapse: separate;}

caption, th, td {font-weight: normal;}
blockquote:before, blockquote:after,
q:before, q:after {content: “”;}
blockquote, q {quotes: “” “”;}
body,p,td,th,ul,li{ color: #000; font-family: “Lucida Grande”, Arial, Tahoma; font-size: 12px; line-height: 15px; margin: 0; padding: 0 }
.clearspace {clear:both; height:0px; padding:0px; margin:0px; width:0px;}
a { color: #888888; text-decoration: none; }
a:hover { color: #333; }
a:active { color: #333; }

img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }

ขอบคุณ ครูเม่นจาก imenn.com ครับ