Embed Size (px)
Citation preview
CSS & HTML 322 432 Web design technology Computer Science Khon Kaen University
FONTS
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
Unit Style Sheet
ex
ex (x-height, ความสูงของตัวอักษร "x") เชน 1.5ex, 2ex
% (percent, สัมพันธกับขนาดหนาจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู) เชน 50%, 130%
Percent
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
p.ex1 { font:15px arial,sans-serif; /*not specified */ }
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%
Property Description Values
font-style ใชกำหนดรูปแบบของตัวอักษรในลักษณะตางๆ
normal italic
oblique เอียง 45 องศา
font-variant
ใชแปลงตัวอักษรที่เปนตัวพิมพเล็กใหเปนพิมพใหญ
โดยที่ขนาดตัวอักษรยังคงเทาตัวพิมพเล็ก
normal Small-Caps
font-weight ใชกำหนดความหนาของตัวอักษร
normal bold
bolder lighter
100
200
Property Description Values
color ใชกำหนดสีใหตัวอักษร red #000099
font สามารถกำหนด property ใหกับ font ไดในคำสั่งประกาศเดียว
font-style
font-variant font-weight font-size
font-family
Example
p { font-family:AngsanaUPC; font-size:16pt; color:green }
Show?
If output
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>
Difference Between Serif and Sans-serif Fonts
Text
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> <p class="p1">good moring teacher, how are you today?</p> </body> </html>
Example
LAB#6 Fonts
จุดประสงค ศึกษาพัฒนาการเรียนรู การจัดออกแบบตัวอักษรโดยใช CSS จากเนื้อหาที่ใหมา ใหนักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช CSS Font text
ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให
“ออกแบบเว็บเพจอยางไรใหดูด”ี6
รูปแบบการส่งงาน
การส่งงาน : อัด zip หรือ rar ส่ง ทําได้โดย คลิกขวาที่ folder > winzip > Add to "ชื่อโฟลเดอร์.zip" หรือ คลิกขวาที่ folder > Add to "ชื่อโฟลเดอร์.rar"
**กรณีมีรูปภาพหรือกราฟิกอื่นให้ใส่มาใน folder งานด้วย โดยไม่ต้อง zip ไม่งั้นรูปภาพหรือกราฟฟิกจะไม่แสดง**
http://www.enjoyday.net/
References
http://www.w3schools.com/
