งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

CSS. Box Model สิ่งที่เกี่ยวข้องกับ Box Model Division เป็นเหมือนกล่อง เอนกประสงค์ที่ใส่ Element อื่นๆเข้าไปไว้ ภายใน เป็นแท็กที่ไม่มีลักษณะ เฉพาะตัว.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "CSS. Box Model สิ่งที่เกี่ยวข้องกับ Box Model Division เป็นเหมือนกล่อง เอนกประสงค์ที่ใส่ Element อื่นๆเข้าไปไว้ ภายใน เป็นแท็กที่ไม่มีลักษณะ เฉพาะตัว."— ใบสำเนางานนำเสนอ:

1 CSS

2 Box Model

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

4 Block Level Element Element ที่จะวางที่บรรทัดใหม่เสมอ, -,,,, Inline Element Element ที่จะไม่มีการขึ้นบรรทัดใหม่,,,,,

5 Inline Element ( เรียงจากซ้ายไปขวา ) Block Level Element ( เรียงจากบนลงล่าง )

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

7 การกำหนดขนาดใน Box Area pxpixel mmmilimetre inInch %Percentage

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

9 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

10 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 ;

11 Border-style

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

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

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

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

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

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

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

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

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

21 การ 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

22 การ 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

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

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

25 Offset Property toptop: 50%; rightright: 30px; bottombottom: 10px; leftleft: -2em; BOX1 top: 50%; left: 50%;

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

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

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

29 position : absolute

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

31 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; }


ดาวน์โหลด ppt CSS. Box Model สิ่งที่เกี่ยวข้องกับ Box Model Division เป็นเหมือนกล่อง เอนกประสงค์ที่ใส่ Element อื่นๆเข้าไปไว้ ภายใน เป็นแท็กที่ไม่มีลักษณะ เฉพาะตัว.

งานนำเสนอที่คล้ายกัน


Ads by Google