Lab#6

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%

font-style ใชกำหนดรูปแบบของตัว
อักษรในลักษณะตางๆ
normal
italic
oblique เอียง 45 องศา
font-variant ใชแปลงตัวอักษรที่เปนตัว
พิมพเล็กใหเปนพิมพใหญ
โดยที่ขนาดตัวอักษรยังคง
เทาตัวพิมพเล็ก
normal
Small-Caps
font-weight ใชกำหนดความหนาของตัว
อักษร
normal
bold
bolder
lighter
100
200

color ใชกำหนดสีใหตัวอักษร red
#000099

font สามารถกำหนด
property ใหกับ font
ไดในคำสั่งประกาศเดียว
font-style
font-variant
font-weight
font-size
font-family

p {
font-family:AngsanaUPC;
font-size:16pt;
color:green
}
Show?

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

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>

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/

Lab#6

Recommended

Recommended

More Related Content

More from palm2816

More from palm2816 (7)

Lab#6