Moncy Services: CSS - Size&Position

การกำหนดขนาดและตำแหน่ง

เราสามารถวางเนื้อหาแบบระบุตำแหน่งเจาะจง หรือกำหนดขนาดความกว้างของเนื้อหา โดยใช้คุณสมบัติดังต่อไปนี้

width และ height:

ใช้กำหนดความกว้างและความยาวของตาราง กรอบข้อความ รูปภาพ และแท็ก HTML อื่นๆ มีค่าที่กำหนดได้ คือ auto (ให้บราวเซอร์กำหนดค่าที่เหมาะสมให้), % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ img {width:450px; height:230px}

max-width และ max-height:

กำหนดค่าความกว้าง ความสูงที่มากที่สุดของแท็ก HTML ใช้ในกรณีข้อมูลภายในแท็ก HTML ที่มีการเปลี่ยน ทำให้ขนาดแท็กไม่คงที่ และต้องการกำหนดแท็กให้ไม่ขยายโตเกินขนาดที่กำหนดไว้ ค่ากำหนดได้ คือ none (ไม่จำกัดขนาด/โตได้ไม่สิ้นสุด), % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดค่าเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ p {max-height:1500px}

min-width และ min-height:

ใช้กำหนดค่าความกว้าง ความสูงที่น้อยที่สุดของแท็ก HTML ใช้กรณีที่ต้องการกำหนดขนาดเล็กที่สุดของแท็ก HTML เพื่อไม่ให้แท็กมีขนาดเล็กเกินไป ค่าที่กำหนดได้ คือ % (กำหนดค่าเป็นเปอร์เซ็นต์เทียบจากขนาดของแท็กพ่อ) หรือกำหนดค่าตัวเลขเจาะจง เช่น 10px, 1 cm

รูปแบบ__ p {min-height:200px}

line-height:

กำหดระยะห่างระหว่างบรรทัด มีค่าที่เป็นไปได้ คือ normal (ตั้งค่าตามปกติ), จำนวนเท่า (เช่น 1.4 เท่าของฟอนต์ในเวลานั้น), จำนวนเปอร์เซ็นต์ (เช่น 140% เทียบเท่ากับขนาดฟอนต์ในเวลานั้น) หรือกำหนดเป็นตัวเลขเจาะจง เช่น 10px, 1cm

รูปแบบ__ p {line-height:1.4}

p {line-height:14pt}

p {line-height:140%}

position01.htm

p.small {line-height:0.4cm; width:250px}

p.big {line-height:0.9cm; width:500px}

</style></head>

<body>

<p>

This is a paragraph with a standard line-height.

</p>

This is a paragraph with a standard line-height.

</p>

This is a paragraph with a standard line-height.

</p>

</body></html>

position:

กำหนดตำแหน่งของแท็ก กำหนดได้ 3 รูปแบบ คือ

static - แสดงในตำแหน่งที่ควรแสดง คุณสมบัตินี้ใช้ร่วมกับ left และ top ไม่ได้

relative - แสดงแท็กให้เลื่อนออกจากตำแหน่งที่ควรแสดง โดยใช้ร่วมกับ left และ top เพื่อระบุระยะที่จะเลื่อนออกไป

absolute - แสดงแท็กในตำแหน่งใดๆ ก็ได้ตามต้องการ โดยอ้างอิงจากบนซ้ายของเอกสาร HTML

position02.htm

h2.pos_left {position:relative; left:20px}

h2.pos_right {position:relative; left:20px}

h2.pos_abs {position:absolute; left:100px; top:150px; color:red}

</style>

</head><body>

<h2 class="pos_abs">This is absolute position</h2>

<h2> This ia normal position</h2>

<h2 class="pos_left">This heading is moved left to its normal position</h2>

<h2 class="pos_right">This heading is moved right to its normal position</h2>

</body></html>

left, top, right และ bottom:

ใช้ร่วมกับ position เพื่อกำหนดตำแหน่ง โดยนับจากขอบแต่ละด้านเข้าไปตามค่าที่กำหนดไว้ ค่าที่เป็นไปได้ คือ auto (ให้บราวเซอร์กำหนดค่าที่เหมาะสมให้), % (กำหนดเป็นเปอร์เซ็นต์เทียบกับแท็กพ่อ) หรือกำหนดค่าเจาะจง เช่น 20px

clip:

ใช้ตัดเนื้อหาบางส่วนออกไป มีผลทำให้เนื้อหาส่วนนั้นแสดงออกมาไม่ทั้งหมด แสดงให้เห็นเพียงบางส่วนเท่านั้น คือ แสดงผลเฉพาะส่วนที่อนุญาติให้เห็นเท่านั้น และคุณสมบัตินี้ใช้ร่วมกับ position:absolute เสมอ และตัดเนื้อหาได้ในรูปทรงสี่เหลี่ยมเท่านั้น (clip:rect)

position03.htm

img.clip {position:absolute; clip:rect(0px 150px 70px 50px)}

</style>

</head><body>

<p>The original imgage is not clip:</p>

<p>The clip property is here cutting an image</p>

</body></html>

overflow:

ใช้จำกัดขอบเขตข้อมูลคล้าย clip คือตัดบางส่วนออกได้ แต่สามารถดูข้อมูลที่ถูกตัดออกได้โดยการใช้ scrollbar เพื่อเลื่อนดูข้อมูลที่ซ่อนอยู่ ค่าที่เป็นไปได้คือ

visible - แสดงข้อมูลทั้งหมด แม้ข้อมูลจะใหญ่กว่าขอบเขตที่กำหนดไว้

hidden - แสดงข้อมูลในขอบเขตที่กำหนดเท่านั้น ส่วนที่เกินจากนี้จะไม่แสดงให้เห็น

scroll - แสดงข้อมูลเหมือน hidden แต่จะมี scrollbar เพิ่มขึ้นมา เพื่อใช้ดูข้อมูลส่วนที่ซ่อนอยู่

auto - ปรับแบบอัตโนมัติ คือ ถ้าข้อมูลใหญ่กว่าขอบเขต จะไม่แสดงส่วนที่เกินแต่จะแสดง scrollbar ให้

position04.htm

p.over {width:120px; height:90px; overfloe:scroll }

</style>

</head><body>

<p>The original image is not overflow:</p>

<p>The overflow property is here cutting an image, but you can scroll it:</p>

</body></html>

จากตัวอย่างภาพที่ 2 มีการกั้นเขตด้วยคุณสมบัติ over flow ส่วนที่เลยนั้นสามารถดูได้โดยเลื่อนแถบ scrollbar

vertical-align:

คุณสมบัติที่มช้จัดเรียงข้อมูลในแนวตั้ง ดังตาราง

ค่า ความหมาย

baseline จัดในตำแหน่งเส้นฐานเดียวกับแท็กพ่อ

sub จัดเรียงเป็นตัวห้อย

super จัดเรียงเป็นตัวยก

top จัดเรียงชิดขอบด้านบนของวัตถุที่มีขอบสูงที่สุดในแถว

text-top จัดเรียงชิดขอบด้านบนของตัวอักษรในแท็กพ่อ

middle จัดเรียงที่จุดกึ่งกลางของตัวอักษรในแท็กพ่อ

bottom จัดเรียงชิดขอบด้านล่างของวัตถุที่ขอบล่างต่ำสุดในแถว

text-bottom จัดเรียงชิดขอบล่างของตัวอักษรในแท็กพ่อ

length กำหนดเป็นค่าตัวเลขเจาะจง เช่น 25px, 10in

% กำหนดเป็นเปอร์เซ็นต์เทียบกับค่าในคุณสมบัติ line-height

position05.htm

<p>This is <b style="vertical-align:baseline">baseline.</b></p>

<p>This is <b style="vertical-align:sub">subscript.</b></p>

<p>This is<b style="vertical-align:super">superscript,</b></p>

<p><img border="0" scr="picture/img001.jpg" width="60" height="32">This is<b style="vertical-align:middle; font-size:150%>middle.</b></p>

<p><img border="0" scr="picture/img001.jpg width="60" height="32" style="vertical-align:text-top">This is<b style="vertical-align:bottom; font-size:120%>bottom.</b></p>

<p><img border="0" scr="picture/img001.jpg" width="60" higth="32" style="vertical-align:text-top">This is <b style="vertical-align:text-bottom; font-size:120%">text-bottom.</b></p>

z-index:

ใช้จัดลำดับชั้นของข้อมูล โดยกำหนดค่าเป็นแนว Z ซึ่งจะทำให้ข้อมูลมีการซ้อนทับกัน สำหรับค่าที่กำหนดได้คือ auto (กำหนดค่าแกน Z ให้เท่ากับแท็กพ่อ และกำหนดค่าแกน Z เป็นตัวเลขบวกลบ โดยค่าบวกจะได้ข้อมูลซ้อนอยู่ด้านบน ส่วนค่าลบจะซ้อนอยู่ด้านล่าง คุณสมบัติ z-index ต้องใช้ร่วมกับคุณสมบัติ position:absolute เสมอ

positiono6.htm

img.x1 {position:absolute; left:0px; top:40px; z-index:-1}

img.x2 {position:absolute; lefy:110px; top:40px; z-index:1 }

</style>

</head><body>

<p>Default z-index is 0. Z-index -1 has lower priority. Z-index 1 has higher priority.</p>

<h1>This is a Heading</h>

</body></html>

วันพุธที่ 11 มกราคม พ.ศ. 2555

CSS - Size&Position

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

แสดงความคิดเห็น