Category: CSS HTML

เนื้อหาเกี่ยวกับ CSS และ HTML

[CSS3] Pseudo-Classes

ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-Classes</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="post">
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
</div>
</body>
</html>
[/html]

Pseudo-Classes :root

สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น

[css]
:root {background:pink;}
[/css]

เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

:root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู

Pseudo-Classes :nth-child(n)

สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า

[css]
#post :nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ออกมาก็จะเป็น

แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน

[css]
#post h3:nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว

อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด

ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า

[css]
#post h3:nth-child(7) {font-size:30px;color:green;}
[/css]

คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย

ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)

Pseudo-Classes :nth-of-type(n)

สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ

[css]
#post :nth-of-type(3) {font-size:30px;color:green;}
[/css]

เราก็จะได้ผลลัพธ์ออกมาเป็น

จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element

คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)

[css]
#post h3:nth-of-type(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ก็จะเป็น

ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ

March 10, 2012
[CSS3] Attribute Selectors

ใน CSS2 นั้นก็มีตัว Attribute Selectors ให้เราใช้งานอยู่แล้ว ส่วนใน CSS3 นั้นได้เพิ่มเติม Attribute Selectors เข้ามาอีก 3 แบบ ได้แก่

[css]
E[foo^="bar"] // E element ที่ค่า attribute "foo" มีค่าเริ่มต้นด้วย "bar"
E[foo$="bar"] // E element ที่ค่า attribute "foo" มีค่าปิดท้ายด้วย "bar"
E[foo*="bar"] // E element ที่ค่า attribute "foo" มีค่า "bar" อยู่
[/css]

ตัวอย่างการใช้งานนะครับ อย่างเช่น

[css]
img[src$=".png"] { border:5px solid red; }
a[href*="google"] {padding-left:20px;background:url(images/google.png) no-repeat left top; }
[/css]

ตัวอย่างแรกคือ ให้ดูว่ารูปภาพของเราเป็นนามสกุลอะไร ถ้าเป็น png เมื่อไหร่ ให้ตีกรอบรูปด้วยความหนา 5px เป็นเส้นทึบสีแดง

ตัวอย่างที่สองคือ ถ้าเมื่อไหร่ลิงก์ของเรามีคำว่า google อยู่ภายใน attribute “href” ก็ให้ดึงรูปมาโชว์เป็นเหมือน icon ทางด้านซ้ายของคำ

หลักการใช้งานตัว Attribute Selectors คร่าว ๆ ก็ประมาณนี้ครับ

March 2, 2012
[HTML CSS] บางอย่างที่เราอาจจะยังไม่รู้

วันนี้ไปเปิดเจอ Slide ของคุณ Chris Coyier เจ้าของเว็บ CSS-Tricks ได้พูดไว้ในหัวข้อ What We Don’t Know เลยเอามาแชร์ให้ได้อ่าน ได้ดูกันนะครับ >_<

ตามไปอ่านบทความเต็ม ๆ ได้ที่ My Slides from InControl 2012: What We Don’t Know

February 25, 2012
[HTML5 CSS3] Modernizr JavaScript Library สำหรับทำเว็บ HTML5 CSS3

คงน่าเสียดายที่เว็บ HTML5 CSS3 ที่เราทำมามันจะถูกจำกัดให้ Browser เก่า ๆ แสดงผลได้ไม่เหมือนกับที่เราต้องการ ดังนั้นจึงมีตัวช่วยอย่าง Modernizr ออกมา

โดย 1 ในความสามารถของ Modernizr ซึ่งเป็น Javascript Library นั้นจะช่วยเช็คว่า Browser ที่ทำงานอยู่สนับสนุนการทำงานของ HTML5 CSS3 อย่างไรบ้าง เราจะใช้งานในลักษณะแบบนี้

[html]
<script src="js/modernizr.min.js"></script>
[/html]

และกำหนดที่ html ให้มี class เป็นแบบนี้

[html]
<html class="no-js">
[/html]

และเมื่อตัว Modernizr ทำงาน class ของ html ก็จะเปลี่ยนไปเป็นลักษณะแบบนี้ครับ

[html]
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
[/html]

จะเห็นว่า class ที่เปลี่ยนไปนั้น จะบอกถึงคุณสมบัติต่าง ๆ ที่ Browser ตัวนี้สนับสนุน เพื่อที่เราจะได้นำ class เหล่านี้ไปประยุกต์ให้ Browser เก่า ๆ สามารถแสดงผลได้ใกล้เคียงกับที่ Browser รุ่นใหม่ ๆ แสดงผลได้มากที่สุด

รวมเรายังสามารถกำหนดการใช้งานเฉพาะส่วนที่เราต้องการก็ได้ ในรูปแบบนี้ครับ

โดย Modernizr สนับสนุนการทำงานกับ IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome.
บน mobile Modernizr ใช้ได้กับ iOS mobile Safari, Android’s WebKit browser, Opera Mobile, Firefox Mobile และกำลังพัฒนาเพื่อให้สนับสนุน Blackberry 6+

ลองไปศึกษาเพิ่มเติมที่เว็บ : Modernizr เลยครับ

December 26, 2011
[HTML5] HTML5 Boilerplate

สำหรับ HTML5 Boilerplate นั้นเปิดตัวในวันที่ 10 สิงหาคม ตอนนี้ก็ถูกพัฒนามาปีกว่าแล้ว

เป็น Template สำหรับทำเว็บ HTML5 ที่มันสนับสนุนไปจนถึง IE6 เลย สาเหตุที่ HTML5 Boilerplate สามารถสนับสนุน IE เวอร์ชั่นเก่า ๆ ได้นั้น ก็เพราะว่ามันจะใช้ Chrome Frame ในการเรนเดอร์ HTML5 ทำให้ IE เวอร์ชั่นเก่า ๆ สามารถใช้งาน HTML5 ได้ ลองดูวิดีโอที่เกี่ยวกับ Template ตัวนี้กันนะครับ

Getting Started with HTML5 Boilerplate

https://www.youtube.com/watch?v=NMEB78VX2P0&hd=1

The Build Script of HTML5 Boilerplate: An Introduction

HTML5 Boilerplate Walkthrough

Paul Irish on HTML5 Boilerplate

ลองศึกษาดูนะครับ ผมว่าเป็น Template สำหรับ HTML5 ที่เจ๋งมากเลยละครับ ไปดาวน์โหลดมาลองใช้งานดูที่เว็บของ HTML5 Boilerplate เลยครับ

Website : HTML5 ★ Boilerplate

December 22, 2011
[CSS] คำสั่งทั่วไปที่ใช้จัดการฟอนต์
หลังจากที่ทำความรู้จักกับคำสั่งที่ใช้จัดการข้อความแล้ว เรามาทำความรู้จักกับคำสั่งที่ใช้จัดการกับตัวอักษรกันนะครับ

CSS : font-family

font-family นั้นใช้สำหรับกำหนดฟอนต์ของตัวอักษร ซึ่งตระกูลฟอนต์ที่เหมาะกับการใช้งานสำหรับเว็บไซต์นั้น ให้ดูที่ Web Safe Font Combinations ตัวอย่างในการใช้ font-family นั้นเป็นแบบนี้ครับ
```
font-family: 'Times New Roman', Times, serif;
```
font-family : “Times New Roman”, Times, serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Georgia, serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Arial, Helvetica, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : Impact, Charcoal, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : “Trebuchet MS”, Helvetica, sans-serif
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.
font-family : “Lucida Console”, Monaco, monospace
Tart bear claw cake. Halvah danish bear claw tootsie roll gummies. Sugar plum lollipop fruitcake lollipop cupcake pudding bear claw. Gingerbread sweet roll danish. Marzipan donut powder danish cheesecake bonbon. Danish cheesecake macaroon marzipan jujubes dessert.

ลองเลือก font-family ที่ถูกใจแล้วนำไปใช้ดูนะครับ

CSS : font-size

font-size เป็นการกำหนดขนาดของตัวอักษร
```
font-size: 16px;
```
อย่างเช่น

ตัวอย่างข้อความ font-size: 10px

ตัวอย่างข้อความ font-size: 20px

ตัวอย่างข้อความ font-size: 30px

ตัวอย่างข้อความ font-size: 1em

ตัวอย่างข้อความ font-size: 2em

ตัวอย่างข้อความ font-size: 1rem

ตัวอย่างข้อความ font-size: 2rem

CSS : font-style

font-style กำหนดลักษณะของตัวอักษร จะเป็นตัวธรรมดา หรือว่าตัวเอียง
- normal : ตัวธรรมดา
- italic : ตัวเอียง
```
font-style: italic;
```
ตัวอย่างข้อความ font-style: normal
ตัวอย่างข้อความ font-style: italic

CSS : font-variant

font-variant ทำให้ตัวอักษรที่เป็นตัวพิมพ์เล็ก กลายเป็นตัวพิมพ์ใหญ่ที่มีขนาดเล็ก
```
font-variant : small-caps;
```
ตัวอย่างนะครับ

font-variant: normal
font-variant: small-caps

CSS : font-weight

font-weight เป็นคำสั่งที่กำหนดความหนาของตัวอักษร ส่วนมากจะใช้อยู่แค่ normal และ bold
```
font-weight: bold;
```
ดูตัวอย่างนะครับ

ตัวอย่างข้อความ font-weight: normal
ตัวอย่างข้อความ font-weight: bold

Edited : 18/02/2022

สำหรับในปัจจุบัน จะเห็นว่าตัวอักษรนั้น มีน้ำหนักที่ใช้สำหรับเว็บไซต์หลากหลายมากขึ้น ดังนั้นค่าที่ใช้งาน ปัจจุบันความนิยมการใช้งานไม่ได้มีแค่ normal และ bold อีกแล้ว โดยน้ำหนักของตัวอักษร หรือความหนาของตัวอักษรนั้น ถ้าเป็นค่าตัวเลข จะมีค่าอยู่ระหว่าง 100 – 900

ค่าที่เราสามารถใช้กับ font-weight ได้นั้น มีดังนี้
```
font-weight: normal;
font-weight: bold;

/* ตัวเลขระบุน้ำหนักของตัวอักษร */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; // สำหรับ normal จะมีค่าน้ำหนักอยู่ที่ 400
font-weight: 500;
font-weight: 600;
font-weight: 700; // สำหรับ bold จะมีค่าน้ำหนักอยู่ที่ 700
font-weight: 800;
font-weight: 900;
```
December 19, 2011