ประโยชน์ของ CSS 1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทาได้ง่ายและรวดเร็ว 2. เมื่อ code ภายในเอกสาร HTML ลดลง ทาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว 3. สามารถกาหนดรูปแบบการแสดงผลจากคาสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทาให้เวลาแก้ไขหรือปรับปรุงทาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร 4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser 5. สามารถกาหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน 6. ทาให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนาให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทาให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
o #rrggbb เชน #eecc00, #42e15e o #rgb เชน #ec0 หมายถง #eecc00 o rgb(x,x,x) โดยท x คอจ านวนเตมตงแต 0-255 เชน rgb(0,204,0) o rgb(y%,y%,y%) โดยท y คอเปอรเซนตตงแต 0%-100% เชน rgb(0%,80%,0%)
บทท5 Insert a Style Shee
วธใชงาน Style Sheet
1. Inline Styles
วธการนควรใชในกรณทตองการก าหนด style ใหกบ element ของ HTML เพยงอนเดยวเปนการเฉพาะ โดย
การแทรกค าสง style sheet ใน HTML Tag อยในค าสง style="" ดงน
เราควรหลกเลยงการเขยน style=”" ฝงลงใน HTML Tag เพราะมนท าใหอานยาก และน าไปใชตอไมได และเปนการยากทจะแกไข 2. Internal Style Sheet วธการนควรใชในกรณทมเพยง HTML ไฟลเดยวทใช style น เมอประกาศค าสง Style Sheet เพอก าหนดคณสมบต ใหกบ HTML Tag ใดๆ แลว จะมผลกบเอกสาร HTML ทงหนา นยมใสสวนของค าสง Style Sheet ไวระหวาง <head>...</head> ส าหรบ Web Browser รนเกาทไมสนบสนนค าสง Style Sheet หรอ Disable Style Sheet ไวนน ใหใส Comment ของ ภาษา HTML ไวดวย เพอใหเวบเบราเซอรนนทราบวาไมใชค าสงภาษา HTML
3. External Style Sheet
วธการนเหมาะกบกรณทมเพยง 1 style แลวตองการน าไปใชกบเอกสาร HTML หลายๆ ไฟล โดยน าเอา
กรณทตองการใหแสดงผลตามรปแบบทก าหนดใน 2 class กสามารถท าได
EXAMPLE
Selector ทเปน ID attribute เปนการประกาศค าสง Style Sheet เพอก าหนดคณสมบตแบบเฉพาะเจาะจง ใหกบ HTML element ผาน ID attribute เหมอนกบ Class แตตางกนท ID จะใชกบ element ทมเพยงอนเดยวในเอกสาร HTML การประกาศใช # น าหนา ID
EXAMPLE
อาจจะยงไมเขาใจตอนน ไวเหนตวอยางมากๆ เขา จะคอยๆ เขาใจเองคะ แลวจะรไดอยางไรวาคา property และ value เชน text-align: center, font-weight:bold มอะไรบาง อนนศกษาไดจาก Chapter ตอๆ ไปคะ
เรองของ CSS ทเกยวกบ Form ม 2 สวนทอยากจะพดถงคะ สวนแรก Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, button เปนตน ใหมสสนทสวยงามได ไปดตวอยางกนคะ
การตกแตง Scroll bar ดวย CSS จะพดถงในบทท 20
รปทใชท าปม Tableless Form เราสามารถก าหนด Form เปน 2 column โดยไมตองใช Table ได โดยก าหนดความกวางของ column แรกโดยใช tag <label> และ colunm ทสอง จะเปนพวก text box ทวางตอจาก column แรก credit to : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ ลองน า code ไปปรบปรงเปลยนแปลงตอไดคะ