วันที่ อังคาร กุมภาพันธ์ 2550

พิมพ์หน้านี้  |  ดูบล๊อกอื่นๆ ที่ OKnation

 

..... เรียนรู้เกี่ยวกับ CSS กันหน่อยไหม


CSS (Cascading Style Sheet)

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

          การใช้ CSS ช่วยลดจำนวนครั้งที่เราจะต้องแก้ไขใน HTMLลงมาเหลือเพียง 1 จุดเท่านั้นเอง สมมุติว่า เรากำหนดให้ Style A หมายถึง ฟอนต์ MS Sans Serif ขนาด 10px และมีสีน้ำเงิน ทุกๆ ตำแหน่งที่เราใช้ Style A ก็จะมีรูปแบบตัวอักษรเป็นแบบนี้ทั้งหมด

          โครงสร้างของการเขียนสไตล์ชีต HTML Tag {Property : Value; Property : Value; ...}
HTML Tag หมายถึง คำสั่งในภาษา HTML
Property คือคุณสมบัติที่ต้องการกำหนดค่า หากมีหลายคุณสมบัติจะต้องคั่นด้วยเครื่องหมาย ;
Value คือค่าที่กำหนดให้สำหรับ คุณสมบัตินั้นๆ

ตัวอย่างการกำหนดสไตล์ชีตแบบ Inline CSS ในบรรทัดคำสั่ง HTML
คำสั่ง : ย่อหน้านี้

<FONT STYLE="color: red; font-size:14pt">ตัวอักษรสีแดงขนาด 14 พอยท์</FONT>

ผลลัพธ์ : ย่อหน้านี้ตัวอักษรสีแดงขนาด 14 พอยท์
          ตัวอย่างการกำหนดสไตล์ชีตแบบ Embaded CSS ใน HTML file ภายใต้ คำสั่ง ""อยู่ในส่วน header ของ HTML ที่กำหนดให้ พื้นหลังของหน้าเว็บเป็นสีเขียวอ่อน หัวเรื่องสีน้ำเงินขนาด 16 พอยต์จัดกึ่งกลาง หัวเรื่องรองสีเขียวเข้มขนาด 12 พอยต์ และย่อหน้าข้อความเยื้องครึ่งนิ้ว ตัวอักษรขนาด 10 พอยต์ จัดชิดขอบซ้าย-ขวา

<HTML>
    <HEAD>
        <TITLE>
              Embeded Style Sheet Example
        </TITLE>
        <Style>
              BODY {background: #99ffcc; margin-top: .25in; margin-left: 1in; margin-right: 1in;}
              H1 {font-size: 16pt; font-family: "MS Sans Serif"; color: #0000ff; text-align: center;}
              H2 {font-size: 12pt; font-family: "MS Sans Serif"; color: #006600; text-align: left;}
              P {font-size: 10pt; font-family: "MS Sans Serif"; color: #000066; text-align: justify; text-indent: 0.5in;}
        </Style>
    </HEAD>
         
   

    
    
                ตัวอย่าง การสร้าง css file (.css) แยกต่างหากจาก HTML file แล้วดึง Style ไปใช้ด้วยคำสั่ง ข้อดีคือสามารถคุม Style ของ web page จำนวนมากได้

ใน Style.css เขียน

BODY {background: #99ffcc; margin-top: .25in; margin-left: 1in; margin-right: 1in;}
A:LINK { color: #0000cc; text-decoration: none}
A:VISITED { color: #990099; text-decoration: none}
A:ACTIVE { color: #006600; text-decoration: underline}
A:HOVER { color: #006600; text-decoration: underline; font-weight: bold}
H1 {font-size: 16pt; font-family: "MS Sans Serif"; color: #0000ff; text-align: center;}
H2 {font-size: 12pt; font-family: "MS Sans Serif"; color: #006600; text-align: left;}
P {font-size: 10pt; font-family: "MS Sans Serif"; color: #000066; text-align: justify; text-indent: 0.5in;}

ใน HTML เขียนคำสั่งในรูปแบบ 

<LINK REL="StyleSheet" HREF="mystyle.css" TYPE="text/css">


   

<html>

    <head>

        <title>

              Linking Style Sheet Example

               </title>

        <link rel="StyleSheet" href="mystyle.css" type="text/css">

    </head>

<body>

        <h1>เทคนิคของการใช้สไตล์ชีตแบบ Embeded</h1>

        <h2>คำสั่งและคุณสมบัติของสไตล์</h2>

        <p>

              คำสั่ง BODY จะมีสไตล์ในการกำหนดสีคือ background: ชื่อสี; ระยะห่างจากขอบบราวเซอร์บนคือ margin-top: ระยะ (พิกเซล,นิ้ว,เซนติเมตร) ระยะห่างจากขอบบราวเซอร์ซ้ายและขวาคือ margin-left:ระยะ; margin-right:ระยะ

        </p>

        <p>

              คำสั่ง H และ P จะเหมือนกันคือกำหนดขนาดฟอนต์ด้วย font-size:ขนาด (px,pt) รูปแบบฟอนต์ด้วย font-family: ชื่อฟอนต์ (ถ้าชื่อฟอนต์มีช่องว่างต้องใช้เครื่องหมาย ("...") ครอบไว้ กำหนดสีด้วย color: ชื่อสี และการจัดตำแหน่งข้อความด้วย text-align: ตำแหน่ง (left/center/right/justify) เฉพาะคำสั่งย่อหน้าจะมีการกำหนดระยะเยื้องในบรรทัดแรกด้วย  text-indent: ระยะ;

        </p>

               <p>

                           คำสั่งที่เกี่ยวกับการเชื่อมโยงเมื่อสภาวะเหตุการณ์ต่างๆ เช่น จุดเชื่อมโยงที่ยังไม่ได้ไปดูใช้ A:LINK โดยมีคุณสมบัติ color: ค่าสี; การแสดงข้อความ text-decoration: รูปแบบ (none/underline) จุดเชื่อมโยงที่ไปชมมาแล้ว A:VISITED เมื่อนำเมาท์ไปวางเหนือจุดเชื่อมโยง A:HOVER  และเมื่อจะคลิกจุดเชื่อมโยง A:ACTIVE

               </p>

               <p>&nbsp;</p>

               <p><div align="center"><font class="btxt"><b>คลิกที่เมนู View เลือก Source เพื่อดูโค๊ดคำสั่งได้</b></font></div></p>

               <p>

                                    <div align="center"><input type="BUTTON" name="Close" value="คลิก! เพื่อปิดหน้านี้" onclick="window.close()"></div>

               </p>

               <p>&nbsp;</p>

    </body>

</html>



          การใช้ Class & ID ใน Style Sheet เพื่อช่วยให้สามารถกำหนดรูปแบบให้แตกต่างกันได้ในกลุ่ม object เดียวกัน โดยตั้งเป็น class เสีย หรือหากมี 1 object ที่มีความพิเศษ จะกำหนดเป็น ID ก็ได้

 Class : การใช้งาน Class

          Class ในความหมายของ CSS ก็คือ กลุ่มของ Object ที่เราจะกำหนดให้ใช้ Style เดียวกัน ซึ่ง Object ที่ว่านี้ก็คือ Tag ใน HTML นั่นเอง การใช้ Class จะทำให้เราสามารถกำหนดลักษณะพิเศษสำหรับ Object ที่ถูกกำหนดให้อยู่ใน Class นั้นได้โดยไม่ไปรบกวน Object ที่ไม่ได้อยู่ใน Class เช่น ถ้าเรากำหนด

ซึ่งอยู่ใน Class A ให้มีสีแดง ก็จะไม่ทำให้

ธรรมดามีสีแดงไปด้วย
        วิธีกำหนด Style Sheet ให้ Class ให้ใช้จุด "." นำหน้าชื่อ class ซึ่งชื่อ class เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น

    .comic {font-size:24pt;
                font-family:Comic Sans Ms,Cursive; color: #ff0000;
              }

        วิธีการนำ Class มาใช้ ให้เพิ่มคุณสมบัติชื่อ "class=" ลงไปใน Tag แล้วใส่ชื่อคลาสลงไป โดยจะมีเครื่องหมายคำพูด "..." หรือไม่ก็ได้
บรรทัดล่างเป็นการใช้ Class ในสไตล์ชีต

บรรทัดล่างเป็นการใช้ Class ในสไตล์ชีต <H1 class="comic">Class is Cool!</H1>

 ID : การใช้งาน ID

        การใช้ ID จะให้ผลเหมือนกับการใช้ Class แต่เราจะใช้กับ Object เพียง Object เดียวเท่านั้น ดังนั้น ในเวบเพจหน้าหนึ่งๆ ไม่ควรมี Tag ที่ระบุ ID เดียวกันมากกว่า 1 Tag การใช้ ID จะมีประโยชน์มากเมื่อท่านใช้ CSS ร่วมกับ JavaScript ซึ่งมีการกำหนดให้ Object คลื่อนย้ายตำแหน่งหรือใช้ในการซ่อน/แสดง Object
วิธีกำหนด Style Sheet ให้ ID ให้ใช้เครื่องหมาย "#" นำหน้าชื่อ ID ซึ่งชื่อ ID เป็นชื่อที่ท่านสามารถตั้งได้ตามความพอใจ เช่น

    #myID {font-size:24pt;
                font-family:Comic Sans Ms,Cursive; color: #ff0000;
              }

          วิธีการนำ ID มาใช้ ให้เพิ่ม Attribute ชื่อ "id=" ลงไปใน Tag แล้วใส่ชื่อ ID ลงไป โดยจะมีเครื่องหมายคำพูด "..." หรือไม่ก็ได้
บรรทัดล่างเป็นการใช้ ID ในสไตล์ชีต

บรรทัดล่างเป็นการใช้ ID ในสไตล์ชีต <H1 ID="myID">StyleSheet with ID is Cool!</H1>

 Pseudo Class : การใช้งาน Pseudo Class

        Pseudo Class เป็นคลาสที่มีอยู่แล้วใน CSS มีอยู่ 4 ตัวคือ A:link, A:visited, A:active, A:hover ซึ่ง Style ที่ถูกกำหนดใน Pseudo Class จะถูกนำมาใช้โดยอัตโนมัติเมื่อเกิดเหตุการณ์ที่ตรงกับ Pseudo Class นั้น เช่น A:visited จะไปกำหนด Style ให้กับ Links ที่เคยไปมาแล้ว เป็นต้น ส่วนวิธีกำหนด Style ให้กับ Pseudo Class นั้น สามารถทำได้ดังตัวอย่างข้างล่าง 

    A:LINK { color: #0000cc; text-decoration: none}
    A:VISITED { color: #990099; text-decoration: none}
    A:ACTIVE { color: #006600; text-decoration: underline}
    A:HOVER { color: #006600; text-decoration: underline; font-weight: bold}

  SPAN : การใช้งาน SPAN

ในการนำ Style Sheet มาใช้นั้น เราจำเป็นต้องใช้ Tag ใน HTML ซึ่ง Tag เหล่านั้นจะมีผลกับตัวอักษรและข้อความ เช่น

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

การใช้ Span ในสไตล์ชีต "Wow! SPAN is Cool & Nice!"

กฎชั้นสูงของ CSS เป็นเทคนิคที่ช่วยให้การใช้ CSS สะดวกขึ้น สบายขึ้น ง่ายขึ้น 

 Grouping : รวมกันไว้ใช้สบาย

กฎ Grouping ช่วยให้เราสามารถกำหนด Style Sheet ของหลายๆ Class หลายๆ ID และหลายๆ Tag ที่มีส่วน เหมือนกันในครั้งเดียว โดยใช้เครื่องหมายคอมม่า (,) คั่นระหว่าง Class หรือ ID หรือ Tag แต่ละตัวเท่านั้นเอง นอกจากนี้ ถ้ามีบางส่วนที่ไม่เหมือนกัน ยังสามารถกำหนดเพิ่มลงไปด้วยวิธีปกติได้อีกด้วย

H1,H2,H3 { text-decoration: underline;
              font-family:Comic Sans Ms,Cursive;
              }
    H1 {color:Blue}
    H2 {color:Red}
    H3 {color:Green}

    Contextual Selection :

กฎ Contextual Selection ช่วยให้เราสามารถกำหนด Style ของ Tag ที่ซ้อนอยู่ใน Tag ได้ โดยในการเขียน Style S heet เราจะใช้ช่องว่าง " " คั่นระหว่าง Tag ทั้ง 2 เช่น ถ้าเราต้องการกำหนดให้ ... ที่อยู่ใน ... มีสีแดง ก็สามารถทำได้ดังตัวอย่าง
    U B {color:red}


 Inheritance : สืบทอดชั่วลูกชั่วหลาน

Inheritance หมายถึงการสืบทอดคุณสมบัติ นั่นก็คือ คุณสมบัติต่างๆ เช่น Font, สี, ขนาดของส่วนที่อยู่ใน Tag จะถูกสืบทอดมาจากส่วนที่ครอบมันอยู่ และคุณสมบัติเหล่านั้นจะถูกรวมเข้ากับคุณสมบัติของตัวเอง แล้วสืบทอดต่อไป ยังส่วนที่มันครอบอยู่ เป็นเช่นนี้ไปเรื่อยๆ สมมุติว่าเรามี Code ดังนี้ 

       <P>Nicole
    <U>Marsha<i>Beau</i>Tong<U>
    Nadia</P>

 Nicole
    MarshaBeauTong
    Nadia

 Nicole และ Nadia จะมีเพียงคุณสมบัติของ แต่ Marsha และ Tong จะได้รับคุณสมบัติที่สืบทอดมาจาก

Attribute ของ Style Sheet ที่มีใน CSS 

font-size :

ความหมาย  ใช้กำหนดขนาดของข้อความ 
ค่าที่ใช้กับ Attribute นี้
สามารถกำหนดได้ทั้งค่าขนาดจริง (มีหน่วยเป็น point, pixel, etc.) ค่าขนาดสัมบูรณ์ และค่าขนาดสัมพันธ์ และเปอร์เซนต์
 
ค่าขนาดจริง
เป็นตัวเลขที่มีหน่วยกำกับ เช่น point(pt) pixel(px)
ตัวอย่าง : {font-size:12px}
 
ค่าขนาดสัมบูรณ์
มี 7 ค่าคือ xx-small, x-small, small, medium, large, x-large และ xx-large
ตัวอย่าง : {font-size:large}
 
ค่าขนาดสัมพันธ์
เป็นการกำหนดขนาดให้ใหญ่ขึ้นหรือเล็กลงกว่าขนาดปกติ มี 2 ค่าคือ larger และ smaller
ตัวอย่าง : {font-size:larger}
 
ค่าขนาดเป็นเปอร์เซ็นต์
มีผลคล้ายการใช้ค่าขนาดแบบสัมพันธ์ แต่สามารถระบุขนาดที่จะเพิ่มหรือลดเป็นเปอร์เซนต์ได้เลย
ตัวอย่าง : {font-size:75%} หรือ {font-size:200%}
 
 font-style :

ความหมาย  ใช้กำหนด Style ของ Font
 
ค่าที่ใช้กับ Attribute นี้
มี 3 ค่าคือ
• normal ใช้กำหนด font ให้เป็นแบบ normal
• italic ใช้กำหนด font ให้เป็นแบบ italic
• oblique ใช้กำหนด font ให้เป็นแบบ oblique
ตัวอย่าง : {font-style:"italic"}
 
 font-weight :

ความหมาย  ใช้กำหนดความหนาของ font แต่ Attribute นี้ยังไม่สมบูรณ์ทั้งใน IE และ Netscape
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
• แบบชื่อ (normal, bold, bolder, lighter)
• แบบตัวเลข (100 ถึง 900)
ตัวอย่าง : {font-weight:bold} หรือ {font-weight:100}
 
 font-variant :

ความหมาย  ใช้กำหนดให้ตัวอักษรกลายเป็นตัวพิมพ์เล็กทั้งหมด
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
• normal เป็นแบบปกติ ไม่มีผลใดๆ ต่อข้อความ
• small-caps ตัวอักษรจะกลายเป็นตัวพิมพ์เล็กหมด
ตัวอย่าง : {font-variant:small-caps}
 
 font :

ความหมาย  ใช้กำหนด Attribute ทั้งหมดของ Font ในครั้งเดียว
 
ค่าที่ใช้กับ Attribute นี้
เป็นค่าของ Attribute ทั้งหมด คั่น Attribute แต่ละตัวด้วยช่องว่าง " "

ตัวอย่าง : {font:narmal small-caps bold 12px "MS Sans Serif"}
 
 text-decoration :

ความหมาย  ลักษณะพิเศษของข้อความ
 
ค่าที่ใช้กับ Attribute นี้
มี 5 แบบ คือ
• blink ทำให้ข้อความกระพริบ ใช้ได้เฉพาะใน Netscape 4
• line-through ขีดเส้นกลางบรรทัดทับข้อความ
• underline ขีดเส้นใต้ข้อความ
• overline ขีดเส้นเหนือข้อความ
• none ไม่มีผลอะไร
ตัวอย่าง : {text-decoration:underline}
 
 line-height :

ความหมาย  ใช้กำหนดความกว้างของช่องว่างระหว่างบรรทัด
 
ค่าที่ใช้กับ Attribute นี้
มี 4 แบบ คือ
• จำนวนบรรทัด
• ตัวเลขบอกระยะ ตามด้วยหน่วย
• เป็นเปอร์เซนต์ของระยะเดิม
• normal เป็นการใช้ค่าเดิมของ browser
ตัวอย่าง : {line-height:2} หรือ {line-height:16px} หรือ {line-height:normal} หรือ {line-height:125%}
 
 text-align :

ความหมาย  ใช้กำหนดการวางตัวของข้อความในแนวนอน
 
ค่าที่ใช้กับ Attribute นี้
มี 4 ค่าคือ left,right,center,justify

ตัวอย่าง : {text-align:center}
 
 text-indent :

ความหมาย  ใช้เว้นช่องว่างเพื่อเป็นย่อหน้าในบรรทัดแรกของข้อความ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
• ตัวเลขบอกระยะ ตามด้วยหน่วย
• เป็นเปอร์เซ็นต์
ตัวอย่าง : {text-indent:20px}
 
 color :

ความหมาย  ใช้กำหนดสีให้ตัวอักษร, ตาราง
 
ค่าที่ใช้กับ Attribute นี้
มี 5 แบบ คือ
• ชื่อสี เช่น black, white, blue, red, etc.
• เลขฐาน 16 ยาว 6 ตำแหน่ง เช่น #00FFFF
• เลขฐาน 16 ยาว 3 ตำแหน่ง เช่น #0FF
• แบบ RGB โดยใช้ความเข้มสี เช่น rgb(0,255,255)
• แบบ RGB โดยใช้เปอร์เซนต์ความเข้มสี เช่น rgb(0%,100%,100%)
ตัวอย่าง : {color:#00FFFF}
 
 background-color :

ความหมาย  กำหนดสีพื้นหลัง
 
ค่าที่ใช้กับ Attribute นี้
เช่นเดียวกับ color แต่มีค่าเพิ่มมาอีก 1 ค่าคือ transparent ใช้ในกรณีที่ไม่มีสีพื้นหลัง

ตัวอย่าง : {background-color:black}
 
 background-image :

ความหมาย  ใช้กำหนดภาพพื้นหลัง
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
• none เมื่อไม่ต้องการให้มีภาพพื้นหลัง
• url (ชื่อไฟล์)
ตัวอย่าง : {background-image:url(bgimg.jpg)}
 
 background-repeat :

ความหมาย  ใช้กำหนดการปูซ้ำๆ ของ background ถ้าเป็นไฟล์ขนาดเล็กๆ ให้เต็มหน้าเพจ
 
ค่าที่ใช้กับ Attribute นี้
มี 2 แบบ คือ
• repeat ให้ปูซ้ำทั้งแนวนอนและแนวตั้ง
• repeat-x ให้ปูซ้ำเฉพาะแนวนอน
• repeat-y ให้ปูซ้ำเฉพาะแนวตั้ง
• no-repeat ไม่มีการปูซ้ำ
ตัวอย่าง :{background-repeat:no-repeat}


ที่มา : www.krumontree.com ขอขอบคุณมา ณ ที่นี้ค่ะ

โดย ปิรันญ่า

 

กลับไปที่ www.oknation.net