บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography

Slides:



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

Master Page Style Sheet
ชื่อผู้สอน : นางฐิติมา พิริยะ
การเพิ่ม ลบ จำกัดสิทธิ์ User จัดทำโดย 1. นายธัชนนท์ ต๊ะต้องใจ 1-B เลขที่ 4 2. นาย ไพบูรณ์ อินทะซาว 1-B เลขที่ 23.
ซอฟแวร์ที่สนใจ Adobe Acrobat 6.0 Professional.
คอมพิวเตอร์ช่วยสอน (CAI)
Click Here Click Here. หน้าแรก รายละเอียด LINK Microsoft Word Microsoft Word โปรแกรมการพิมพ์ เอกสาร จดหมายที่มีผู้ใช้งานมากที่สุดใน โลก ! ผมคิดว่ายังงั้น.
Chapter 10 Arrays Dept of Computer Engineering Khon Kaen University.
กระบวนการของการอธิบาย
เรื่อง การใช้งานโปรแกรม Microsoft office power point การใช้งาน โปรแกรม Microsoft Power Point.
Lab04 : การใช้โปรแกรม บรรณานุกรมพื้นฐาน EndNote X7 อ. อภิพงศ์ ปิงยศ สาขาระบบสารสนเทศทางธุรกิจ (BIS)
การใช้งาน Microsoft Word กลุ่ม 2T_PUK. โปรแกรม Microsoft Word เป็นโปรแกรมสำเร็จรูปที่เหมาะกับ งานพิมพ์ต่าง ๆ แทนเครื่องพิมพ์ดีดในสมัยก่อน ที่เวลาแก้ไข.
โปรแกรมคำนวณคะแนน สหกรณ์ ตามเกณฑ์ดีเด่นแห่งชาติ กรมส่งเสริม สหกรณ์ กองพัฒนาสหกรณ์ด้านการเงิน และร้านค้า วิธีการใ ช้
การพัฒนาโปรแกรมระบบ รายงาน หน่วยงานเวชสารสนเทศ หน่วยงานเวชสารสนเทศ กลุ่มพัฒนาระบบบริการ สุขภาพโรงพยาบาลสุโขทัย.
การพัฒนาผลสัมฤทธิ์ทางการเรียน วิชาการใช้โปรแกรมนำเสนอข้อมูล เรื่องการเชื่อมโยง ภาพนิ่ง ด้วยโปรแกรม Powerpoint2007 โดยใช้ สื่อคอมพิวเตอร์ช่วยสอน CAI ของนักเรียนระดับชั้น.
การพัฒนาบทเรียนคอมพิวเตอร์ช่วยสอน เรื่อง หลักการทำงานของคอมพิวเตอร์ วิชาคอมพิวเตอร์พื้นฐาน สำหรับนักเรียนชั้นมัธยมศึกษาปีที่ 1 โรงเรียนเฉลิมราชประชาอุทิศ.
เทคนิคการใช้ Microsoft Excel. 1. การตีตารางในรูปแบบต่าง ๆ 2. การแทรกภาพในตาราง 3. การตกแต่งข้อมูลด้วย Format Cells 4. การคำนวณ บวก ลบ คูณ หาร 5. การย่อ.
การเลือกข้อมูลจาก List การกำหนดเงื่อนไขการป้อนข้อมูลด้วย Data Validation การใส่ Comment / แสดง / แก้ไข / ลบ.
Microsoft Word 2007 อาจารย์ผู้สอน : 1. SECTION2: การกำหนดรูปแบบ อักษร 1. เปิดไฟล์ section2.docx 2. ปรับ 2.
1. รู้ถึงความต้องการของตัวเอง ก่อนก่อนเริ่มต้นออกแบบ เมื่อคุณเริ่มคิดจะออกแบบโบรชัวร์ออกมาอย่างไร ให้เริ่มต้น สอบถามลูกค้าของคุณก่อนว่าทำไม เค้าต้องการโบร์ชัวร์
LOGO ภาษาซี 1.1 อ. กฤติเดช จินดาภัทร์. LOGO ตัวอย่างโค้ดภาษาซี
การออกแบบและเทคโนโลยี
อาจารย์อภิพงศ์ ปิงยศ Lab 05 : Microsoft Excel (Part3) พท 260 เทคโนโลยีสารสนเทศและการสื่อสารทางการท่องเที่ยว อาจารย์อภิพงศ์ ปิงยศ.
การตรวจสอบคุณภาพเครื่องมือ
คอมพิวเตอร์เพื่อการออกแบบ (Computer-Aided Design)
หน่วยที่ 1 ข้อมูลทางการตลาด. สาระการเรียนรู้ 1. ความหมายของข้อมูลทางการตลาด 2. ความสำคัญของข้อมูลทางการตลาด 3. ประโยชน์ของข้อมูลทางการตลาด 4. ข้อจำกัดในการหาข้อมูลทาง.
stack #2 ผู้สอน อาจารย์ ยืนยง กันทะเนตร
การใช้ Social Media เพื่อการสื่อสาร
บทที่ 1 สถาปัตยกรรมของระบบฐานข้อมูล (Database Architecture)
ACCOUNTING FOR INVENTORY
บทที่ 5 เครื่องมือสืบค้นข้อมูล (Search Engine)
แนวทางการออกแบบโปสเตอร์
องค์ประกอบในการออกแบบสิ่งพิมพ์
โครงสร้างภาษา C Arduino
บทที่ 1 ความรู้ทั่วไปเกี่ยวกับคอมพิวเตอร์
กลุ่มคำและประโยค ภาษาไทย ม. ๓
บทที่ 3 การสร้างเว็บไซต์ และการปรับคุณสมบัติของเว็บเพจ
เซต (SET) ประวัติย่อของวิชาเซต ความหมายของเซต การเขียนแทนเซต
Presentation การจัดการข้อร้องเรียนในธุรกิจบริการ Customer Complaint Management for Service.
บทที่ 8 การควบคุมโครงการ
ขอแนะนำ PowerPoint 2007 การแนะนำคุณลักษณะใหม่ๆ.
ณ ห้องประชุม พธ.ทร.(๒) วันที่ ๑๗ สิงหาคม ๒๕๕๘ เวลา ๐๙๓๐
บทที่ 5 ภาษาสคริปต์ ที่ใช้สำหรับการผลิตระบบการสอนบนเครือข่าย
ขอต้อนรับสู่ PowerPoint
พื้นฐานการออกแบบ กราฟิก หมายถึง ศิลปะแขนงหนึ่งซึ่งใช้การสื่อความหมาย ด้วยเส้น สัญลักษณ์ รูปวาด ภาพถ่าย กราฟ แผนภูมิ การ์ตูน ฯลฯ เพื่อให้สามารถสื่อความหมายของข้อมูลได้ถูกต้องตรง.
การสร้างโมเดลจำลองความสัมพันธ์ ระหว่างข้อมูล E-R Model
โดย งานเทคโนโลยีสารสนเทศ ศูนย์การแพทย์ ฯ
วิธีการกำหนดค่า Microsoft SharePoint ของคุณ เว็บไซต์ออนไลน์
การทำรูปเล่มปัญหาพิเศษ
วาระที่ ผลการประชุมเชิงปฏิบัติการ เรื่อง การเตรียมความพร้อมบุคลากร สำนักแผนงานและโครงการพิเศษเพื่อสนับสนุนการปฏิบัติงาน ของหน่วยงานในพื้นที่
การแสดงเจตจำนงของประชาชนตามระบอบประชาธิปไตย
บทที่ 6 แนวคิดเทคโนโลยีเสมือนจริง
บริษัท พัฒนาวิชาการ (2535) จำกัด
อาจารย์อภิพงศ์ ปิงยศ Lab 06 : Microsoft Excel (Part2) ทท101 เทคโนโลยีสารสนเทศและนวัตกรรมการสื่อสารทางการท่องเที่ยว อาจารย์อภิพงศ์
SMS News Distribute Service
หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง โครงสร้างพื้นฐาน HTML 5 รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี
บรรยายครั้งที่ 8 - กราฟฟิกวิศวกรรม 1
บทที่ 3 : รูปแบบการเชื่อมต่อเครือข่ายและส่วนประกอบของเครือข่ายท้องถิ่น (Topologies and LAN Components) Part1.
บทที่ 9 การเรียงลำดับข้อมูล (Sorting)
การวิจัยทางการท่องเที่ยว
วงจรอาร์ ซี ดิฟเฟอเรนติเอเตอร์
หลักเกณฑ์การเก็บรักษาข้อมูลจราจรทางคอมพิวเตอร์ ของผู้ให้บริการ
Array: One Dimension Programming I 9.
แนวทางการออกแบบนิตยสาร
การเขียนเว็บ Web Editor
Google Scholar คืออะไร
การเขียนโปรแกรมด้วยภาษาไพทอน การเขียนโปรแกรมแบบทางเลือก
บทที่ 5 พัลส์เทคนิค
โครงการถ่ายทอดเทคโนโลยีถนนรีไซเคิลเพื่อลดขยะพลาสติกใน 4 ภูมิภาค
กระดาษทำการ (หลักการและภาคปฏิบัติ)
ใบสำเนางานนำเสนอ:

บทที่ 5 ตัวพิมพ์/ตัวอักษรที่ใช้บนเว็บ Chapter 5 Web Typography Typography [n.] : การพิมพ์, ตัวพิมพ์, วิชาทำตัวพิมพ์ Letter : ตัวอักษร Type : ตัวพิมพ์ Font : ชุดตัวพิมพ์ที่มีขนาดและลักษณะเป็นชุดเดียวกัน ในแง่ของการพิมพ์ตัวพิมพ์ Type Face คือ ชื่อของตัวพิมพ์ เช่น Times New Roman หรือ Futura และ Font จะสื่อถึงแบบอักษรและในทางด้านการออกแบบเว็บ สามารใช้สองคำสื่อแทนกันได้

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ตัวอักษร/ตัวพิมพ์นั้น มีความยืดหยุ่นสูง สามารถแสดงถึงอารมณ์ ระดับและโครงสร้าง ได้

1. หลักการออกแบบตัวพิมพ์ Type Design Principles

1. หลักการออกแบบตัวพิมพ์ Type Design Principles

ANXIOUS: วิตกกังวล

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ขนาดของตัวอักษร/ ตัวพิมพ์ มีผลต่อความรู้สึกที่จะสื่อสารเช่นกัน

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ผู้ใช้ในปัจจุบันเข้าใช้งานเว็บผ่านอุปกรณ์สื่อสารขนาดเล็ก ยิ่งทำให้ตัวอักษร/ตัวพิมพ์ มีความสำคัญมากขึ้น

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ผู้ใช้ในปัจจุบันเข้าใช้งานเว็บผ่านอุปกรณ์สื่อสารขนาดเล็ก ยิ่งทำให้ตัวอักษร/ตัวพิมพ์ มีความสำคัญมากขึ้น เพื่อปรับอักษรบนหน้าเว็บให้พอดีกับสมาร์ทโฟน โดยข้อมูลที่เป็นภาพจะมักจะถูกซ่อนหรือลดขนาดลง เพื่อให้พื้นที่ส่วนใหญ่แสดงข้อความได้ชัดเจน

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ใช้ตัวอักษรที่สะอาด (Clean) อ่านง่าย (Legible font) ร่วมกับการพาดหัว (Descriptive headline) ตัวอักษร/สี ที่แตกต่าง เพื่อสร้างความโดดเด่น (Distinctive Font)

1. หลักการออกแบบตัวพิมพ์ Type Design Principles หลักในการใช้แบบอักษร/ตัวพิมพ์ บนเว็บไซต์ ใช้แบบอักษรและขนาดของอักษรให้มีความหลากหลายน้อยที่สุด ใช้แบบอักษรที่สามารถใช้งานได้บนเครื่อง/อุปกรณ์ที่หลากหลาย และไม่ละเมิดลิขสิทธิ์แบบอักษรของผู้อื่น ใช้การออกแบบอักษรเพื่อความชัดเจน หลีกเลี่ยงการใช้ข้อความเป็นกราฟิก

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ใช้แบบอักษรและขนาดของอักษรให้มีความหลากหลายน้อยที่สุด

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ใช้แบบอักษรที่สามารถใช้งานได้บนเครื่อง/อุปกรณ์ที่หลากหลาย และไม่ละเมิดลิขสิทธิ์/กรรมสิทธิ์แบบอักษรของผู้อื่น

1. หลักการออกแบบตัวพิมพ์ Type Design Principles ใช้การออกแบบอักษรเพื่อความชัดเจน และสามารถแสดงผลบน เว็บเบราเซอร์ได้หลากหลาย

1. หลักการออกแบบตัวพิมพ์ Type Design Principles หลีกเลี่ยงการใช้ข้อความที่เป็นกราฟิก

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units ชื่อหน่วย ตัวย่อ คำอธิบายหน่วย คือ หน่วยแบบกำหนดตายตัว (Fixed)

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units คือ หน่วยแบบแปรผัน (Flexible/Relative)

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units การกำหนดขนาดโดยใช้ em นั้นจะเป็นการกำหนดแบบแปรผัน (Relative) กล่าวคือเมื่อเรากำหนดขนาดของข้อความด้วย em ผู้ใช้งานก็จะสามารถปรับลดขนาดของข้อความได้ด้วยฟังก์ชั่นที่มีอยู่ใน Browser ซึ่งการกำหนดขนาดแบบ em นั้นจะคิดจากค่าเดิมของ Element ที่เป็น Parent ที่ใกล้กับมันมากที่สุด หรือค่าเริ่มต้นที่แต่ละ Browser กำหนด ซึ่งโดยส่วนใหญ่แล้ว ตัวอักษรเริ่มต้นจะมีขนาดเท่ากับ 16px โดย 1em จะเท่ากับ 100% หรือคิดเป็น 1เท่า ของค่าเริ่มต้นนั่นเอง เช่น body {font-size: 62.5%; }  กำหนดให้ค่าเริ่มต้น 10px หากไม่กำหนดจะเท่ากับ 16px ซึ่งก็คือค่าเริ่มต้น (Default) ของ Web Browser h1 {font-size: 2.4em; }  24px p {font-size: 1.4em; } 14px

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units แต่ในการใช้หน่วยแบบ em นั้นก็ยังมีข้อเสียอยู่บ้าง กล่าวคือในบาง Browser ยังมีปัญหาซึ่งจะแสดงผลออกมาไม่เหมือนกัน เล็กบ้าง ใหญ่บ้าง ซึ่งไม่เหมาะกับการอ่าน และอย่าลืมว่าการใช้งาน em นั้นจะทำการกำหนดขนาดเป็น 1 เท่าของ Element ที่เป็น Parent ที่ใกล้กับมันเสมอ เช่น body {font-size: 62.5%; }  .content {font-size:1.6em; }  อยากได้ 16px แสดงผล 16px ได้ถูกต้อง (10x1.6=16) .content h1 {font-size:2.4em; }  อยากได้ 24px แต่กลับแสดงผล 38.4px (16x2.4=38.4) .content p {font-size:1.6em; }  อยากได้ 16px แต่กลับแสดงผล 25.6px (16x1.6=25.6) Font ปกติขนาด 16px แต่กำหนดให้เหลือเพียง 62.5% ซึ่งเทียบได้เท่ากับ 10 px (16*62.5/100) Relative Relative Relative

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units จากปัญหาในการกำหนดขนาดด้วย em นั้น ใน CSS3 จึงออกหน่วยใหม่นั้นก็คือ rem (Root em) เพิ่มเข้ามา โดยหน่วย rem นี้ จะมีคุณสมบัติเหมือนกับหน่วย em แทบทุกประการ เพียงแต่ rem จะเทียบขนาดกับ Root Element ซึ่งก็คือ HTML เสมอครับ จึงทำให้เราได้ขนาดที่ต้องการซึ่งก็คือ 1 เท่าของ Root Element นั้นเอง เช่น html { font-size: 62.5%; }  เทียบเท่า 10px มาจาก 16px * 62.5/100 body { font-size: 1.4rem; }  14px มาจาก 10px * 1.4em h1   { font-size: 2.4rem; }  24px มาจาก 10px * 2.4em

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units ดังนั้นในการเขียน CSS เพื่อกำหนดขนาดเราต้องคำนึงถึงข้อจำกัดตรงนี้ด้วย โดยสามารถแก้ไขปัญหาดังกล่าวโดยการกำหนดขนาดแบบ px (Pixel) ให้มันก่อนค่อยกำหนดแบบ rem เช่น html { font-size: 62.5%; } เทียบเท่า 10px มาจาก 16px * 62.5/100 body { font-size: 14px; font-size: 1.4rem; }  14px h1   { font-size: 24px; font-size: 2.4rem; }  24px

2. หน่วยมาตรวัดในสไตล์ชีต (Style Sheet) CSS Measurement Units

คุณลักษณะที่ให้เรียกใช้ Properties 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties คุณลักษณะที่ให้เรียกใช้ Properties ตัวอย่างการกำหนด CSS font-family font-face font-size font-style font-variant font-weight font (shorthand property) 1. <head> 2. <style> 3. p { 4. font-family: sans-serif; 5. } 6. </style> 7. </head>

font-family: sans-serif; 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties การกำหนดสกุลอักษร (Specifying Font Family) ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร (font family) มีรูปแบบพื้นฐาน ดังนี้ font-family: sans-serif;

1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- หาก font family มีชื่อหลายคำ ให้กำหนด “” ครอบ เช่น “Times New Roman” และ หากมีการกำหนด font family ลำดับรอง ให้ขั้นด้วย เครื่องหมาย Comma more than one word

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- การกำหนดสกุลอักษร โดยใช้ชื่อสกุลสามัญ (generic names) ซึ่งชื่อสกุลสามัญ คือ font family ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย Serif แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด Sans แปลว่า ปราศจาก Sans-Serif แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties Serif fonts are the traditional letter form, with strokes (or serifs) that finish off the top and bottom of the letter. The most common serif font is Times. Sans-serif fonts have no serifs. They are block letters. The most common sans-serif fonts are Helvetica and Arial. Monospace fonts are fixed-width fonts. Every letter has the same horizontal width. Monospace is commonly used to mimic typewritten text or for programming code. The style rules and HTML code in this book are printed in Courier, a monospace font. Cursive fonts are designed to resemble handwriting. This font is often displayed as Comic Sans, but be aware that this choice can provide inconsistent results. Fantasy fonts are primarily decorative. Fantasy is not a widely used choice.

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties

1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 1. การกำหนดสกุลอักษร (Specifying Font Family) -ต่อ- ตัวอย่าง การกำหนดสกุลอักษรสามัญ Generic Font Families p { font-family: sans-serif; } การระบุเจาะจงสกุลอักษรด้วย “” Specific Font Families p { font-family: "lucida console"; } การระบุสกุลอักษรแบบลำดับ Font Fallbacks p { font-family: arial, helvetica; }

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) @font-face rule ช่วยให้สามารถนำ Font จากภายนอกแสดงผลบนเว็บเบราเซอร์ได้ คุณสมบัติของ font-face ช่วยให้สามารถกำหนดชื่อสกุลและตำแหน่งสกุลอักษรได้ โดยสกุลอักษรที่จะนำมาใช้นั้น จะต้องเป็นนามสกุลTrueType format (TTF)

2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) –ต่อ- 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule) –ต่อ- @font-face { font-family: generica; src: url(http://www.generic.com/fonts/generica.ttf) } h1 { font-family: generica, serif; กำหนดชื่อสกุล Font ขึ้นเอง ตำแหน่งสกุลอักษร นามสกุล ttf การเรียกใช้

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 3. การระบุขนาด (Specifying Font Size) ตัวอย่างการระบุขนาดแบบ em และ px blockquote { font-family: arial, sans-serif; font-size: 1.5em; } body { font-family: arial, sans-serif; font-size: 16px; }

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 3. การระบุขนาด (Specifying Font Size) ตัวอย่างการระบุขนาดแบบ Absolute Font Size Keywords xx-small x-small small medium large x-large xx-large

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 4. การกำหนดสกุลอักษรแบบ Class .note { font-style: italic; } <p class="note">A note to the reader:</p> CSS HTML

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant) –ต่อ-

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant) –ต่อ-

3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 5. การกำหนดความหลากหลายของลักษณะ Font (Specifying Font Variant) –ต่อ- span.small { font-variant: small-caps } <p><span class="small">The type choices you make for your web site</span> provide the foundation for...</p> CSS HTML

6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) ตัวอย่าง p { font: 12pt arial, sans-serif; } h1 { font: 2em sans-serif; }

6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) 3. การใช้ สไตล์ชีท ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS Font Properties 6. การใช้คำสั่งแบบย่อ (Using the Font Shortcut Property) ตัวอย่าง p { font-weight: bold; font-size: .85em; line-height: 1em; font-family: arial; } p { font: bold .85em/1em arial; }

4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-indent text-align line-height vertical-align letter-spacing word-spacing text-decoration text-transform text-shadow

text-indent = การเยื้อง 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-indent = การเยื้อง p {text-indent: 2em;} blockquote {text-indent: −2em;}

text-align = ตำแหน่งข้อความในแนวนอน 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-align = ตำแหน่งข้อความในแนวนอน p {text-align: justify;}

line-height = ระยะช่องไฟระหว่างบรรทัด 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties p {line-height: 150%;} line-height = ระยะช่องไฟระหว่างบรรทัด

4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties vertical-align = ตำแหน่งข้อความในแนวตั้ง

vertical-align = ตำแหน่งข้อความในแนวตั้ง 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties vertical-align = ตำแหน่งข้อความในแนวตั้ง ชื่อคลาสหรืออิลิเม้นท์ {vertical-align: ________;}

letter-spacing = การกระจายตัวของข้อความ 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties letter-spacing = การกระจายตัวของข้อความ ชื่อคลาสหรืออิลิเม้นท์ { letter-spacing: _____px; }

word-spacing = การกระจายตัวของคำ 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties word-spacing = การกระจายตัวของคำ ชื่อคลาสหรืออิลิเม้นท์ {word-spacing: ______px;}

text-decoration การแต่งข้อความ 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-decoration การแต่งข้อความ ชื่อคลาสหรืออิลิเม้นท์ {text-decoration: _________;}

text-transform การปรับอักษร 4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-transform การปรับอักษร ชื่อคลาสหรืออิลิเม้นท์ {text-transform: _________;} Capitalize Uppercase Lowercase none

4. การใช้ สไตล์ชีทอักษร ในการกำหนดคุณลักษณะของตัวอักษร Using the CSS TEXT Properties text-shadow = เงา ชื่อคลาสหรืออิลิเม้นท์ {text-shadow: ___px ___px ___px #____;}