CSS.

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
Suphot Sawattiwong Function ใน C# Suphot Sawattiwong
Advertisements

คำสั่งเริ่มต้น รูปแบบ. <HTML>. </HTML>
บทที่ 7 การใช้ตัวอักษร สื่อชุดนี้เป็นลิขสิทธิ์ของสำนักพิมพ์วังอักษร ใช้เพื่อการศึกษาเท่านั้น.
for Beginning & Publishing
ฐานข้อมูลทะเบียนที่มีอยู่เดิม ทะเบียนที่ขึ้นต้นด้วยเลขต่อไปนี้ได้นำออกจากระบบไปแล้ว จะไม่สามารถส่งข้อมูล เบิกเครมได้ 00xxx xxxxx xxx = นำออกจากระบบ 1xxxxx.
จำนวนเต็ม จำนวนเต็ม  ประกอบด้วย                   1. จำนวนเต็มบวก    ได้แก่  1 , 2 , 3 , 4, 5 , ....                   2.  จำนวนเต็มลบ      ได้แก่  -1.
TWO-DIMENSIONAL GEOMETRIC
จำนวนนับ และการบวก การลบ การคูณ การหารจำนวนนับ
คู่มือการใช้งาน P OWER P OINT 2007 ฉบับนักเรียน.
จำนวนจริง F M B N ขอบคุณ เสถียร วิเชียรสาร.
ฐานข้อมูลเชิงสัมพันธ์
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
การสร้างตาราง Click mouse ที่ปุ่ม จะปรากฏช่องสี่เหลี่ยมแสดง
Application of Graph Theory
Image Processing & Computer Vision
การจัดวางตำแหน่งข้อมูลไว้กึ่งกลาง
การสร้างตาราง (Table)
แก้ไขปรับปรุง Form.
การใช้งานโปรแกรม Microsoft Word
ขั้นตอนวิธี (Algorithm)
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
การพิมพ์ข้อความ และการสร้างตาราง
การพิมพ์รายงาน / วิทยานิพนธ์
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
ลักษณะเวทีและการจัดที่นั่งผู้ชมในโรงละคร
ขั้นตอนการประดิษฐ์ที่รองแก้ว
HTML.
CSS.
Master Page Style Sheet
การใส่ภาพลงบน Work Sheet...
รายงาน เรื่อง จัดรูปแบบข้อมูล จัดทำโดย ด. ญ. ธิกานดา วัลยาภรณ์ ชั้นม.2/1 เลขที่ 19 เสนอ อาจารย์ ภานุมาศ ชาติมองแดง โรงเรียนวชิรธรรมสาธิต.
การกำหนด ลักษณะอื่นๆ ง การเขียน เว็บไซต์สไตล์ ป. พ. ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.
การกำหนดลักษณะตัวอักษร
การสร้างตาราง ง40205 การเขียนเว็บไซต์สไตล์ ป.พ. ศูนย์คอมพิวเตอร์
การกำหนด ลักษณะตาราง ง การเขียน เว็บไซต์สไตล์ ป. พ. ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.
วาดภาพสวยด้วย Paint.
การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004
CHAPTER 6 Macromedia Dreamweaver MX 8.
การแทรกรูปภาพ บนเว็บเพจ.
รู้จักกับTimeline, Layer และ Scene รู้จักกับTimeline, Layer และ Scene
การใช้งานโปรแกรม Microsoft Power Point
ฟอร์ม โมดูล และ MDI.
Web Technology & Basic Web Development
สภาพแวดล้อมการทำงานคอมพิวเตอร์กราฟิกส์ การบรรยายครั้งที่ 7
บทที่ 3 การกำหนดรูปแบบตัวอักษร
กองซ้อน ยอดกองซ้อน (stack).
หน่วยที่ 12 Style Sheet and Layers
บทที่ 2 เริ่มต้นใช้งาน Flash
คู่มือการใช้งาน P OWER P OINT 2007 ฉบับนักเรียน.
พื้นฐานเกี่ยวกับโปรแกรม Flash CS3
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
การจัดองค์ประกอบของภาพ
บทที่ 7 หลักการเย็บประกอบตัวกระโปรง.
ครู สุนิสา เมืองมาน้อย
เริ่มต้น Photoshop CS5.
"" การพิจารณาองค์ประกอบในการถ่ายรูป "" หลักพื้นฐานในการพิจารณาองค์ประกอบในการออกแบบก่อน องค์ประกอบในการออกแบบ.
Graphic Design 03.
การจัดรูปแบบเอกสาร Microsoft Word 2007.
โครงสร้างข้อมูลแบบ สแตก (stack)
ต้นไม้ Tree [3] ผู้สอน อาจารย์ ยืนยง กันทะเนตร
สื่อการสอนการเขียนเว็บเพจ ด้วยภาษา HTML
การปรับแต่งโมดูลใน Joomla ภาค 1
16. การเขียนรายงานการวิจัย
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
Microsoft Word Unit Software Packages in Business (Unit 2) อาจารย์อุทัย เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร.
วิธีปฏิบัติทางบัญชี 1. การรับบริจาคเงินสด
หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง การตกแต่ง HTML 5 ด้วย CSS รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี
การพิจารณากลุ่มเลข และเอกสาร หลักฐานที่ใช้ประกอบการ ลงทะเบียนในกองทุน
การประเมินส่วนราชการ
ใบสำเนางานนำเสนอ:

CSS

Box Model <div> <p> <table> <body>

สิ่งที่เกี่ยวข้องกับ Box Model Division <div></div> เป็นเหมือนกล่องเอนกประสงค์ที่ใส่ Element อื่นๆเข้าไปไว้ภายใน เป็นแท็กที่ไม่มีลักษณะเฉพาะตัว ทำให้สามารถตกแต่งได้ตามต้องการ Containing Block Block ที่บรรจุ Element อื่นไว้ภายใน เมื่อมีการเปลี่ยนแปลง จะมีผลต่อ Element ภายในโดยอัตโนมัติ ที่เรียกว่า “Inherit”

Block Level Element Element ที่จะวางที่บรรทัดใหม่เสมอ <p> , <h1> - <h6>, <div>,<table>,<ol>,<ul> Inline Element Element ที่จะไม่มีการขึ้นบรรทัดใหม่ <span>,<b>, <a>, <img> , <strong> , <em>

Inline Element (เรียงจากซ้ายไปขวา) Block Level Element <div> <p> <table> <span> <b> <img> Inline Element (เรียงจากซ้ายไปขวา) Block Level Element (เรียงจากบนลงล่าง)

โครงสร้างของ Box Model Margin พื้นที่ว่างรอบๆ Element Border เส้นขอบ Padding พื้นที่ว่างระหว่างเส้นขอบกับสิ่งที่บรรจุภายใน Content Area พื้นที่บรรจุเนื้อหาหรือสิ่งที่ต้องการ

การกำหนดขนาดใน Box Area px pixel mm milimetre in Inch % Percentage

margin กำหนดสี่ด้านพร้อมกัน margin-top กำหนดเฉพาะส่วนบน Box Model Property Margin margin กำหนดสี่ด้านพร้อมกัน margin-top กำหนดเฉพาะส่วนบน margin-right กำหนดเฉพาะส่วนขวา margin-bottom กำหนดเฉพาะส่วนล่าง margin-left กำหนดเฉพาะส่วนซ้าย value : length | percentage | auto

Box Model Property Border เส้นขอบ border กำหนดลักษณะ(width, style, color) เส้นขอบทั้งสี่ด้าน และ ทุกด้านเหมือนกันหมด border-top กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านบน border-right กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านขวา border-bottom กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านล่าง border-left กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านซ้าย border-style กำหนดแบบการตกแต่งแต่ละด้าน border-top-style border-right-style border-left-style border-bottom-style

border-width กำหนดความกว้างของเส้นขอบทั้งสี่ด้าน border-top-width กำหนดความกว้างเฉพาะเส้นขอบด้านบน border-right-width กำหนดความกว้างเฉพาะเส้นขอบด้านขวา border-bottom-width กำหนดความกว้างเฉพาะเส้นขอบด้านล่าง border-left-width กำหนดความกว้างเฉพาะเส้นขอบด้านซ้าย border-color กำหนดสีของเส้นขอบแต่ละด้าน border-top-color border-right-color border-bottom-color border-left-color border : 2px solid black ;

Border-style

Border-width Thin Medium Thick ขนาด Border-color ชื่อสี รหัสค่าสี #RGB

padding กำหนดสี่ด้านพร้อมกัน padding-top กำหนดเฉพาะด้านบน padding-right กำหนดเฉพาะด้านขวา padding-bottom กำหนดเฉพาะด้านล่าง padding-left กำหนดเฉพาะด้านซ้าย Value : length | percentage

Content Area width ความกว้าง length | % | auto height ความยาว length | % | auto

การกำหนด Property แบบย่อ (Shorthand Properties) มีค่าเดียว property : a; มีสองค่า property : a b; กำหนดให้ด้านบนและล่าง ให้เป็นค่า a กำหนดให้ด้านซ้ายและขวา ให้เป็นค่า b มีสามค่า property : a b c; กำหนดให้ด้านบนให้เป็นค่า a กำหนดให้ด้านล่าง ให้เป็นค่า c border-width:1px; border-width:1px 2px; 1px 2px border-width:1px 2px 3px; 1px 2px 3px

มีสี่ค่า กำหนดตามแบบเข็มนาฬิกา (บน ขวา ล่าง ซ้าย) property : a b c d; border-width:1px 2px 3px 4px; 1px 4px 2px 3px

Floating Left ให้ Element ชิดซ้ายสุด Right ให้ Element ชิดขวาสุด None คงเดิม float : left; float : right float : none

ลักษณะการ Float Element การ Float จะอยู่ในส่วนของ Container ไม่ออกนอกกรอบ BOX1 BOX2

Element ที่มีการ Float หลายตัว จะเรียงต่อกัน ไม่ทับซ้อนกัน BOX1 BOX2 BOX3

การ Float ไม่จำเป็นต้องเรียงติดกัน หากไม่มีที่ว่างเหลือพอ จะเริ่มที่แถวใหม่ เพราะจะต้องไม่ทับซ้อนของ Element ก่อนหน้า BOX1 BOX2 BOX3

การ Float ของ Element หากมีเนื้อที่เหลือพอ Element ที่ตามมาจะใช้พื้นที่ที่เหลือต่อไป xxxxx xxxxx xxxxx xxxxxxxxxxxxxxxxx xxxxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxx xxxx. xxxx xx xxx xxxx xxxx xxxxx xxx xx xxx. xxxxx xxx xxx xxx xxx xxx xx xxxxx. BOX2

การ Clear Float clear : both; Clear ทั้งหมด clear : left; Clear เฉพาะ Float Left clear : right; Clear เฉพาะ Float Right xxxxx xxxxx xxxx xxxxxxxxxx xxxx xxxxxxxxx xxx xxxx xxxxxx xxxxxx xxxxxxxxxxxx xxxxxx. xxxxx xxxx xxxx xxxxxxx xxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxx xxx xxxxxxxx xx xxxxx xxxx xx xx. BOX1 xxxxx xxxxx xxxx xxxxxxxxxx xxxx xxxxxxxxx xxx xxxx xxxxxx xxxxxx xxxxxxxxxxxx xxxxxx. xxxxx xxxx xxxx xxxxxxx xxxx xxxxx xxxxxxx xxxxx xx xxxxxx xxx xxx xxxxxxxx xx xxxxx xxxx xx xx. BOX1

Positioning เป็นการจัดตำแหน่งของ Element ใน Browser อย่างอิสระ โดยจะต้องระบุว่า จะใช้ Container ใดเป็นหลัก การใช้ position property จะมีผลเฉพาะตัวเอง ไม่ถ่ายทอดไปสู่ Element ภายใน

Position Property ที่เป็น Static Static จะไม่สามารถปรับตำแหน่งได้ แต่สามารถใช้ ค่า Margin เพื่อปรับเลื่อนได้ Fixed เป็นการวางตำแหน่งตายตัว ใช้หน้า Browser เป็นหลัก โดยนับจากมุมซ้ายสุด Relative คล้ายกับ Static แต่สามารถปรับระยะห่างได้ตามต้องการ ด้วยค่า offset Absolute เป็นการวางตำแหน่งที่เป็นอิสระที่สุด โดยจะใช้ Container ที่ใกล้สุดเป็นหลัก แต่จะต้องไม่ใช่ position ที่เป็น Static

Offset Property top top: 50%; right right: 30px; bottom bottom: 10px; left left: -2em; BOX1 top: 50%; left: 50%;

position : static #Box1{ position : static; top: 50px; left: 20px; } margin-left: -10px;

position : fixed #Box1{ position : fixed; top: 50px; left: 20px; } - x

position : relative #Box1{ position : relative; top: 50px; left: 20px; } top : 50px; left : 20px; Box1

position : absolute

Z-index ในการจัด Position แบบ Absolute อาจเกิดการทับซ้อนกันได้ ดังนั้นจึงสามารถเรียงลำดับ Element ที่ซ้อนกันเป็นชั้นๆว่า Element ใดจะมาก่อนหรือหลังได้ ซึ่งค่าของ z-index ที่มากกว่า จะอยู่สูงกว่าค่าที่มีน้อยกว่า BOX3 z-index:1 BOX2 z-index:2 BOX1 z-index:3

Form กับ CSS Input.txtname{ text-align: right; background: #FFFFCC; border-top: 2px solid #CCC; border-left: 2px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; margin-top: 5px; }