Moncy Services

วันอังคารที่ 3 มกราคม พ.ศ. 2555

CSS - Font

ในสไตล์ สามารถกำหนดรูปแบบตัวอักษรในแท็กใดก็ได้ โดยมีข้อกำหนดดังนี้

color:

รูปแบบ

color:red	ใช้สีเป็นภาษาอังกฤษ
color:#ff4467	ใช้รหัสเลขฐานสิบหก
color:rbg(203,78,0)	ใช้รหัสเลขฐานสิบ
color:rbg(0%,100%,0%)	ใช้รหัสเลขฐานสิบเป็นเปอร์เซ็นต์

font-family:

กำหนดฟอนต์ตัวอักษรให้กับแท็กนั้นๆ และสามารถกำหนดได้มากกว่า 1 ฟอนต์ โดยใช้ comma (,) คั่นชื่อฟอนต์แต่ละตัว เช่น

font-family:AngsanaUPC, LilyUPC,CordiaUPC

จากตัวอย่างบราวเซอร์จะค้นหาชื่อฟอนต์จากซ้ายไปขวาจนกว่าจะพบฟอนต์ที่มีอยู่จริงในคอมพิวเตอร์องผู้เยี่ยมชม

font-size:

สามารถกำหนดขนาดได้ดังนี้

ค่า	ความหมาย
xx-small	กำหนดขนาดตามคำศัพท์ คล้ายขนาดเสื้อจากเล็กสุดไปใหญ่สุด
x-small
small
medium
large
x-large
xx-large
smaller	กำหนดให้มีขนาดเล็กกว่าขนาดฟอนต์ในแท็กพ่อ
larger	กำหนดให้มีขนาดใหญ่กว่าขนาดฟอนต์ในแท็กพ่อ
length	กำหนดเป็นค่าตัวเลขเจาะจง เช่น 10 px, 2in, 3pc
%	กำหนดเป็นค่าเปอร์เซ็นต์เทียบขนาดฟอนต์ในแท็กพ่อ เช่น 200% คือใหญ่ขึ้น 2 เท่า

ตัวอย่าง font01.html

<html>

<body>

<font color=olive size=4>ตัวอักษรสีเขียวมะกอก ขนาดระดับ 4 เท่าจากปกติ</font><br>

<font color=#af70b0 size=5>ตัวอักษรสีม่วง ขนาดระดับ 5 จากปกติ</font><br>

<font size=6>ตัวอักษรสีดำ ขนาดระดับ 6 เท่า จากปกติ</font><br>

<font color=#00a9ff size=7>ตัวอักษรสีฟ้า ขนาดระดับ 7 เท่า จากปกติ</font><br>

<font style="#0000ff; font-size:3.5cm">ขนาด3.5 เซ็นติเมตร</font><br>

</font>

</body>

</html>

font-style:

กำหนดรูปแบบของฟอนต์ มีค่าเป็นไปได้คือ normal (ปกติ), oblique (เอียง 45 องศา), italic (เอียง) มีรูปแบบดังนี้

font-style: normal	แสดงตัวอักษรปกติ
font-style: oblique	แสดงตัวอักษรเอียง 45 องศา
font-style: irtalic	แสดงตัวอักษรเอียง

font-variant:

ใช้กำหนดลักษณะตัวพิมพ์ใหญ่ให้ภาษาอังกฤษ มี 2 แบบคือ normal (ไม่เปลี่ยนแปลง) และ small-caps (แปลงตัวพิมพ์เล็กเป็นตัวพิมพ์ใหญ่ทั้งหมด) มีรูปแบบดังนี้

font-variant: normal	แสดงตัวอักษรปกติ
font-variant: small-caps	แสดงตัวอักษรเป็นตัวพิมพ์ใหญ่ทั้งหมด

font-weight:

กำหนดความหนาของตัวอักษร ค่าที่เป็นไปได้ คือ normal (ปกติ), lighter (บางมาก) bold (หนา), bolder (หนามาก) และค่าตัวเลข 9 จำนวน คือ 100, 200, 300, 400, 500, 600, 700, 800, 900 โดยค่า 100 มีขนาดเท่ากับ normal มีรูปแบบดังนี้

font-weight: normal	แสดงตัวอักษรปกติ
font-weigjt: bold	แสดงตัวอักษรหนา
font-weight: 900	แสดงตัวอักษรหนามาก
font-weight: 90in	ไม่สนับสนุนการระบุโดยใช้หน่วย

font:

เป็นการกำหนดคุณสมบัติรวมๆ ของฟอนต์ มีรูปแบบดังนี้

font: oblique small-caps lighter;

ตัวอย่าง font02.htm

p.normal {font: oblique small-caps lighter}

p.thick {font: italic 500}

p.thicker {font-style: italic; font-variant: small-caps; font-weight:900}

</style>

</head>

<body>

<p class="normal"> This is a paragraph</p>

<p class="thick"> This is a paragraph</p>

<p class="thicker"> This is a paragraph</p>

</body>

</html>

letter-spacing:

ใช้กำหนดระยะห่างของตัวอักษร ถ้าเป็นค่าลบตัวอักษรจะติดกัน ถ้าเป็นค่าบวกตัวอักษรจะอยู่ห่างกัน

font03.htm

<html>

<head>

span.highlight {letter-spacing: -2px; background-color: yellow}

</style>

</head>

<body>

<p>

This is a text. This is a text. This is a text.

</p>

</body>

</html>

text-align:

ใช้จัดเรียงข้อความ มีค่าที่เป็นไปได้ คือ left (ชิดซ้าย), right (ชิดขวา), center (ตรงกลาง), justify (จัดเต็มพื้นที่)

text-decoration:

ใช้ตกแต่งข้อความ มีค่าที่เป็นไปได้ คือ none (ไม่ตกแต่ง), underline (ขีดเส้นใต้), overline (ขีดบนตัวอักษร), line-through (ขีดคร่อมตัวอักษร) และ blink (กระพริบ)

font04.htm

<p style="text-align:center; text-decoration:underline">ขีดเส้นใต้</p>

<p style="text-align:right ; text-decoration:overline">ขีดเส้นเหนือ</p>

<p style="text-align:justify; text-decoration:line-through">ขีดคร่อม</p>

<p style="text-align:left; text-decoration:blink">กระพริบ</p>

text-indent:

ใช้กำหนดย่อหน้า โดยกำหนดเป็นตัวเลขเจาะจง เช่น 80px, 5pt หรือ 10% (เทียบกับขนาดของแท็กพ่อ) ก็ได้

text-transform:

ใช้แปลงตัวอักษร ค่าที่เป็นไปได้คือ none (ไม่มีการเปลี่ยนแปลง), capitalize (เปลี่ยนเฉพาะตัวแรกของคำให้เป็นตัวพิมพ์ใหญ่), uppercase (เปลี่ยนทุกตัวให้เป็นตัวพิมพ์ใหญ่), lowercase (เปลี่ยนทุกตัวให้เป็นตัวพิมพ์เล็ก)

font05.htm

This is some text in a paragraph This is some text in a paragraph

</p>

This is some text in a paragraph This is some text in a paragraph

</p>

This is some text in a paragraph This is some text in a paragraph

</p>

white-space:

ใช้จัดการช่องว่าง มีค่าที่เป็นไปได้ คือ normal (นับช่องว่างติดกันทั้งหมดเป็น 1 ช่องว่าง), pre (เหมือนการใช้แท็ก <pre> คือ ช่องว่าติดกันจะไม่นับเป็น 1 ช่องว่าง จะคงค่าช่องว่างเดิมไว้) และ nowrap (ไม่ขึ้นบรรทัดใหม่จนกว่าจะพบแท็ก <br>)

word-spacing:

คล้าย letter-spacing แต่ใช้จัดการระยะห่างของคำ ถ้าค่าเป็นลบคำจะอยู่ติดกัน ถ้าค่าเป็นบวกคำจะอยู่ห่างกัน

Font06.htm

<pre>

This is some text in a paragraph

</pre>

white-space:normal<br>

This is some text in a paragraph

</p>

<p style>=”white-space:pre”>

white-space:pre<br>

This is some text in a paragraph

</p>

white-space:nowrap<br>

This is some text in a paragraph

</p>

CSS - Background

ทุกแท็กใน HTML สามารถใส่สีหรือรูปเป็นพื้นหลังได้ เช่น <body>, <table>, <font>, <butt0n>, <textarea>, <span>, <p>, <div> เป็นต้น แต่การกำหนดรูปแบบด้วย HTML อย่างเดียวไม่พอ ต้องนำสไตล์ชีตมาช่วยด้วย

background-image:url

เป็นคุณสมบัติที่ใช้กำหนดพื้นหลังรูปภาพ โดยระบุเส้นทางและชื่อไฟล์ใน url เช่น

background01.htm

body {background-image:url('picture/bg01.jpg')}

textarea {background-image:url('picture/bg02.jpg')}

</style>

</head>

<body><textarea>ทดสอบสไตล์ background-image</textarea></body>

</html>

จะกำหนดสไตล์ล่วงหน้าที่แท็ก <head> ฉะนั้นในแท็กอื่นๆ ของเอกสาร HTML ทุกแท็กจะใช้สไตล์นี้ทั้งหมด

background02.htm

<html>

<textarea style=”background-image:url('picture/bg02.jpg')">ทดสอบสไตล์ backgroundn-image</textarea>

</body>

</html>

เป็นสไตล์เฉพาะตัวของแท็กนั้น ไม่มีผลกับแท็กอื่น

background-color:

เป็นการกำหนดคุณสมบัติของสีพื้นหลัง โดยใช้ชื่อสี เช่น black, blue หรือรหัสเลขฐานสิบหก เช่น #0000ff หรือรหัสเลขฐานสิบ เช่น rbg(0,0,255) เป็นต้น

รูปแบบการใช้งาน

background-color:back	ใช้ชื่อสีเป็นภาษาอังกฤษ
background-color:#0000ff	ใช้รหัสเลขฐานสิบหก
background-color:rgb(0,255,0)	ใช้รหัสเลขฐานสิบ
background-color:rgb(0%,100%,0%)	ใช้รหัสเลขฐานสิบแบบคิดเป็นเปอร์เซ็นต์

การโหลดไฟล์ HTML ของบราวเซอร์จะโหลดสีพื้นหลังก่อนเสมอ

background-attachment:

เป็นคุณสมบัติที่ใช้ยึดพื้นหลังมีค่าที่เป็นไปได้คือ fixed ค่านี้จะช่วยให้ภาพพื้นหลังอยู่ตำแหน่งเดิมเมื่อเราเลื่อนหน้าเพจ และอีกค่า คือ scroll ค่านี้จะทำให้ภาพเลื่อนตามเนื้อหาของเพจ ปกติจะกำหนดเป็นค่า scroll

background-attachment:fixed

background-repeat:

เป็นคุณสมบัติในการแสดงภาพซ้ำ

รูปแบบการใช้งาน

background-repeat:repeat	แสดงภาพเต็มพื้นที่
background-repeat:repeat-x	แสดงภาพซ้ำในแนวนอน
background-repeat:repeat-y	แสดงภาพซ้ำในแนวตั้ง
background-repeat:no-repeat	แสดงภาพเพียงภาพเดียว

background-position:

ใช้กำหนดพิกัดหรือตำแหน่งของภาพ เพื่อใช้ในการวางรูปพื้นหลัง สามารถกำหนดได้ดังนี้

top left	กำหนดตำแหน่งตามความหมายคำศัพท์ เช่น center center คือตรงกลวงหน้าจอ (ถ้ากำหนดแค่คีย์เวิร์ดแรกไม่กำหนดคีย์เวิร์ดตัวที่สอง จะถือว่าคีย์เวิร์ดตัวที่สองเป็น center เสมอ เช่น top จะหมายถึง top center)
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%	กำหนดตำแหน่งเป็นเปอร์เซ็นต์ โดยมุมบนซ้ายของเอกสารจะเป็นตำแหน่ง 0% 0% มุมล่างขวาจะเป็น 100% 100% และตรงกลางจะเป็น 50% 50% (ถ้าใส่ค่าแรกค่าเดียวค่าที่สองจะเป็น 50% เสมอ)
x-pos y-pos	กำหนดตำแหน่งเป็นตัวเลขเจาะจง เช่น 0 0 คือมุมบนซ้าย ส่วนล่างขวาไม่สามารถเจาะจงได้ เพราะขึ้นอยู่กับขนาดจอบนบราวเซอร์ และเราสามารถผสมระหว่างตัวเลขกับเปอร์เซ็นต์ หรือคำศัพท์กับตัวเลขก็ได้ เช่น top 250

รูปแบบการกำหนดค่า

background-position:top	ภาพจะอยู่ตำแหน่ง top center
background-position: 50% 0%	ภาพจะอยู่ตำแหน่ง 50% แกน x และ 0% แกน y
background-position:right 150px	ภาพจะอยู่ตำแหน่ง 100% แกน c และ 150px แกน y

กรณีกำหนดค่าติดลบ หมายถึงให้ภาพพื้นหลังหลุดขอบไปทางซ้ายหรือข้างบนของขอบเวบ หรือหากมีแท็กพ่อครอบอยู่นั้นหมายถึงหลุดจอบของแท็กพ่อตามจำนวนที่กำหนด เช่น

background-position: 150px -50px นับจากทางขวาที่ตำแหน่งมุมบนซ้าย นับเพิ่มไปอีก 150 จุดสี แล้วจึงเริ่มวางภาพ (px=pixel หรือ จุด)

ในสไตล์ไม่ว่าจะเป็นการกำหนดระยะห่าง หรือขนาดความกว้าง ความยาว ก็จะใช้หน่วยวัดระยะเหมือนกันดังนี้

หน่วย	ความหมาย
%	แสดงระยะหรือขนาดเป็นเปอร์เซ็นต์ เช่น 50%
in	แสดงระยะหรือขนาดเป็นนิ้ว
cm	แสดงระยะหรือเป็นเซ็นติเมตร
mm	แสดงระยะหรือขนาดเป็นมิลลิเมตร
em	แสดงระยะหรือขนาดเป็น em (1em = 1 เท่าของขนาดตัวอักษรในเวลานั้น)
ex	แสดงระยะหรือขนาดเป็น ex (1ex = ครึ่งเท่าของตัวอักษรในเวลานั้น)
pt	แสดงระยะหรือขนาดเป็น point (1pt = 1/72 นิ้ว)
pc	แสดงระยะหรือขนาดเป็น pica (1pc = 12pt = 1/6 นิ้ว)
px	แสดงระยะหรือขนาดเป็น pixels (1px = 1 จุดสีบนจอภาพ)

เราไม่ควรกำหนดค่าระยะหรือขนาดด้วยตัวเลขเปล่า ๆ แต่ควรใส่หน่วยกำกับทุกครั้ง เพื่อป้องกันการสับสนของบราวเซอร์บางตัว

background:

เป็นคุณสมบัติรวมที่สามารถกำหนดหลายๆ คุณสมบัติพร้อมกันได้ ดังนี้

background:url('picture/bg01.jpg') rbg(255,255,255) fixed no-repeat 50px right;

background03.htm

body {background:url('picture/bg01.jpg') rbg(255,255,255) fixed repeat-x 0px 0%}

textarea {background-image:url('picture/bg02.jpg');

background-color:rbg(200,200,200);

background-attachment:fixed;

background-repeat:repeat-y;

background-position: 0px 0px;

height:150 }

</style>

</head>

</html>

การกำหนดคุณสมบัติหลายๆ ตัวพร้อมกันจะใช้ semicolon (;) คั่น ยกเว้นตัวสุดท้ายจะใส่หรือไม่ก็ได้