วันอังคารที่ 18 กันยายน พ.ศ. 2561

หลักไวยากรณ์ของ CSS เบื้องต้น

1. CSS จะประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ Tag HTML ใน CSS จะเรียกว่า Selector ที่ใช้สำหรับการอ้างถึง 
2. มีชื่อ Properties หรือชื่อคุณสมบัติ และตามด้วย Value เพื่อกำหนดค่าให้แก่คุณสมบัตินั้น และระหว่างชื่อ  Properties กับ Value จะถูกคั่นด้วยเครื่องหมาย colon ( properties: value ) 
3. คุณสมบัติภายในจะมีได้มากกว่า 1 คุณสมบัติตามที่เรากำหนด และ properties ในแต่ละ properties จะถูกคั่นด้วยเครื่องหมาย semi-colon ( ; )
 4. ต้องเขียนคุณสมบัติของ CSS นั้นไว้ภายในเครื่องหมายปีกกา { .... } เท่านั้น  ตัวอย่างการเขียน CSS โดยการกำหนดชื่อ Class จากตัวอย่างเป็นการประกาศ Class ชื่อว่า font18red โดยหลักการของการตั้งชื่อ Class
 มีหลักการดังนี้ 
1. ชื่อ Class ต้องนำหน้าด้วยเครื่องหมาย dot หรือ จุด ( . )
2. ชื่อ Class ห้ามขึ้นต้นด้วยตัวเลข เช่น เขียน 18fontred แบบนี้ไม่ได้ 
3. ชื่อ Class ห้ามมีการเว้นวรรค เช่น จะเขียนเป็น font 18red แบบนี้ไม่ได้ 
4. ชื่อ Class ห้ามเป็นภาษาไทย (ไม่มีใครเข้าตั้งชื่อแบบนี้กัน) การเรียกใช้งาน CSS ที่มีการสร้างในแบบ Class การเรียกใช้งาน CSS ที่มีลักษณะการตั้งชื่อ Class ข้างต้น หากเราต้องการเรียกใช้งานคุณสมบัติของคลาสใด เราสามารถเรียกใช้งานคลาสนั้นได้จากทุก TAG ของ HTML โดยผ่าน Attribute ที่ชื่อว่า class ดังตัวอย่างต่อไปนี้ จากตัวอย่างข้างต้น เราเรียกใช้ Class ที่ชือว่า font18red จาก Tag div โดยใช้ Attribute ที่ชื่อว่า class แล้วอ้างถึงชื่อ Class ที่เราต้องการเรียกใช้คุณสมบัติ (สังเกตที่รูปข้างต้น) เมื่อเราลองดูผลลัพธ์ของโค้ดนี้กับ Browser เราจะได้การแสดงผลเป็นข้อความที่มีสีแดง ตัวอักษรตัวหนา มีขนาดที่ 18 pixel ที่จริงการเขียนคุณสมบัติของ CSS ยังมีอีกหลายวิธีที่สามารถเขียนและนำไปใช้งานได้ เช่น การเขียนแบบกำหนดคุณสมบัติให้แก้ TAG ของ HTML หรือการเขียนโดยอ้างอิงจาก Tag ของ HTML เป็นต้น แต่สำหรับบทความนี้ผมขอแนะนำไว้เพียงเท่านี้ก่อน เนื่องจากวัตถุประสงค์ของบทความนี้ ต้องการให้ท่านได้รู้จักกับไวยากรณ์ของ CSS เบื้อนต้นเสียก่อน นั้นก็คือ ต้องรู้ว่าจะเขียน CSS ไว้ที่ไหน มีการเขียน properties กับ value ด้วยวิธีใด ต่าง ๆ เหล่านี้คือวัตถุประสงค์ของบทความนี้ครับ ไว้อ่านต่อกับบทความหน้า ว่าด้วยเรื่องของการเขียน CSS กับการอ้างถึงคุณสมบัติในรูปแบบต่าง ๆ
รูปภาพที่เกี่ยวข้อง
ที่ ไม่มีความคิดเห็น:

ตัวอย่าง

ตัวอย่างเช่น เราสร้างไฟล์เอกสารไว้สองไฟล์ไว้ในโฟลเดอร์(Folder)เดียวกัน ได้แก่ไฟล์   css-test.html และไฟล์  style.css ดังภาพ 
 
ภาพภายในเอกสาร css-test.html เป็น HTML Code ที่ยกมาจากตัวอย่างในข้อที่ 2 หากแต่เพียงแตกต่างกันที่คำสั่ง <style>..</style> ที่เปลี่ยนเป็นคำสั่ง <link> แทน

 css-test.html

                  <html>                                                                                                     
                       <head>                                                                                               
                          <link rel="stylesheet" type="text/css" href="style.css" >                 
                       </head>                                                                                              
                       <body>                                                                                               
                                    <p>                                                                                        
                                             This is some text for example.                                     
                                    </p>                                                                                       
                                    <p>                                                                                        
                                             This is <span>some text</span> for example.            
                                    </p>                                                                                       
                       </body>                                                                                              
                  </html>                                                                                                    

ถึงจุดนี้หากเรายังไม่ได้สร้างไฟล์ style.css จะพบว่าผลลัพธ์เป็นเช่นเคย คือจะแสดงข้อความ "This is some text for example" ธรรมดาเท่านั้น ในขั้นตอนต่อไปคือการสร้างไฟล์ที่มีนามสกุล .css 

 style.css


p{                                                                                                                               
    color:blue;                                                                                                             
 }                                                                                                                                
span{                                                                                                                        
    color:red;                                                                                                              
    text-decoration:underline;                                                                                     
}                                                                                                                                
เมื่อแสดงผลลัพธ์ของไฟล์ css-test.html อีกครั้งจะพบว่าปรากฎข้อความเช่นเดิมสองบรรทัด พร้อมรูปแบบข้อความที่เปลี่ยนไปเช่นเดียวกันกับตัวอย่างก่อนนี้ ดังภาพ
 
เมื่อทราบถึงวิธีการเขียน css ควบคู่กันไปกับไฟล์ html แล้ว หลายท่านอาจเกิดคำถามว่า คำสั่ง css เขียนอย่างไรบ้าง? หรือมีคำสั่งอะไรบ้าง ซึ่งผู้เขียนก็ตอบเลยว่าจำไม่ได้เหมือนกัน (^^') แต่สิ่งที่จำเป็นคือเราต้องพยายามจดจำคำสั่งที่ใช้บ่อยๆ อย่างเช่นที่เราจำเป็นต้องจำแท็กต่างๆใน HTML หรือคำสั่งต่างๆในภาษาอื่นๆ ให้ทราบเพียงว่าแท็กใดทำอะไรได้บ้างเท่านั้น เพราะฉะนั้นผู้เขียนจึงขอสรุปคำสั่งที่ใช้บ่อยสำหรับจัดการข้อความ เลเอาท์(Layout) เส้นกรอบ ระยะห่าง พื้นหลัง ฯลฯ ในฉบับของผู้เขียนเอง แต่จะไม่ลงลึกมากนัก เนื่องจาก CSS เป็นภาษาที่หากศึกษาให้ละเอียดแล้วก็จะละเอียดมากจริงๆ สำหรับที่นี้ เราต้องการเพียงแค่จะทำอย่างไรให้เว็บเพจของเราแต่ละหน้าสวยขึ้นในแบบฉบับของเราเท่านั้น
สรุปคำสั่ง CSS 
คำสั่งของ CSS ประกอบด้วย selector, property และ value โดยมีโครงสร้างคำสั่งคือ  selector{ property: value; } ดังภาพ

รูปภาพที่เกี่ยวข้อง
ที่ ไม่มีความคิดเห็น:

เวอร์ชันของ CSS

เวอร์ชันของ CSS มีดังต่อไปนี้
CSS 1
CSS 1 หรือ CSS Level 1 คือเวอร์ชันแรกที่ออกสู่สาธารณะและเป็น W3C Recommendation ซึ่งออกในเดือนธันวาคมปีค.ศ. 1996 CSS 1 นั้นมีฟีเจอร์เพียงไม่มาก
CSS 2
CSS 2 ออกในเดือนพฤษภาคมปีค.ศ. 1998 โดยเพิ่มเติมฟีเจอร์ให้กับ CSS 1 อย่างไรก็ตาม CSS 2 ไม่ประสบความสำเร็จมากนักในแง่ของการยอมรับและการรองรับจากเว็บเบราว์เซอร์ต่างๆ ทำให้ CSS 2.1 ต้องออกมาเพื่อแก้ไขปัญหาต่างๆในเวอร์ชัน 2 CSS 2.1 ได้เป็น Recommendation ในเดือนกรกฎาคมปีค.ศ. 2007
CSS 3
CSS 3 ยังอยู่ระหว่างการพัฒนา และการกำหนดสเปคใน CSS 3 นั้น จะถูกแบ่งออกเป็นส่วน (Module) ต่างๆ ซึ่งบางส่วนก็เสร็จสมบูรณ์แล้ว บางส่วนก็กำลังพัฒนาอยู่ แต่บางเว็บเบราว์เซอร์ก็เริ่มรองรับสเปคในบางส่วนบ้างแล้ว

  à¸œà¸¥à¸à¸²à¸£à¸„้นหารูปภาพสำหรับ การ์ตูนขยับได้ 

ที่ ไม่มีความคิดเห็น:

การใช้งาน CSS

ในบทนี้จะเป็นการนำ CSS ไปใช้ 
การใช้งาน CSS จะแบ่งได้ 2 แบบคือ

 1. การเขียน CSS ในเอกสาร HTML
การเขียนแบบนี้ไม่เป็นที่นิยมเพราะถ้าต้องการแก้ไข ก็ต้องแก้ไขในทุกหน้าซึ่งจะทำให้เสียเวลา ตัวอย่างการเขียน CSS ในเอกสาร HTML

Source Code

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
จะเขียน CSS ในส่วนของ <HEAD> จะเห็นได้ว่ามีการใช้ Comment HTML <!-- --> อยู่ด้วย
ใส่เพื่อป้องการผู้ใช้งาน browser ตัวเก่า ที่ยังไม่รู้จัก CSS จะแสดงผล Code CSS ของเรา ซึ่งเราจะใส่หรือไม่ก็ได้ 
อีกแบบหนึ่งของการเขียน CSS ในเอกสาร HTML คือการเขียนใน HTML tag เลยดังตัวอย่าง

Source Code

<p style = " color: blue ; margin-left: 20px ">
ตัวอักษรนี้สีฟ้า และห่างจากขอบทางขวามือ 20px
</p>


2. การเขียน CSS แยกเป็นอีก 1 ไฟล์การเขียนแบบนี้เป็นที่นิยมมากเพราะถ้าเราต้องการแก้หน้าตาเว็บเพจของเราก็แก้ไฟล์ CSS แค่ไฟล์เดียวก็สามารถทำให้หน้าเว็บเพจของเราเปลี่ยนไปได้หมด ซึ่งการใช้งานก็ให้เราเขียน Code ที่หน้า HTML ดังนี้ 

ตัวอย่างคำสั่งที่ใช้นำเข้าไฟล์ CSS จากภายนอก 



Source Code

<head>
<link rel = "stylesheet" type = "text/css" href = "ชื่อไฟล์ CSS ของเรา" >
</head>




ตัวอย่างจะเป็นการนำเข้าไฟล์ CSS จากภายนอกซึ่งเราจะเขียนในส่วน <Head> เช่นเดียวกันกับแบบแรก 

ตัวอย่างไฟล์ CSS



Source Code

hr {color: sienna}
p {margin-left: 20px}




เนื้อหาในไฟล์ก็เป็นคำสั่ง CSS ธรรมดาซึ่งเรานิยม save ไฟล์นี้ในนามสกุล .css เพื่อสะดวกในการค้นหาและแก้ไข เช่น อาจตั้งชื่อเป็น style.css 

ทุกท่านอาจมีคำถามเกิดขึ้นว่า ถ้าเราใช้ทั้ง 2 แบบ จะเป็นอย่างไร คำตอบคือ browser จะแสดงผลโดยให้คำสั่ง CSS ที่อยู่ในหน้าเว็บเป็นคำสั่งที่ใช้แสดงผลหลัก เนื่องจากว่า browser จะโหลดไฟล์ CSS มาก่อน และเมื่อมีคำสั่งที่อยู่ใน เอกสาร HTML ซ้ำกับที่โหลดมา ก็จะยึดตัวที่อยู่ในเอกสาร HTML เป็นตัวหลัก ดังตัวอย่าง 

คำสั่ง CSS ที่โหลดเข้ามา



Source Code

h3 
{
    color: red;
    text-align: left;
    font-size: 8pt
}




คำสั่ง CSS ที่อยู่ในเอกสาร HTML 



Source Code

h3 
{
    text-align: right;
    font-size: 20pt
}




ผลลัพท์ คำสั่ง CSS ที่แสดงผล จะนำคำสั่งทั้ง 2 ชุดมารวมกันและยึดเอาคำสั่งที่อยู่ใน HTML เป็นหลัก



Source Code

h3 
{
    color: red;
    text-align: right;
    font-size: 20pt;
}





ผลการค้นหารูปภาพสำหรับ การ์ตูนขยับได้
ที่ ไม่มีความคิดเห็น:

ข้อดีและข้อเสียของ CSS

ข้อดีคือ 1.ตัวอักษรมีหลายลักษณะ 2.สามารถสร้างกรอบล้อมรอบได้ ทำให้ดูสนใจมากยิ่งขึ้น ข้อเสียคือ 1.มีcssในเว็บ ทำให้ไม่สามารถย่อหรือขยายcssได้ 2.ถ้าในเครื่องไม่มีฟอนต์ของcssก็ไม่สามารถดูฟอนต์นั้นได้


ที่ ไม่มีความคิดเห็น:

ประโยชน์ ของ CSS

ประโยชน์ของ CSS
CSS มีประโยชน์อย่างหลากหลาย ซึ่งได้แก่
1.ช่วยให้เนื้อหาภายในเอกสาร HTML มีความเข้าใจได้ง่ายขึ้นและในการแก้ไขเอกสารก็สามารถทำได้ง่ายกว่าเดิม เพราะการใช้ CSS จะช่วยลดการใช้ภาษา HTML ลงได้ในระดับหนึ่ง และแยกระหว่างเนื้อหากับรูปแบบในการแสดงผลได้อย่างชัดเจน
2.ทำให้สามารถดาวน์โหลดไฟล์ได้เร็ว เนื่องจาก code ในเอกสาร HTML ลดลง จึงทำให้ไฟล์มีขนาดเล็กลง
3.สามารถกำหนดรูปแบบการแสดผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีการแสดงผลในเอกสารแบบเดียวทั้งหน้าหรือในทุกๆ หน้าได้ ช่วยลดเวลาในการปรับปรุงและทำให้การสร้างเอกสารบนเว็บมีความรวดเร็วยิ่งขึ้น นอกจากนี้ยังสามารถควบคุมการแสดงผล ให้คล้ายหรือเหมือนกันได้ในหลาย Web Browser
4.ช่วยในการกำหนดการแสดงผลในรูปแบบที่มีความเหมาะกับสื่อต่างๆ ได้เป็นอย่างดี
5.ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานในอนาคตได้ดี
ผลการค้นหารูปภาพสำหรับ การ์ตูนขยับได้
ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)

หลักไวยากรณ์ของ CSS เบื้องต้น

1. CSS จะประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ Tag HTML ใน CSS จะเรียกว่า Selector ที่ใช้สำหรับการอ้างถึง  2. มีชื่อ Properties หรือ...

  • ข้อดีและข้อเสียของ CSS
    ข้อดีคือ 1.ตัวอักษรมีหลายลักษณะ 2.สามารถสร้างกรอบล้อมรอบได้ ทำให้ดูสนใจมากยิ่งขึ้น ข้อเสียคือ 1.มีcssในเว็บ ทำให้ไม่สามารถย่อหรือขยายc...
  • หลักไวยากรณ์ของ CSS เบื้องต้น
    1. CSS จะประกอบไปด้วย ชื่อ Class หรือชื่อ ID หรือชื่อ Tag HTML ใน CSS จะเรียกว่า Selector ที่ใช้สำหรับการอ้างถึง  2. มีชื่อ Properties หรือ...
  • ประโยชน์ ของ CSS
    ประโยชน์ของ CSS CSS  มีประโยชน์อย่างหลากหลาย ซึ่งได้แก่ 1.ช่วยให้เนื้อหาภายในเอกสาร  HTML  มีความเข้าใจได้ง่ายขึ้นและในการแก้ไขเอกสารก็...