แปลความหมายเพลง Olivia Ong – Stars
05/05/2014พื้นฐาน CSS Properties – Color Background and Image – ภาพพื้นหลัง
07/05/2014
1. Font & Text – เกี่ยวกับฟอนต์และข้อความ
Font รูปแบบฟอนต์
font-famimy รูปแบบของตระกูลฟอนต์ที่จะใช้ ดูเพิ่มเติมได้ที่ css_websafe_fonts
font-style กำหนดตัวธรรมดา ตัวเอียง ได้แก่ normal, italic, oblique
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/
