Download to read offline
Lab#6
- 1. CSS & HTML 322432 Web design technology Computer Science Khon Kaen University FONTS
- 2. Pixel Unit Style Sheet px(pixels, สัมพันธกับคาความละเอียดของหนาจอ) เชน 1px, 4px em (emphasize, ความสูงของตัวอักษร) เปนขนาดจำนวนเทาของขนาด font ที่กำหนดให body ถา font ที่ body กำหนดเปน 10px h1{font-size:1.5em} h1 จะมีขนาดเปน 1.5 เทา ของ 10px = 15px em ex (x-height, ความสูงของตัวอักษร "x") เชน 1.5ex, 2ex
- 3. Unit Style Sheet ex ex(x-height, ความสูงของตัวอักษร "x") เชน 1.5ex, 2ex % (percent, สัมพันธกับขนาดหนาจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู) เชน 50%, 130% Percent
- 4. Unit • in (inches;1in=2.54cm =72pt =6pc) เชน 2in, 1.5in • cm (centimeters; 1cm=10mm) เชน 2cm, 1.11cm • mm (millimeters) เชน 50mm, 0.8mm • pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เปน หนวยที่ใชในงานสิ่งพิมพเชน 12pt, 20pt • pc (picas; 1pc=12pt) เชน 1pc, 2pc
- 6. p.ex1 { font:15px arial,sans-serif; /*notspecified */ } CSS - Fonts Property Description Values font-family ใชกำหนดชนิด font ที่ ตองการจะใหแสดงผล โดยที่ font นั้นจะตองมีอยู ในเครื่องของผูใชงานดวย โดยที่ font นั้นจะตองมีอยู ในเครื่องของผูใชงานดวย !เชน Arial, Helvetica, sans-serif font-size ใชกำหนดขนาดของตัวอักษร ที่จะใหแสดงผล /td xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 18px, 70%, 150%
- 7. Property Description Values font-styleใชกำหนดรูปแบบของตัว อักษรในลักษณะตางๆ normal italic oblique เอียง 45 องศา font-variant ใชแปลงตัวอักษรที่เปนตัว พิมพเล็กใหเปนพิมพใหญ โดยที่ขนาดตัวอักษรยังคง เทาตัวพิมพเล็ก normal Small-Caps font-weight ใชกำหนดความหนาของตัว อักษร normal bold bolder lighter 100 200
- 8. Property Description Values color ใชกำหนดสีใหตัวอักษร red #000099 font สามารถกำหนด property ใหกับ font ไดในคำสั่งประกาศเดียว font-style font-variant font-weight font-size font-family
- 9.
- 10.
- 11.
- 12. Font > sans-serif,Arial <p style="font-weight:bold">Love me Love my dog</p> <p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
- 13. Difference Between Serifand Sans-serif Fonts
- 14.
- 17. Example <html> <head> <style type="text/css"> .p1 { color:#FF0033; line-height:18pt; letter-spacing:0.05cm; text-decoration:overline; text-indent:0.5in; text-transform:capitalize; white-space:normal; word-spacing:0.5em; } </style> </head> <body> <pclass="p1">good moring teacher, how are you today?</p> </body> </html>
- 19.
- 20. LAB#6 Fonts จุดประสงค ศึกษาพัฒนาการเรียนรูการจัดออกแบบตัวอักษรโดยใช CSS จากเนื้อหาที่ใหมา ใหนักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช CSS Font text ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให “ออกแบบเว็บเพจอยางไรใหดูดี”6 รูปแบบการส่งงาน การส่งงาน : อัด zip หรือ rar ส่ง ทําได้โดย คลิกขวาที่ folder > winzip > Add to "ชื่อโฟลเดอร์.zip" หรือ คลิกขวาที่ folder > Add to "ชื่อโฟลเดอร์.rar" **กรณีมีรูปภาพหรือกราฟิกอื่นให้ใส่มาใน folder งานด้วย โดยไม่ต้อง zip ไม่งั้นรูปภาพหรือกราฟฟิกจะไม่แสดง**
- 21.