แปลความหมายเพลง Olivia Ong – Stars

05/05/2014

พื้นฐาน CSS Properties – Color Background and Image – ภาพพื้นหลัง

07/05/2014

พื้นฐาน CSS Properties – Font and Text – รูปแบบฟอนต์และข้อความ

06/05/2014
empty image
empty image

 

1. Font & Text – เกี่ยวกับฟอนต์และข้อความ

 Font รูปแบบฟอนต์

font-famimy รูปแบบของตระกูลฟอนต์ที่จะใช้ ดูเพิ่มเติมได้ที่ css_websafe_fonts
font-style กำหนดตัวธรรมดา ตัวเอียง ได้แก่ normal, italic, oblique
font-variant กำหนดตัวพิมพ์เล็ก ได้แก่ normal – ปกติ, small-caps  กำหนดให้อักษรเป็นพิมพ์ใหญ่ทั้งหมด แต่ขนาดอักษรจะเล็กเท่าเดิม
font-weight น้ำหนักหรือความหนาของอักษร ได้แก่ normal, bold, bolder, lighter, 100, 200, 300…900
font-size ขนาดของอักษร ได้แก่ medium, xx-small, x-small, small, large, x-large, xx-large, smaller, larger
font เป็นการเขียนแบบ shorthand คือเขียนแบบสั้น

ตัวอย่าง

<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<title>CSS - Font&Text - เกี่ยวกับฟอนต์และข้อความ</title>
<header>
<style type='text/css'>
body {font: 1.2em "Courier New";}
h1 {font: blod 1.5em “Times New Roman”, Georgia, Serif;}
div.times {font-family:"Times New Roman", Times, serif;}
div.arial {font-family:arial, helvetica, sans-serif;}
div.tahoma {font-family:Tahoma, Geneva, sans-serif;}
div.lucida {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;}
div.normal {font-style:normal;}
div.italic {font-style:italic;}
div.oblique {font-style:oblique;}
div.vnormal {font-variant:normal;}
div.vsmall {font-variant:small-caps;}
div.wblod {font-weight:bold;}
div.wlighter {font-weight:lighter;}
div.w100 {font-weight:100;}
div.w900 {font-weight:900;}
div.ssmall {font-size:small;}
div.sxlarger {font-size:x-large;}
div.sem {font-size:1.5em;}
div.spx {font-size:10px;}
div.spx2 {font-size:30px;}
</style>
</header>
<body>
<h1>ทดสอบ Property ของ Font แบบต่างๆ</h1>
<div class="times">Font-Family : Times New Roman</div>
<div class="arial">Font-Family : Arial</div>
<div class="tahoma">Font-Family : Tahoma</div>
<div class="lucida">Font-Family : Lucida</div>
<div class="normal">font-style : normal</div>
<div class="italic">font-style : italic</div>
<div class="oblique">font-style : oblique</div>
<div class="vnormal">font-variant : normal</div>
<div class="vsmall">font-variant : small-caps</div>
<div class="wblod">font-weight : blod</div>
<div class="wlighter">font-weight : lighter</div>
<div class="w100">font-weight : 100</div>
<div class="w900">font-weight : 900</div>
<div class="ssmall">font-size  : small</div>
<div class="sxlarger">font-size : x-larger</div>
<div class="sem">font-size : 1.5em</div>
<div class="spx">font-size : 10px</div>
<div class="spx2">font-size : 30px</div>
</body>
</html>

ผลลัพธ์

 

Text รูปแบบข้อความ

line-height – ระยะห่างระหว่างบรรทัด ได้แก่ normal, ค่าเป็นตัวเลข

letter-spacing – ระยะห่างของตัวอักษร ได้แก่ normal, ค่าเป็นตัวเลข

word-spacing – ระยะห่างระหว่างคำ ได้แก่ normal, ค่าเป๊นตัวเลข

text-align – รูปแบบพารากราฟ ได้แก่ left, right, center, justify

text-decoration – ขีดเส้นใต้ ขีดฆ่า ได้แก่ none, [ underline , overline , line-through , blink ] ใส่ทีเดียวหลายตัวได้

text-transform – การเปลี่ยนตัวพิมพ์เล็กพิมพ์ใหญ่ของข้อความ ได้แก่ none, capitalize, uppercase, lowercase

white-space – การขึ้นบรรทัดใหม่ ได้แก่ normal – ขึ้นบรรทัดใหม่เมื่อสุดขอบ, pre – ขึ้นเมื่อกด enter, nowrap – ไม่ขึ้นบรรทัดใหม่

โค้ดทั้งหมด

 

<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
<title>CSS - Font&Text - เกี่ยวกับฟอนต์และข้อความ</title>
<header>
<style type='text/css'>
body {font: 1.2em "Courier New";}
h1 {font: blod 1.5em “Times New Roman”, Georgia, Serif;}
.lh3 {line-height:3; background-color:#FCF;}
.lhnone {line-height:none; background-color:#C66;}
.lsnormal {letter-spacing: normal;}
.ls2px {letter-spacing: 2px;}
.ls5px {letter-spacing: 5px;}
.wsnormal {word-spacing: normal;}
.ws3px {word-spacing: 3px;}
.ws1em {word-spacing: 1em;}
.tacenter {text-align:center;}
.taleft {text-align:left;}
.taright {text-align:right;}
.tajustify {text-align:justify;}
.tdnone {text-decoration:none;}
.tdunder {text-decoration:underline;}
.tdover {text-decoration:overline;}
.tdthr {text-decoration:line-through;}
.ttnone {text-transform:none;} 
.ttcap {text-transform:capitalize;} 
.ttlow {text-transform:lowercase;} 
.ttup {text-transform:uppercase;} 
.wsnormal {white-space:normal;}
.wsno {white-space:nowrap;}
.wspre {white-space:pre;}
</style>
</header>
<body>
<h1>ระยะห่างระหว่างบรรทัด</h1>
<p class="lh3">Line Height : 3; Oh the sky's grey On this work day You're just playing along โอ้...ท้องฟ้าช่างหมองหม่น ในวันที่น่าเบื่อ คุณนั่งเหงาเปล่าเปลี่ยวเดียวดาย Just to see the day through เพียงเพื่อให้เวลามันผ่านไปวันๆ You're lonely and blue คุณโดดเดี่ยวและโศกเศร้า Writings on the window ขีดเขียนบนกระจก There's a deep longing sigh แล้วถอนหายใจยาวๆ You're far off in thoughts คุณเหม่อลอยออกไปแสนไกล You heart's grown all cold หัวใจคุณเริ่มเหน็บหนาว</p>
<p class="lhnone">Line Height : none; Oh the sky's grey On this work day You're just playing along โอ้...ท้องฟ้าช่างหมองหม่น ในวันที่น่าเบื่อ คุณนั่งเหงาเปล่าเปลี่ยวเดียวดาย Just to see the day through เพียงเพื่อให้เวลามันผ่านไปวันๆ You're lonely and blue คุณโดดเดี่ยวและโศกเศร้า Writings on the window ขีดเขียนบนกระจก There's a deep longing sigh แล้วถอนหายใจยาวๆ You're far off in thoughts คุณเหม่อลอยออกไปแสนไกล You heart's grown all cold หัวใจคุณเริ่มเหน็บหนาว</p>
<h1>ทดสอบระยะห่างระหว่างตัวอักษร</h1>
<p class="lsnormal">ระยะห่าง letter-spacing : normal</p>
<p class="ls2px">ระยะห่าง letter-spacing : 2px</p>
<p class="ls5px">ระยะห่าง letter-spacing : 5px</p>
<h1>ทดสอบระยะห่างระหว่างคำ</h1>
<p class="wsnormal">ระ ยะ ห่าง word spacing : normal</p>
<p class="ws3px">ระ ยะ ห่าง word spacing : 3px</p>
<p class="ws1em">ระ ยะ ห่าง word spacing : 1em</p>
<h1>ทดสอบตำแหน่งพารากราฟ</h1>
<p class="tacenter">ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center ทดสอบ text-align:center</p>
<p class="taleft">ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left ทดสอบ text-align:left</p>
<p class="taright">ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right ทดสอบ text-align:right</p>
<p class="tajustify">ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify ทดสอบ text-align:justify</p>
<h1>ทดสอบ text-decoration</h1>
<p class="tdnone">text-decoration: none</p>
<p class="tdunder">text-decoration: underline</p>
<p class="tdover">text-decoration: overline</p>
<p class="tdthr">text-decoration: through</p>
<h1>ปรับรูปแบบตัวพิมพ์ text-transform </h1>
<p class="ttnone">text-transform: none</p>
<p class="ttcap">text-transform: capitalize</p>
<p class="ttlow">text-transform: loWERcase</p>
<p class="ttup">text-transform: uppercase</p>
<h1>white-space</h1>
<p class="wsnormal">white-space: uppercase - Oh the sky's grey On this work day You're just playing along Oh the sky's grey On this work day You're just playing along</p>
<p class="wsno">white-space: nowarp - Oh the sky's grey On this work day You're just playing along Oh the sky's grey On this work day You're just playing along</p>
<p class="wspre">white-space: pre - Oh the sky's grey On this work day You're just playing along Oh the sky's grey On this work day You're just playing along</p>
</body>
</html>

สำหรับวันนี้….Zzz
Ref.
http://www.w3schools.com/cssref/