Embed Size (px)
DESCRIPTION
อธิบายการใช้งาน CSS
Citation preview
หนวยที่ 12งานการใช CSSงานการใช CSS
รูจกั รูจกั รูจกั รูจกั CSSCSSCSSCSS
• แนวคิดของ CSS ก็คือ สมมุติวาผมกําหนดให Style A หมายถึง Font MS Sans Serif ขนาด 10px และมีสีดํา ทุกๆตําแหนงที่ผมใช Font MS Sans Serif ขนาด 10px และมีสีดํา ทุกๆตําแหนงที่ผมใช Style A ก็จะมีรูปแบบตัวอักษรเปนแบบนั้นหมด
• CSS CSS CSS CSS ยอมาจาก ยอมาจาก ยอมาจาก ยอมาจาก Cascading Style SheetsCascading Style SheetsCascading Style SheetsCascading Style Sheets
• CSS CSS CSS CSS จะชวยเขามาควบคุมลักษณะตางๆภายใน HTML ใหงายขึ้น
• โดยปกติคุณสมลักษณะของ HTML จะถูกเก็บไวที่ CSS เพื่อความสะดวกในการจัดการจัดการ
• CSS จะชวยเขามาแกปญหาความยุงยากใน HTML
• CSS จะชวยใหงานที่มีขนาดใหญควบคุมไดงายดาย
• สามารถใชงาน CSS ไดงายดาย เพียงแคประกาศเรียกใชงานสั้นๆ
• สามารถใชหลากหลายคุณลักษณะผาน CSS เพียงแคไฟลเดียว
ตาํแหนงในการกาํหนดสไตลตาํแหนงในการกาํหนดสไตลตาํแหนงในการกาํหนดสไตลตาํแหนงในการกาํหนดสไตลชีทชีทชีทชีทวธิทีี่ วธิทีี่ วธิทีี่ วธิทีี่ 1 1 1 1 การกาํหนดสไตลการกาํหนดสไตลการกาํหนดสไตลการกาํหนดสไตลชทีชทีชทีชทีแบบแบบแบบแบบ EmbeddingEmbeddingEmbeddingEmbedding
เปนการกําหนดสไตลชทีฝงไวในไฟลโคด HTML โดยเราสามารถกําหนดไวในสวนตางๆ ดังนี้
# สวนหวั# สวนหวั
เปน การประกาศ CSS ไวระหวางแทก <head>...</head> ใน HTML ซึ่งการใชรูปนี้จะเปนตนแบบของแทกที่ถูกกําหนด ใหเปนลักษณะเหมือนกัน
รูปแบบ
<head>
<style type = "text/css">
<!- -<!- -
html tag {Property : Value;}
- ->
</style>
</head>
#### ในในในในแทก็แทก็แทก็แทก็แบบแบบแบบแบบ lnlinelnlinelnlinelnline
เปนการกําหนด CSS ไวในแทกของ HTML โดยใชแอททริบิวต "Style" ซึ่งการกําหนดในลักษณะนี้จะสงผลเฉพาะขอมูลในแทกเทานั้น"Style" ซึ่งการกําหนดในลักษณะนี้จะสงผลเฉพาะขอมูลในแทกเทานั้น
รูปแบบ
<html tag style = "Property : Value;"> </html tag>
วธิทีี่ วธิทีี่ วธิทีี่ วธิทีี่ 2 2 2 2 การกาํหนดสไตลการกาํหนดสไตลการกาํหนดสไตลการกาํหนดสไตลชทีชทีชทีชทีแบบ แบบ แบบ แบบ LinkingLinkingLinkingLinking
เปนการกําหนดสไตลชทีไวในอีกไฟลหนึ่ง ซึ่งเปนไฟลกลางและเปนไฟลที่มีสวนขยายหรอืนามสกุลเปน .css สวนในไฟล HTML จะมีการใชแท็ก <link> เพื่อเชื่อมโยงหรืออางถึงไฟลที่เก็บสไตลชีทอีกทีหนึ่ง การใชวิธีนี้จะชวยใหเมื่อเราแกไขที่ไฟลนี้แลว จะมีผลกับทุกไฟลที่ link อยู เมื่อเราแกไขที่ไฟลนี้แลว จะมีผลกับทุกไฟลที่ link อยู
รูปแบบ
<head>
<link rel = "stylesheet" href = "Filename .css" type = "text/css" />
</head>
วธิทีี่ วธิทีี่ วธิทีี่ วธิทีี่ 3 3 3 3 การการการการกาํหนดสไตทชทีกาํหนดสไตทชทีกาํหนดสไตทชทีกาํหนดสไตทชทีแบบ แบบ แบบ แบบ ImportImportImportImport
เปนการกําหนดสไตทชทีไวในอีกไฟลหนึ่งที่มีนามสกุลเปน .css แยกตางหางจากไฟล HTML สวนไฟล HTML จะดึงขอกําหนดเหลานั้นมาใชดวยแท็กคําสัง่ @import วิธีการนี้มีลักษณะคลายๆ กับวิธีการกําหนดสไตทชีทแบบ Link ตางกันเพียงวิธีการ @import ในไฟล HTML ตองสรางดวยแท็กคําสัง่ @import วิธีการนี้มีลักษณะคลายๆ กับวิธีการกําหนดสไตทชีทแบบ Link ตางกันเพียงวิธีการ @import ในไฟล HTML ตองสรางแท็ก <style>…</style> ไวรองรับ และสามารถกําหนด สไตทเฉพาะที่ใชในเพจนี้เพิ่มไดถาตองการ โดยมีตัวอยางวธิีการเรยีกใชและรูปแบบดังนี้
รูปแบบ
<head>
<style>
<!--<!--
@import url("Filename.css");
-->
</style>
</head>
การกาํหนดลกัษณะพืน้หลงัการกาํหนดลกัษณะพืน้หลงัการกาํหนดลกัษณะพืน้หลงัการกาํหนดลกัษณะพืน้หลงั
กาํหนดส ีกาํหนดส ีกาํหนดส ีกาํหนดส ีBackground Background Background Background ดวย ดวย ดวย ดวย CSSCSSCSSCSS
background-color: yellow /* กําหนดสีแบบใสชื่อไปเลย */
background-color: #00ff00 /* กาํหนดแบบ ใสรหัส*ี/background-color: #00ff00 /* กาํหนดแบบ ใสรหัส*ี/
background-color: transparent /* กําหนดแบบ พื้นใสๆ*/
background-color: rgb(250,0,255) /* กําหนดแบบ */
การกาํหนดลกัษณะตวัอักษรและขอความการกาํหนดลกัษณะตวัอักษรและขอความการกาํหนดลกัษณะตวัอักษรและขอความการกาํหนดลกัษณะตวัอักษรและขอความColorColorColorColor
เปนคุณสมบัติทีใชในการกาํหนดสีใหขอความ เชน
Color:red ใชชื่อสีเปนภาษาอังกฤษ
Color:#ff4467 ใชรหัสเลขฐานสิบหกColor:#ff4467 ใชรหัสเลขฐานสิบหก
Color:rgb(203,78,0) ใชรหัสเลขฐานสิบ
Color:rgb(0%,100%,0%) ใชรหัสเลขฐานสิบแบบคิดเปนเปอรเซ็นต
FontFontFontFont----familyfamilyfamilyfamilyเปนคุณสมบัติทีใชกําหนดฟอนตอักษรใหกับแท็กนั้นๆ เราสามารถ
กําหนดมากกวา 1 ฟอนตขึ้นไป เพื่อเปนตัวเลือกในกรณีที่เครื่องผูเยี่ยมชมมีฟอนตนอย ฟอนตตัวแรกไมมี ก็จะใชฟอนตตัวที่สองแทนชมมีฟอนตนอย ฟอนตตัวแรกไมมี ก็จะใชฟอนตตัวที่สองแทน
FontFontFontFont----family:AngsanalUPCfamily:AngsanalUPCfamily:AngsanalUPCfamily:AngsanalUPC, , , , LilyUPCLilyUPCLilyUPCLilyUPC, , , , CordiaUPCCordiaUPCCordiaUPCCordiaUPC
FontFontFontFont----sizesizesizesize
เปนคุณสมบัติที่ใชกําหนดขนาดของฟอนต ซึ่งมีคาตางๆ ที่สามารถกําหนดไดดังนี้
คา ความหมายXX-smallx-smallsmallmedium
กําหนดขนาดตามคําศัพท คลายกําหนดเบอรเสื้อจากเล็กสุดไลไปถึงใหญที่สุด
mediumlarge,x-largexx-largesmallerlargerlength%
กําหนดใหมีขนาดเลก็กวาขนาดฟอนตในแท็กพอกําหนดใหมีขนาดใหญกวาขนาดฟอนตในแท็กพอกําหนดเปนคาตัวเลขเจาะจง เชน 10px, 2 in, 3pcกําหนดเปนคาเปอรเซ็นตเทียบกับขนาดฟอนตในแท็กพอ เชน 200 % คือใหญขึ้น 2 เทา
Font –styleเปนคุณสมบัติที่ใชกําหนดรูปแบบของฟอนต มีคาที่เปนไปไดคือ normal
, oblique, italic
Font-style:normal แสดงตัวอักษรปกติFont-style:normal แสดงตัวอักษรปกติ
Font-style:oblique แสดงตัวอักษรเอียง 45 องศาง
Font-style:italic แสดงตัวอักษรเอียง
Font-variant เปนคุณสมบัติที่ใชกําหนดลักษณะตัวพิมพใหญใหภาษาอังกฤษมี 2
แบบคือ normal และ small-capsแบบคือ normal และ small-caps
Font-variant: narmal แสดงตัวอักษรปกติ
Font-variant: small-caps แสดงตัวอักษรเปนตัวพิมพใหญทั้งหมด
FontFontFontFont----weight:weight:weight:weight:เปนคุณสมบัติที่ใชกําหนดความหนาของตัวอักษร คาที่เปนไปไดคือ
normal,lighter,bold, bolder และคาตัวเลข 9 จํานวน คือ 100, 200, 300, 400, 500, 600, 700, 800, 900, โดยคา 100 มีขนาดเทากับคาnormal300, 400, 500, 600, 700, 800, 900, โดยคา 100 มีขนาดเทากับคาnormal
Font-weight: normal แสดงตัวอักษรปกติ
Font-weight: bold แสดงตัวอักษรหนา
Font-weight แสดงตัวอักษรหนามาก
Font-weight ไมสนับสนุนการระบุโดยใชหนวย
FontFontFontFontเปนคุณสมบัติรวม เราสามารถกําหนดหลายๆ คาคุณสมบัติพรอมกัน
โดยใชคุณสมบัตินี้
Font: oblique small-caps lighter:
Letter-spacing
เปนคุณสมบัติที่ใชกําหนดระยะหางของตัวอักษร ถาเปนคาลบ ตัวอักษรจะเปนคุณสมบัติที่ใชกําหนดระยะหางของตัวอักษร ถาเปนคาลบ ตัวอักษรจะอยูติดกัน ถาเปนคาบวก ตัวอักษรจะอยูหางกัน
<style type= “text/css”>
Span.highlight { letter-spacing: 2 px; background- color:yellow }
P { letter-spacing : 0.5 cm}
</style>
Text-align:เปนคุณสมบัติในการจัดเรียงขอความ มีคาเปนไปได คือ left ,right
,center, justify
Text-decorationText-decorationเปนคุณสมบัติในการตกแตงขอความ มีคาที่เปนไปได คือ none (ไม
ตกแตง) , underline (ขีดเสนใต) ,overline (ขีดเสนบนตัวอักษร) ,line-through (ขีดเสนครอมตัวอักษร) ,blink (กระพริบแตเลิกใชแลวเพราะสรางความรําคาญมากกวา)
TextTextTextText----indentindentindentindentเปนคุณสมบัติที่ใชในการกําหนดระยะของยอหนา สามารถกําหนดเปน
ตัวเลขเจาะจง หรือเปนคาเปอรเซ็นต
TextTextTextText----transformtransformtransformtransformTextTextTextText----transformtransformtransformtransformเปนคุณสมบัติที่ใชในการแปลงตัวอักษร มีคาคงที่เปนไปไดคือ none
(ไมมีการเปลี่ยนแปลง) capitalize (เปลี่ยนเฉพาะอักษรตัวแรกของคําเปนตัวพิมพใหญ) , uppercase (เปลี่ยนทุกตัวอักษรเปนตัวพิมพใหญ) , lowercase (เปลี่ยนทุกตัวอักษรเปนตัวพิมพเล็ก)
WhiteWhiteWhiteWhite----spacespacespacespaceเปนคุณสมบัติที่ใชในการจัดการชองวาง มีคาเปนไปได คือ normal (จะ
นับชองวางติดกนัทั้งหมดเปน 1 ชองวาง) ,pre (เหมือนการใชแท็ก <pre> คือชองวางที่ติดกันจะไมนับเปน 1 จะคงคาชองวางเดิมไว) , nowrap คือชองวางที่ติดกันจะไมนับเปน 1 จะคงคาชองวางเดิมไว) , nowrap (ไมขึ้นบรรทัดใหมจนกวาจะพบแท็ก <br>)
WordWordWordWord----spacingspacingspacingspacingคลาย letter-spacing แตใชจัดการระยะหางของคํา ถาเปนคาลบคําจะ
อยูติดกัน ถาเปนคาบวกคําจะอยูหางกัน
การเวนระยะเสนขอบการเวนระยะเสนขอบการเวนระยะเสนขอบการเวนระยะเสนขอบ
ในการจัดระเบียบเนื้อหา ถาเราตองการใหเนื้อหาเวนระยะจากเสนขอบ หรือใหเสนขอบมีการเวนระยะซึ่งกันและกัน เราใชคุณสมบัติ margin และ padding
1. margin-top:กําหนดคาใหหางจากดานบน;1. margin-top:กําหนดคาใหหางจากดานบน;
2. margin-left:กําหนดคาใหหางจากดานซาย;
3. margin-right:กําหนดคาใหหางจากดานขวา;
4. margin-bottom:กําหนดคาใหหางจากดานลาง;
Padding...Padding...Padding...Padding...1. padding-top:กําหนดคาใหหางจากดานบน;
2. padding-left:กําหนดคาใหหางจากดานซาย;
3. padding-right:กําหนดคาใหหางจากดานขวา;
4. padding-bottom:กําหนดคาใหหางจากดานลาง;
การกําหนดขนาดและตําแหนง
เราสามารถวางเนื้อหาแบบระบุตําแหนงเจาะจง หรือกําหนดขนาดความกวางของเนื้อหา โดยใชคุณสมบัติดังตอไปนี้
width width width width และ และ และ และ height:height:height:height:
รูปแบบ__ img {width:450px; height:230px}รูปแบบ__ img {width:450px; height:230px}
position:position:position:position: กําหนดตําแหนงของแท็ก กําหนดได 3 รูปแบบ คือ
static static static static ---- แสดงในตําแหนงที่ควรแสดง คุณสมบัตินี้ใชรวมกับ left และ top ไมไดไมได
relative relative relative relative - แสดงแท็กใหเลื่อนออกจากตําแหนงที่ควรแสดง โดยใชรวมกบั left และ top เพื่อระบุระยะที่จะเลื่อนออกไป
absoluteabsoluteabsoluteabsolute - แสดงแท็กในตําแหนงใดๆ ก็ไดตามตองการ โดยอางอิงจากบนซายของเอกสาร HTML
left, top, right left, top, right left, top, right left, top, right และ และ และ และ bottom:bottom:bottom:bottom:
ใชรวมกบั position เพื่อกําหนดตําแหนง โดยนับจากขอบแตละดานเขาไปตามคาที่กําหนดไว คาที่เปนไปได คือ auto (ใหบราวเซอรกําหนดคาที่เหมาะสมให), % (กําหนดเปนเปอรเซ็นตเทียบกับแท็กพอ) หรือกําหนดคาเหมาะสมให), % (กําหนดเปนเปอรเซ็นตเทียบกับแท็กพอ) หรือกําหนดคาเจาะจง เชน 20px
clip:clip:clip:clip: ใชตัดเนื้อหาบางสวนออกไป มีผลทําใหเนื้อหาสวนนั้นแสดงออกมาไม
ทั้งหมด แสดงใหเห็นเพียงบางสวนเทานั้น คือ แสดงผลเฉพาะสวนที่อนุญาติใหเห็นเทานั้น และคุณสมบัตินี้ใชรวมกับ position:absolute เสมอ อนุญาติใหเห็นเทานั้น และคุณสมบัตินี้ใชรวมกับ position:absolute เสมอ และตัดเนื้อหาไดในรูปทรงสี่เหลี่ยมเทานั้น (clip:rect)
overflow:overflow:overflow:overflow: ใชจํากัดขอบเขตขอมูลคลาย clip คือตัดบางสวนออกได แตสามารถดู
ขอมูลที่ถูกตัดออกไดโดยการใช scrollbar เพื่อเลื่อนดูขอมูลที่ซอนอยู คาที่เปนไปไดคือ
visible - แสดงขอมูลทั้งหมด แมขอมูลจะใหญกวาขอบเขตที่กําหนดไว
hidden - แสดงขอมูลในขอบเขตที่กําหนดเทานั้น สวนที่เกินจากนี้จะไมแสดงhidden - แสดงขอมูลในขอบเขตที่กําหนดเทานั้น สวนที่เกินจากนี้จะไมแสดงใหเห็น
scroll - แสดงขอมูลเหมือน hidden แตจะมี scrollbar เพิ่มขึ้นมา เพื่อใชดูขอมูลสวนที่ซอนอยู
auto - ปรับแบบอัตโนมัติ คือ ถาขอมูลใหญกวาขอบเขต จะไมแสดงสวนที่เกินแตจะแสดง scrollbar ให
vertical-align: คุณสมบัติที่มชจัดเรียงขอมูลในแนวตั้ง ดังตาราง
คา ความหมาย
baseline จัดในตําแหนงเสนฐานเดียวกับแท็กพอ
sub จัดเรียงเปนตัวหอย
super จัดเรียงเปนตัวยก
top จัดเรียงชิดขอบดานบนของวัตถุที่มีขอบสูงที่สุดในแถวtop จัดเรียงชิดขอบดานบนของวัตถุที่มีขอบสูงที่สุดในแถว
text-top จัดเรียงชิดขอบดานบนของตัวอักษรในแท็กพอ
middle จัดเรียงที่จุดกึ่งกลางของตัวอักษรในแท็กพอ
bottom จัดเรียงชิดขอบดานลางของวัตถุที่ขอบลางต่ําสุดในแถว
text-bottom จัดเรียงชิดขอบลางของตัวอักษรในแท็กพอ
length กําหนดเปนคาตัวเลขเจาะจง เชน 25px, 10in
% กําหนดเปนเปอรเซ็นตเทียบกับคาในคุณสมบัติ line-height
z-index: ใชจัดลําดับชั้นของขอมูล โดยกําหนดคาเปนแนว Z ซึ่งจะทําใหขอมูลมีการ
ซอนทับกัน สําหรับคาที่กําหนดไดคือ auto (กําหนดคาแกน Z ใหเทากับแท็กพอ และกําหนดคาแกน Z เปนตัวเลขบวกลบ โดยคาบวกจะไดขอมูลแท็กพอ และกําหนดคาแกน Z เปนตัวเลขบวกลบ โดยคาบวกจะไดขอมูลซอนอยูดานบน สวนคาลบจะซอนอยูดานลาง คุณสมบัติ z-index ตองใชรวมกับคุณสมบัติ position:absolute เสมอ
