สไตล์ชีท(style sheet)
ในการใช้งาน CSS เราจำเป็นที่จะต้องศึกษาถึงคุณสมบัติ (Property) ที่สามารถกำหนดได้เสียก่อนซึ่งคุณสมบัติเหล่านี้จะมีรูปแบบในการกำหนดค่า (Value) ที่แตกต่างกันโดยแบ่งออกเป็นกลุ่ม ๆ ได้ดังนี้
-คุณสมบัติเกี่ยวกับหน่วยวัด
-คุณสมบัติเกี่ยวกับตัวอักษร
-คุณสมบัติเกี่ยวกับสีและพื้นฉากหลัง
-คุณสมบัติเกี่ยวกับข้อความและย่อหน้า
-คุณสมบัติเกี่ยวกับกรอบ
10.2.1 คุณสมบัติเกี่ยวกับหน่วยวัด
มีบางคุณสมบัติที่ต้องเกี่ยวข้องกับหน่วยวัดซึ่งหน่วยวัดที่สามารถกำหนดได้จะมีดังนี้
-หน่วยเปอร์เซ็นต์, percentage (%)
-หน่วยมิลลิเมตร, millimeter (mm.)
-หน่วยเซ็นติเมตร, Centimeter (cm.)
-หน่วยนิ้ว, inch (in.)
-หน่วยพอยท์, point (pt.) โดย 1 พอยท์เท่ากับ 172 นิ้วหน่วยพิก้า, pica (pc.) โดย 1 พิก้าเท่ากับ 12 พอยท์
-หน่วยพิกเซล, pixel (px.) โดย 1 พิกเซลคือ 1 จุดบนจอภาพหรือ เท่ากับ1196 นิ้วใน CSS3
-หน่วย em โดย 1 em เท่ากับขนาดตัวอักษรขณะนั้น
-หน่วย ex โดย 1 ex เท่ากับขนาดตัวอักษร x ตัวพิมพ์ เล็กในแบบอักษรนั้นโดยประมาณ (x-height)
ตัวอย่างเช่น
font-size: 24pt;
font-size: 5pc;
margin: 2mm;
10.2.2 คุณสมบัติเกี่ยวกับตัวอักษร
การกำหนดคุณสมบัติเกี่ยวกับตัวอักษร จะประกอบด้วย
การกำหนดแบบอักษร
รูปแบบ font-family: ชื่อแบบอักษร:
ชื่อแบบอักษร หมายถึง ชื่อฟอนต์แต่ละฟอนต์ที่ใช้ได้บนเบราว์เซอร์ชื่อแบบอักษร
ตัวอย่างเช่น
font-family: AngsanaUPC;
font-family: CordiaNew;
font-family: Comic Sans MS;
การกำหนดขนาดของตัวอักษร
รูปแบบ font-size: ขนาดของตัวอักษร
ขนาดของตัวอักษร ประกอบด้วยค่าดังนี้
XX-small, x-small, small, medium, large, x-large,และ xx-large
เมื่อขนาตจะไล่จากเล็กไปใหญ่ดังรูป
xx-small | x-small | small | medium | large | X-large | XX-large
โดยค่าปกติจะเป็น medium
ตัวเลข หมายถึง ค่าของตัวเลขความสูงมาตรฐานอยู่ในช่วง 1-7
ตัวเลขหน่วยวัด หมายถึง ตัวเลขความสูงพร้อมหน่วยวัดตวเลข
ตัวอย่างเช่น
font-size: large;
font-size: 10pt;
การกำหนดความสูงของบรรทัด
รูปแบบ line-heigh: ความสูงของบรรทัด
ความสูงของบรรทัด ประกอบด้วยคำดังนี้
normal หมายถึง ความสูงของบรรทัดปกติ (เป็นค่าปกติ)
ตัวเลข หมายถึง ตัวเลขที่นำไปคูณกับความสูงตัวอักษรขณะนั้น
ตัวเลขหน่วยวัด หมายถึง ตัวเลขคววามสูงที่แน่นอนพร้อมหน่วยวัด
ตัวเลข% หมายถึง ตัวเลขเปอร์เซ็นของความสูงตัวอักษรขณะนั้น
ตัวอย่างเช่น line-height: 15px;
line-height: 120%
การกำหนดความหนาของตัวอักษร
รูปแบบ font-weight: ความหนาของตัวอักษร;
ความหนาของตัวอักษร ประกอบด้วยค่าดังนี้
normal หมายถึง ตัวปกติ
lighter หมายถึง ตัวบาง
bold หมายถึง ตัวหนา
bolder หมายถึง ตัวหนาขึ้นอีก
ตัวเลข หมายถึง กำหนดเป็นตัวเลข 100-900 เพื่อบอกระดับความหนาโดย 100 จะบางสุด และ 900 จะหนาสุด
ตัวอย่างเช่น font-weight: light;
font-weight: extra-bold;
กำหนดลักษณะของอักษรตัวเอน
รูปแบบ font-style; ลักษณะตัวอักษร;
ลักษณะตัวอักษร ประกอบด้วยค่าดังนี้
normal หมายถึง อักษรปกติ
italic หรือ oblique หมายถึง ตัวอักษรเอน
ตัวอย่างเช่น font-style: italic;
font-style: normal;
การกำหนดลักษณะตัวพิมพ์ของตัวอักษร
รูปแบบ font-variant: ลักษณะตัวพิมพ์;
ลักษณะตัวพิมพ์ ประกอบด้วยค่าดังนี้
normal หมายถึง อักษรปกติ
small-caps หมายถึง ตัวพิมพ์ตัวใหญ่ที่มีขนาดเล็กกว่าธรรมดา
ตัวแรกของคำจะเป็นตัวใหญ่ขนาดปกติ ตัวถัดมาจะเป็นตัวใหญ่เช่นกันแต่มีขนาดเล็กกว่า
ตัวอย่างเช่น font-variant: small-caps;
การกำหนดลักษณะโดยรวมของตัวอักษร
รูปแบบ font:ลักษณะโดยรวมของตัวอักษร;
ลักษณะโดยรวมของตัวอักษร
ได้แก่ font-style font-weight font-variant font-size (หรือ line-height) font-family ซึ่งเราสามรถสั่งรวมกันในคุณสมบัติ font ในคราวเดียว
{font: style weight variant size/line-height fontn-family}
ตัวอย่างเช่น font: AngsanaUPC medium italics 10pt;
font: obligue bold small-caps 1.5em Verdana,sans-serif
10.2.3 คุณสมบัติเกี่ยวกับชีและพ้นภายหลัง
การกำหนดคุณสมบัติเกี่ยวกับสีและพื้นฉากหลังจะประกอบด้วย
การกำหนดสีให้กับตัวอักษร
รูปแบบ color:; สี
สี สามารถกำหนดได้โดยใช้ชื่อของสีมาตรฐานหรือกำหนดจากรหัสเลขฐานสิบหก
ตัวอย่างเช่น color: pink
color: #FFCCB, หมายถึง สีชมพู
การกำหนดสีในระบบ RGB และ RGB (a)
รูปแบบ color: rgb (F, 9, 6, ความโปร่งแสง):
color: rgba (P. g. b, ความโปร่งแสง):
r หมายถึง ระดับของสีแดง (red) กำหนดเป็นตัวเลข 0-255
g หมายถึง ระดับของสีเขียว (green) กำหนดเป็นตัวเลข 0-255
b หมายถึง ระดับของสีฟ้า (blue) กำหนดเป็นตัวเลข 0-255 ความโปร่งแสง หมายถึง กำหนดเป็นตัวเลข 0-255 กำหนดค่าความโปร่งแสงมีค่าในช่วง 0-1 หากกำหนดเป็น 0 จะโปร่งแสงมากสุด แต่ถ้าเป็น 1 จะทึบแสง
ตัวอย่างเช่น color: rgb (0, 255, 0);
color: rgba (0, 255, 0, 0.25):
การกาหนดสีในระบบ HSLและ HSL(a))
รูปแบบ color: sih, s.): color: Asta Sh, 8, 4, ความโปร่งแสง),
h(hue) หมายถึง สีที่กำหนดจากวงล้อดีซึ่งกำหนดเป็นตัวเลข 0-360 s(saturation) หมายถึง ความสดของสีกำหนดเป็นตัวเลข 0%-100%
โดย 0% จะเป็นสีที่ม ๆ และ 100% จะสดใส
l(Iightness) หมายถึง ความสว่างของสีกำหนดเป็นตัวเลข 0% -100%, โดย 086 จะเป็นสีดำมีดและ 100% จะขาวสว่าง
ความโปร่งแสง หมายถึง กำหนดค่าความโปร่งแสงมีค่าในช่วง 0-1 หากกำหนดเป็น 0 จะโปร่งแสงมากสุด แต่ถ้าเป็น 1 จะทึบแสง
ตัวอย่างเช่น color: hsla (240, 78%, 50%, 0.25);
การกำหนดสีพื้นหลัง
รูปแบบ background: สี:
สี สามารถกำหนดได้โดยใช้ชื่อของสีมาตรฐาน หรือ กำหนดจากรหัสเลขฐานสิบหก
ตัวอย่างเช่น background: green
background: # 000000; หมายถึง สีเขียว
10.2.4 คุณสมบัติเกี่ยวกับข้อความและย่อหน้า
การกำหนดคุณสมบัติเกี่ยวกับข้อความและย่อหน้า จะประกอบด้วย
การกำหนดช่องไฟระหว่างคำ
รูปแบบ word-spacing: ช่องไฟระหว่างคำ;
ช่องไฟระหว่างคำ หมายถึง การกำหนดตัวเลขระยะห่างระหว่างคำพร้อมหน่วยวัด
ตัวอย่างเช่น word-spacing: 0.5in;
การกำหนดช่องไฟระหว่างตัวอักษร
รูปแบบ letter-spacing: ช่องไฟระหว่างตัวอักษร
ช่องไฟระหว่างตัวอักษร หมายถึง การกำหนดตัวเลขระยะห่างระหว่างตัวอักษรพร้อมหน่วยวัด
ตัวอย่างเช่น
letter-spacing: 8px;
การกำหนดการขีดเส้นข้อความ
รูปแบบ text-decoration: การขีดเส้นข้อความ:
การขีดเส้นข้อความ underline overline line-through blink
ประกอบด้วยตัวเลือกดังนี้หมายถึงขีดเส้นใต้ข้อความหมายถึงขีดเส้นเหนือข้อความหมายถึงขีดเส้นพาดกลางข้อความหมายถึงท่าตัวอักษรกระพริบ
ตัวอย่างเช่น text-decoration: underline;
text-decoration: line-through;
การทำตัวอักษรแบบมีเงา
รูปแบบ text-shadow:
offset-x, หมายถึง ระยะของเงาในแนวนอน (ซ้าย-ขวา) ที่ห่างจากตัวอักษร
offset-y, หมายถึง ระยะของเงาในแนวตั้ง (ขึ้น-ลง) ที่ห่างจากตัวอักษร
blur หมายถึง กำหนดระดับความเบลอของเงาหากเป็น Opx จะไม่เบลอ จะได้เงาที่มีความเข้มเหมือนตัวอักษรต้นแบบ,
color: offset-x หมายถึง กำหนดสีให้กับเงาปกติมักใช้เป็นสีเทาดำ
offset-y blur color
ตัวอย่างเช่น
text-shadow:
0px 6px 6px rgb (51,51,51);
Text Shadow
การปรับเปลี่ยนรูปแบบตัวพิมพ์
รูปแบบ text-transform:
รูปแบบตัวพิมพ์; รูปแบบตัวพิมพ์อาจเป็น
capitalize lowercase uppercase หมายถึงหมายถึงตัวแรกเป็นตัวพิมพ์ใหญ่ที่เหลือเป็นตัวพิมพ์เล็กเป็นตัวพิมพ์เล็กทั้งหมดเป็นตัวพิมพ์ใหญ่ทั้งหมด
ตัวอย่างเช่น text-transform: lowercase:
การกำหนดการจัดวางข้อความในย่อหน้า
รูปแบบ text-align: การจัดวางข้อความ:
การจัดวางข้อความประกอบด้วยตัวเลือกดังนี้
left หมายถึง จัดวางข้อความให้อยู่ชิดซ้ายบรรทัด
right หมายถึง จัดวางข้อความให้อยู่ชิดขวาบรรทัด
center หมายถึง จัดวางข้อความให้อยู่กึ่งกลางบรรทัด
justify หมายถึง จัดวางข้อความชิดขอบซ้ายและขวา
ตัวอย่างเช่น
text-align: left;
การกำหนดระยะเยื้องของบรรทัดแรกของย่อหน้า
รูปแบบ text-indent: ระยะเยื้อง
หมายถึงการกำหนดตัวเลขของระยะเยื้องของข้อความบรรทัดแรกของย่อหน้าพร้อมหน่วยวัด
ตัวอย่างเช่น text-indent: 20px;
การจัดวางตัวอักษรในแนวตั้ง
รูปแบบ vertical-align: ลักษณะการจัดวาง;
ลักษณะการจัดวาง baseline super sub ประกอบด้วยตัวเลือกดังนี้
หมายถึงจัดวางข้อความให้ติดขอบล่างของบรรทัดหมายถึงจัดวางข้อความให้อยู่เหนือบรรทัดหมายถึงจัดวางข้อความให้อยู่ใต้บรรทัดหมายถึงจัดวางข้อความให้ติดขอบบนของบรรทัดหมายถึงจัดวางข้อความให้อยู่กึ่งกลางบรรทัดหมายถึงจัดวางข้อความให้อยู่ติดขอบล่างของบรรทัด top middle bottom การกำหนดระยะขอบรูปแบบ margin-left: ระยะขอบ; margin-right: ระยะขอบ; margin-top: ระยะขอบ; เมื่อ margin-left หมายถึง margin-right หมายถึง margin-top หมายถึงระยะขอบหมายถึงกั้นขอบด้านซ้ายกั้นขอบด้านขวากันขอบด้านบนตัวเลขระยะขอบพร้อมหน่วยวัด 10.2.5 คุณสมบัติเกี่ยวกับกรอบการกำหนดคุณสมบัติเกี่ยวกับกรอบจะประกอบด้วย
การจัดวางตัวอักษรในแนวตั้ง
รูปแบบ vertical-align: ลักษณะการจัดวาง;
ลักษณะการจัดวาง baseline super sub ประกอบด้วยตัวเลือกดังนี้หมายถึงจัดวางข้อความให้ติดขอบล่างของบรรทัดหมายถึงจัดวางข้อความให้อยู่เหนือบรรทัดหมายถึงจัดวางข้อความให้อยู่ใต้บรรทัดหมายถึงจัดวางข้อความให้ติดขอบบนของบรรทัดหมายถึงจัดวางข้อความให้อยู่กึ่งกลางบรรทัดหมายถึงจัดวางข้อความให้อยู่ติดขอบล่างของบรรทัด top middle bottom การกำหนดระยะขอบรูปแบบ margin-left: ระยะขอบ; margin-right: ระยะขอบ; margin-top: ระยะขอบ; เมื่อ margin-left หมายถึง margin-right หมายถึง margin-top หมายถึงระยะขอบหมายถึงกั้นขอบด้านซ้ายกั้นขอบด้านขวากันขอบด้านบนตัวเลขระยะขอบพร้อมหน่วยวัด 10.2.5 คุณสมบัติเกี่ยวกับกรอบการกำหนดคุณสมบัติเกี่ยวกับกรอบจะประกอบด้วย
การกำหนดรูปแบบของเส้นกรอบรูปแบบ
border-style: รูปแบบของเส้นกรอบ;
รูปแบบของเส้นกรอบ ประกอบด้วยค่าดังนี้
ตัวอย่างเช่น border-style: solid;
การกำหนดคุณสมบัติของกรอบในคราวเดียว
ทางลัดในการกำหนดคุณสมบัติต่าง ๆ ของกรอบก็คือการใช้คุณลักษณะ border ตามด้วยค่าที่ต้องการกำหนดโดยเรียงจาก size, color, Style ตามลำดับเช่น border: 2px green solid เราสามารถสั่งแบบนี้ได้ก็ต่อเมื่อด้านของกรอบมีคุณสมบัติเหมือนกันทั้งสี่ด้าน
การกำหนดรูปแบบเฉพาะด้านใดด้านหนึ่งของเส้นกรอบ
โดยปกติเมื่อมีการกำหนดคำสั่งในการจัดรูปแบบให้กับเส้นกรอบจะมีผลกับเส้นกรอบทั้งสี่ด้าน แต่ถ้าหากเราต้องการจัดรูปแบบเฉพาะด้านใดด้านหนึ่งให้ใส่ด้านที่ต้องการเช่น top, right, -left, หรือ bottom ลงระหว่างคำว่า border กับคุณสมบัติที่กำหนดเช่น border-style: solid; border-top-color: blue; นอกจากนี้เรายังสามารถกำหนดค่าให้กับแต่ละด้านของกรอบให้แตกต่างกันได้ในคราวเดียวโดยกำหนดค่าแต่ละด้านเรียงตามลำดับโดยเริ่มจากด้านบนแล้ววนขวาเรียกว่า“ TRouBLe "ซึ่งแทน Top Right Bottom Left เช่น border-width: 2px 4px 4px 2px;
การกำหนดกรอบแบบมุมมน
รูปแบบ border-radius: ความมันความมน
เป็นการกำหนดระยะรัศมีของความโค้งที่จะปรับมุมของกรอบตัวอย่าง {background-color: # 999; border: 6px solid # 000; border-radius: 40px;}
การใส่เงาให้กับกรอบ
รูปแบบ box-shadow:
offset-x, offset-y, blur, color; offset-x offset-y
หมายถึงหมายถึงหมายถึงระยะของเงาในแนวนอน (ซ้าย-ขวา) ที่ห่างจากเส้นกรอบระยะของเงาในแนวตั้ง (ขึ้น-ลง) ที่ห่างจากเส้นกรอบกำหนดระดับความเบลอของเงากำหนดสีให้กับเงาปกติมักใช้เป็นสีเทาดำ blur color ตัวอย่าง box-shadow: 0px 0px 12px 6px rgb (0,0,0);
10.3 การกำหนด Selector
Selector เป็นส่วนหนึ่งใน CSS Rule ที่ใช้ในการกำหนดองค์ประกอบที่จะจัดรูปแบบ 1. Type Selector 2. Class Selector 3. ID Selector 10.3.1 mskua Type Selector เป็นการจัดรูปแบบให้กับองค์ประกอบต่าง ๆ เช่นส่วนของแท็กคำสั่งใน HTML เช่น <p>, <h1> เป็นต้นตัวอย่างเช่นการจัดรูปแบบแท็ก h1 ให้แสดงผลข้อความด้วยสีเขียว h1 {color: green;} ในกรณีที่เราต้องการกำหนดคุณสมบัติหลาย ๆ คุณสมบัติให้กับแท็กเดียวกันเราสามารถเขียน CSS Rule รวมกันได้เช่น h1 {color: blue;} h1 {font-family: Arial;} h1 {font-size: 3em;} เขียนรวมกันได้เป็น h1 {color: blue; font-family: Arial; font-size: 3em;} หรือ h1 {color: blue; font-family: Arial; font-size: 3em;} โดยทุกคุณสมบัติต้องอยู่ในเครื่องหมาย () เดียวกันและแต่ละ declaration ต้องปิดด้วยเครื่องหมายเซมิโคล่อน
ในกรณีที่เราต้องการกำหนดคุณสมบัติเดียวกันให้กับหลาย ๆ แท็กก็สามารถเขียน CSS Rule รวมกันได้เช่น
h1, h2, h3 {color: red; font-family: Arial;}
10.3.2 การกำหนด Class Selector
การกำหนดสไตล์โดยใช้ Selector แบบ Class จะเป็นการกำหนดรูปแบบของสไตล์ขึ้นก่อนโดยกำหนดอยู่ภายในคำสั่งหลัก <style> ซึ่งมีการกำหนดรูปแบบดังนี้
รูปแบบ <style> เชื่อสไตล์ Class {รูปแบบที่กำหนด} </ style> โดยที่ชื่อสไตล์ Class จะใช้จุด "" (full stop) นำหน้าชื่อสไตล์เพื่อกำหนดเป็นชื่อ Class สไตล์แบบ Class นี้จะสามารถนำไปใช้ได้กับหลาย ๆ องค์ประกอบที่ต้องการโดยอ้างถึงชื่อ Class เดียวกันได้
ตัวอย่างการกำหนดสไตล์แบบ Class
<style>
.paral {font-family: AngsanaUPC; font-weight: bold;
font-size: 20px; color: red;}
</ style>
10.4 การใช้งาน CSS
การใช้งาน css-มีอยู่ 3 ลักษณะคือ 1. การกำหนดสไตล์ร่วม (Embedded Style Sheet) 2. การกำหนดสไตล์เฉพาะที่ (Inline Style Sheet) การใช้สไตล์ชีทจากภายนอก (Linked Style Sheet)) 3. 10.4.1 การกำหนดส le แล์ร่วม (EmbeddedStyleSheet) เป็นการกำหนดรูปแบบที่ต้องการโดยใช้คำสั่งหลัก style ในการกำหนดรูปแบบให้กับคำสั่ง HTML ใด ๆ เพื่อให้แสดงผลแตกต่างไปจากค่าปกติเดิมโดยส่วนที่กำหนดนี้จะถูกกำหนดไว้ล่วงหน้าในส่วนต้นก่อนที่จะเข้าสู่ส่วนของ <body> เพื่อที่ว่าจะสามารถอ้างอิงถึงสไตล์ที่กำหนดไว้นี้ได้เมื่อต้องการในภายหลังการกำหนดคำสั่ง <style> </ style> ให้วางคำสั่งไว้ระหว่างคำสั่ง <html> กับ <body> โดยเขียนต่อจากคำสั่ง </ head> มีรูปแบบดังนี้ **** <html> <head> <title> </ title> </ head> <style> CSS Rule </ style> <body> </ body> </ html> โดยที่ <style> ... </ style> เป็นแท็กคำสั่งที่ใช้
กำหนดรูปแบบสไตล์การจัดรูปแบบตามรูปแบบของ Css CSS Rule
10.5 การจัดรูปแบบเฉพาะบางส่วนของข้อความด้วยคำสั่ง
<span> คำสั่ง <span> เป็นคำสั่งที่ถูกสร้างขึ้นมาเพื่อให้ใช้ในการกำหนดคุณสมบัติของสไตล์ชีทใช้ในกรณีที่เราต้องการเปลี่ยนรูปแบบสไตล์เฉพาะส่วนใดส่วนหนึ่งของข้อความเอกสารเรียกว่า Inline Span มีรูปแบบดังนี้
รูปแบบ <span style = "รูปแบบที่กำหนด; ...... " S ข้อความเอกสาร ..... </ span> คำสั่ง span นี้ยังสามารถกำหนดร่วมกับสไตล์แบบ Class และ ID ได้ด้วย 10.5.1 การกำหนด Inline Span ปัญหาในการนำแท็กรุ่นเก่า ๆ เช่น <b>, <i>, และ <del> มาใช้ร่วมกับการกำหนดสไตล์แยกเฉพาะบางส่วนก็คือคำสั่ง style = จะต้องถูกเขียนลงในแท็กที่มีอยู่แล้วตัวอย่างเช่นเราจะทำอย่างไรหากต้องการให้คำบางคำในข้อความเป็นตัวหนาดังเช่น <p> I had a <b> great </ b> time. </ p> จะเห็นว่าคำว่า great ไม่มีแท็กครอบอยู่จึงไม่สามารถใส่คำสั่ง style = ลงไปได้ทางแก้ก็คือการใช้คำสั่งซึ่งเป็นเสมือนตัวครอบลงในส่วนที่เราต้องการกำหนดคุณลักษณะใด ๆ ที่ต้องการลงไปซึ่งจากตัวอย่างข้างต้นเราจะแก้ไขได้ดังนี้ span <p> I had a <span style = "text-weight: bold"> great </ span> time. </ p> แม้ว่าคำสั่งจะยาวสักหน่อย แต่ก็จำเป็นซึ่งหากต้องจัดรูปแบบเช่นนี้หลาย ๆ จุดเราอาจใช้ Class เข้ามาช่วยเพื่อให้สะดวกขึ้นเช่นกำหนดสไตล์แบบ Class ในส่วนของแท็ก <style> .boldtext {text-weight: bold} จากนี้หากส่วนใดของข้อความต้องการเป็นตัวหนาให้สั่งดังนี้ <span class = "boldtext"> ข้อความ </ span>
