CSS3 ฉบับล้วงลึก ตอนที่ #1/2

จากบทความที่แล้วเราพูดถึง HTML5 ซึ่งเป็นไปไม่ได้ที่จะไม่พูดถึง CSS3 ที่ต้องใช้งานร่วมกัน เพื่อให้ได้การแสดงผลที่สวยงาม และตอบสนองการใช้งานของผู้ใช้ได้อย่างเหมาะสม ซึ่ง Cascade Style Sheet ในรุ่นที่ 3 มาพร้อมกับความสามารถใหม่ๆ เช่น การฝังฟอนต์, การทำ media query, การทำเอนิเมชัน และคุณสมบัติอื่นๆที่ช่วยลดงาน Graphic  ที่ต้องทำบน PhotoShop ไปได้เยอะมาก

 

พื้นฐานการใช้ CSS

การใช้งาน CSS สามารถใช้ร่วมกับ HTML ได้ 3 วิธีใหญ่ๆ ดังนี้

  1. ใช้ฝังไปกับ attribute style ของ HTML
    <h1 style="color:red; font-size:20px;"> Inline Style </h1>
    

    ข้อดี:    กำหนดได้ง่าย และเซ็ตติดตลอด
    ข้อเสีย: นำไปใช้ที่อื่นไม่ได้  ไม่สามารถเขียนทับด้วยวิธีอื่น

  2. ใช้แทรก Tag <style> … </style> ในส่วนหัวของเอกสาร HTML (ภายใต้ <head>…</head> นั่นเอง)
    <head>
          <style>
                 h1{
                     color: red;
                      font-size: 20px;
                 }
          </style>
     </head>
    

    ข้อดี:     สามารถใช้งานคุมได้ทั้งเอกสาร
    ข้อเสีย: นำไปใช้กับเอกสาร HTML หน้าอื่นไม่ได้

  3. แยกเก็บในไฟล์ .css และลิงค์เข้ามา
    /*  ----- default.css ----- */
     h1{
                color: red;
                 font-size: 20px;
     }
    <!--    index.html  -->
     <html>
         <head>
                <link href="app/default.css" rel="stylesheet"  
                      type="text/css"/>
         </head>
         <body>
                 <h1> Hello Link Style Sheet</h>
         </body>
     </html>

    ข้อดี:     สามารถนำ .cssไปใช้ได้กับหลายเอกสาร
    ข้อเสีย: ต้องระวังเรื่อง path และการบริหาร version

นอกจากนั้นยังสามารถใช้ @import เพื่อช่วยในการแยกจัดเก็บและรวบรวม กรณีที่เราต้องการแยก .css เป็นหลายๆไฟล์ตามลักษณะการทำงานได้อีกด้วย

@import url('/css/typography.css'); 
@import url('/css/layout.css'); 
@import url('/css/color.css'); 

/* All three CSS files above will be loaded from this single document. */

blog04-02

Selector แบบต่างๆ

หัวใจหลักของการใช้ CSS คือการเลือก Element หรือ Tag ใน HTML ให้ได้ดังใจ แล้วค่อยทำการปรับเปลี่ยนลักษณะการแสดงผล (property) ตามที่เราต้องการ โดยเราสามารถเลือก Element หรือ กลุ่มของ Element ใดๆ ได้หลายวิธีดังนี้

/* ---- รูปแบบของ Selector ---- */
selector { property: value; }

selector --> สิ่งที่เราเลือก
property --> คุณสมบัติที่ต้องการเซ็ต เช่น สี, กรอบ, พื้นหลัง, ขนาด
value    --> ค่า เช่น 12px, #00ff00, "Time News"
  1. HTML Selector ใช้เลือก Element หรือ Tag ของ HTML ใช้ชื่อของ Element ในการเลือก
    /* ---- CSS ---- */
    h1 { color: red; }
    
    <!--   HTML   -->
    <h1>...</h1>
  2. Class Selector ใช้เลือก Element แบบกลุ่มที่มีการกำหนด class=”…” ตัวเดียวกันใช้ “.” ในการเลือก
    /* ---- CSS ---- */
    .myClass { font: bold 1.25em  times; }
    
    <!--   HTML   -->
    <h1 class="myClass">...</h1>
  3. ID Selector ใช้เลือก Element ตัวเดียวที่มี id ตรงกับสิ่งที่เลือก ใช้ “#” ในการเลือก
    /* ---- CSS ---- */
    #myObject1 { position: absolute; top: '10px; }
    
    <!--   HTML   -->
    <h1 id="myObject1">...</h1>

การเลือกแบบมีความสัมพันธ์

การใช้ Selector ถือเป็นศิลปะอย่างหนึ่ง ความสนุกอยู่ที่ทำอย่างไรให้สามารถเลือกให้เฉพาะเจาะจงได้มากที่สุดโดยไม่ต้องแก้ไขโค้ดของ HTML ตัวอย่างด้านล่าง วิธีมองคือสิ่งที่เลือกจะอยู่ขวามือสุดเสมอ โดยจะมีสิ่งที่เป็นเจ้าของหรือครอบคลุ่มอยู่ด้านซ้ายมือ

H1.myClass              ใช้เลือก H1 ที่กำหนด class ชื่อ myClass ทั้งหมด
H1#myObject1        ใช้เลือก H1 ที่กำหนด id ชื่อ myObject1 เพียงตัวเดียว
A B C                          ใช้เลือก C  ที่อยู่ใต้  B ซึ่งอยู่ใต้ A แบบไม่ต้องติดกัน
A > B                           เลือก B ที่อยู่ภายใต้ A โดยตรง ห้ามมีอย่างอื่นคั่น
A + B                           เลือก B ตัวที่ติดกับ A เท่านั้น
A ˜ B                           เลือก B  ทุกตัวที่อยู่ระดับเดียวกับ A

การเลือกที่สัมพันธ์กับเหตุการณ์ (Event) และโครงสร้าง

การเลือกในรูปแบบนี้จะทำงานก็ต่อเมือมีเหตุการณ์เกิดขึ้น ตำราบางเล่มจะเรียกว่า Pseudo-Class ซึ่งมักใช้เพิ่มลูกเล่นให้เอกสารเรามีความน่าสนใจมากขึ้น โดยมากมักใช้กับ ลิงค์, ปุ่ม หรือ รูปภาพ

a:link                          กำหนดเมื่อแสดงลิงค์ ใช้กับ Tag  <a href=”…”> … </a>
a:visited                     กำหนดเมื่อเคยคลิกลิงค์นั้นไปแล้ว
a:active                      กำหนดเมื่อลิงค์ถูกคลิกและกำลังทำงาน
a:hover                      กำหนดเมื่อนำเมาส์มาจ่อที่ลิงค์

body{
   font-size: 14px;
}

a:link{
   font-color: blue;
}

/* -- เมื่อเอาเมาส์จ่อที่ link จะโตขึ้น 2 เท่า (28px) และกลายเป็นสีแดง -- */
a:hover{
   font-color: red;
   font-size: 2em;
}

<!-- HTML -->
<a href="#testlink"> Test Link </a>

อีกรูปแบบหนึ่งคือการเลือกตามลักษณะลำดับและความสัมพันธ์ทางโครงสร้างของ HTML เช่นการเลือก Element ตัวแรก, เลือกตัวที่ไม่ถูกกำหนดค่า, ตัวสุดท้ายในกลุ่ม เป็นต้น

:root                            เลือกตัวที่อยู่บนสุด (เลือกตัวแม่ที่คุมอยู่)
:empty                        เลือกตัวที่ไม่มี element อยู่ภายใน
:only-child                 เลือกตัวที่เป็น ลูกเพียงตัวเดียว ไม่มี element ข้างเคียง
:only-of-type             เลือกตัวที่มีแค่ชนิดเดียวภายในเอกสาร
:first-child                 เลือกลูกตัวแรกเท่านั้น
:nth-of-type(n)          เลือก element ชนิดนั้นลำดับที่ n
:nth-last-of-type(n)  เลือก element ชนิดนั้นลำดับที่ n จากตัวสุดท้าย
:last-child                  เลือกลูกตัวสุดท้าย
:first-of-type             เลือก element ตัวแรกของชนิดนั้น
:last-of-type              เลือก element ตัวสุดท้ายของชนิดนั้น
:lang()                        เลือก element ตัวที่กำหนดภาษานั้น lang=”…”
:not(selector)            เลือกตัวที่ไม่ใช่ selector ตัวนั้น

ตัวอย่างการสร้างตารางแบบสลับลาย (Zebra Striping)

/* --- เลือก row ที่เป็นเลขคู่ -- */
tr:nth-child(2n){
   background-color: gray;
}

การเลือกแบบกลุ่ม

เราสามารถกำหนด Style ให้กับ Element หรือ Class ที่มีคุณสมบัติร่วมเหมือนกัน เช่น รูปแบบตัวอักษร, สี, สีพื้นหลัง, ระยะขอบ เป็นต้น การกำหนดสามารถใช้ “, ” ในการคั่น selector แต่ละตัว

h1{
    color: blue;
}

p{
    color: blue;
}

/* ------ สามารถ เขียนรวมได้เป็น ------ */
h1, p{
    color: blue;
}

ลำดับการทำงานและนัยสำคัญ (Priority)

ลำดับนัยสำคัญจะเป็นตัวบังคับ ในกรณีที่เรามีการเขียน CSS ทับกับคุณสมบัติเดิมที่เคยประกาศไว้ เช่น การมีไฟล์ .css สองไฟล์ แล้วมีการเซ็ต property ชื่อ color เหมือนกัน โดยตัวหนึ่งเซ็ตสีเขียว ตัวหนึ่งเซ็ตเป็นสีเหลือง  คำถามคือ แล้วมันจะใช้ตัวไหนกันแน่?  ด้านล่างจะเป็นการเรียงจากวิธีการเซ็ตที่นัยสำคัญสูงสุดก่อน (เอาง่ายๆคือมันจะทับทุกตัวที่ถูกเซ็ต)

User                       คือการกำหนดลงใน element ตรงๆโดย User
Inline                    คือการกำหนดผ่าน inline style sheet <tag style=”…” >
Media                    คือการกำหนดผ่าน @media มักใช้กับการทำพวก Responsive
Important            คือการเขียนทับแบบบังคับโดยเพิ่ม !importnat  ไว้ท้าย value
Specificity            คือการกำหนดแบบเฉพาะเจาะจง เช่น ID จะทับ Class
ส่วน Class จะทับ Tag
Order                    คือลำดับ ถ้ากำหนดไว้ล่างสุด จะทับตัวที่ประกาศไว้ก่อนหน้า
Inherited              คือการสืบทอดจาก Parent Element ที่ประกาศไว้ก่อน
ตัวลูกก็จะมีคุณสมบัติตามนั้น
Browser               คือค่า default CSS ของตัว web browser

อันนี้เป็นตัวอย่างเพื่อให้เห็นภาพ ลองเอาโค้ดไปวางดูแล้วมาตอบใน Comment กันนะครับ ^_^

/* -- เลือกระดับ ID -- */
h1#myID{
    color: red;
}

/* -- เลือกระดับ class -- */
h1.myClass{
    color: green;
}

/* -- เลือกระดับ element --*/
h1{
    color: blue;
}

<!-- HTML -->
<h1 id="myID" class="myClass"> What is my color? </h1>
h1{
   color: red;
}

h1{
   color: green;
}

h1{
   color: blue
}

<!-- HTML -->
<h1> What is my color? </h1>
h1{
   color: red;
}

h1{
   color: green !important;
}

h1{
   color: blue
}

<!-- HTML -->
<h1> What is my color? </h1>

กรณีที่เราไม่แน่ใจว่าสามารถเซ็ตทับไปอย่างถูกต้องหรือไม่ สามารถใช้ Browser ในโหมด Developer โดยการกด F12 แล้วใช้แว่นขยาย (Inspector) ช่วยส่องดูได้ว่าแต่ละตัวถูก Selector ตัวไหนคุมอยู่

blog04-03

การกำหนดแบบเลือกเฉพาะ Browser

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

-moz-            สำหรับ Firfox    ตัวอย่าง   -moz-border-radius
-ms-              สำหรับ IE            ตัวอย่าง  -ms-layout-grid
-o-                 สำหรับ Opera     ตัวอย่าง  -o-border-radius
-webkit-      สำหรบ Chrome, Safari    -webkit-border-radius

Ref: w3school

หน่วยที่ใช้ในการกำหนดขนาด

ในการออกแบบที่ต้องการความแม่นยำเรามักกำหนดขนาดของสิ่งต่างๆเป็นค่าคงที่ แต่เมื่อยุคสมัยเปลี่ยนไป การกำหนดขนาดให้รองรับหน้าจอขนาดเดียวกลายเป็นสิ่งที่ล้าสมัย เดี๋ยวนี้ต้องทำแบบ Responsive ถึงจะสามารถดึงใจ user ให้อยู่กับเราได้

%       ใช้กำหนดขนาดแบบปรับตามขนาด หน้าจอ เช่น
หน้าจอกว้าง 600px เรากำหนด 50% ก็คือ 300px นั่นเอง

px       มักใช้กำหนดขนาดแบบคงที่ โดยจะไม่ปรับไปตามขนาดของหน้าจอ
พูดง่ายๆคือเป็นแบบ fixed นั่นเอง

pt         มักใช้กับงานสิ่งพิมพ์ เหมาะสำหรับตอนทำหน้า print preview
ตอน print ออก printer

em        เป็นการกำหนดแบบจำนวนเท่าของขนาดของ body font เช่น 2em
ถ้า body font ตอนนั้นเป็น 14px , 2em จะเท่ากับ 24px ซึ่งเป็นวิธี
ที่เว็บที่เน้นแสดงเนื้อหาส่วนใหญ่ชอบใช้กันนั่นเอง

Trick: การกำหนดขนาดแบบรักษาสัดส่วน เช่นขนาดของรูป ถ้ายังอยากรักษาอัตราส่วนของรูปให้เหมือนเดิม ให้กำหนดขนาดให้กับแค่ความกว้าง หรือความสูงเพียงอย่างเดียว เพราะการกำหนดทั้งสองอย่างจะทำให้สัดส่วนของภาพผิดเพี้ยนได้

 บทสรุป:

ขอตัดจบของตอนที่ 1 ก่อนนะครับ เนื่องจากแลดูแล้วจะยาวเกิน ของตอนที่ 2 จะพูดถึงวิธีการใช้ CSS3 ในงานออกแบบเว็บ
+ การจัดหน้าจอ (layout)
+ การใช้ @media แบบล้วงลึก
+ การจัดการกับ box
+ การแสดงผลฟอนต์และข้อความ
+ การทำเอนิเมชัน
ตอนหน้ามีอะไรสนุกๆอีกเยอะ โปรดติดตามตอนต่อไปนะครับ ^_^

AjBee.Me : กดแชร์ได้ไม่หวงครับ