CSS පාඩම් අංක 04
06. Fonts
වෙබ් අඩවියකින් බලාපොරොත්තු වෙන දත්ත සහ තොරතුරු සැපයීමේ කාර්යය ඉෂ්ඨ සිද්ධ කරන්න වැඩිම දායකත්වයක් ලබා දෙන්නේ Fonts. එහෙමත් නැත්නම් අකුරු. මේ අකුරු පාවිච්චිය ගැන Typography කියලා වෙනම විෂයක් තියෙනවා. ඒ විෂයේදී අකුරු පාවිච්චිය ගැන ඉගෙන ගන්න පුලුවන්. අපේ වෙබ් එකට පාවිච්චි කරන අකුරු, වචන, වාක්ය සහ ඡේදත් Typography වලට අනුව යොදන්න පුලුවන්. CSSවල Font කියන Property එක තමයි ඒකට වැඩි වශයෙන්ම උදව්වට එන්නේ.
Fonts යටතේ මුලින්ම දැන ගන්න ඕනි Font Family Property එක ගැන. මේක ඇවිල්ලා හරියට පවුලක් වගේ. පවුලක දෙමාපියන්ගේ ජානම තමයි ළමයින්ටත් යන්නේ. ඒ නිසා දෙමාපියන්ගේ හැඩරුව, ඇවතුම් පැවතුම් සහ ගති ලක්ෂණ දරුවන්ටත් පිහිටලා තියෙනවා. ඒ නිසා එක වගේ තියෙන Fonts, එක එක Font Families යටතේ වර්ග කරලා තියෙනවා. අපි හිතමු අපි වෙබ් එකට දාන Font එක, වෙබ් එක බලන එක්කෙනාගේ Machine එකට Install කරලා නෑ කියලා. එහෙම වුණොත් ඒ Font එක එයාට පෙන්නන්නේ නෑ. හැබැයි Font Family Property එක නිසා, අපි දාපු Font එක අයිති වෙන Font Family එකේ, අපි දාපු Font එක ළගට ඉන්න, ඊළග Font එක පෙන්නනවා. ඒකත් එයාගේ එකේ තිබ්බේ නැත්නම්, Font Family එකේ ඉන්න ඊළග Font එක පෙන්නනවා. පහළ තියෙන විදිහට තමයි මේ Property එක පාවිච්චි කරන්නේ.
{ font - family : Verdana, Geneva, sans-serif }
{ font-family : Georgia, "Times New Roman", Times, serif }
{ font-family : "Courier New", Courier, monospace }
{ font-family : "Arial Black", Gadget, sans-serif }
{ font-family : "MS Serif", "New York", serif }
Fonts යටතේ මුලින්ම දැන ගන්න ඕනි Font Family Property එක ගැන. මේක ඇවිල්ලා හරියට පවුලක් වගේ. පවුලක දෙමාපියන්ගේ ජානම තමයි ළමයින්ටත් යන්නේ. ඒ නිසා දෙමාපියන්ගේ හැඩරුව, ඇවතුම් පැවතුම් සහ ගති ලක්ෂණ දරුවන්ටත් පිහිටලා තියෙනවා. ඒ නිසා එක වගේ තියෙන Fonts, එක එක Font Families යටතේ වර්ග කරලා තියෙනවා. අපි හිතමු අපි වෙබ් එකට දාන Font එක, වෙබ් එක බලන එක්කෙනාගේ Machine එකට Install කරලා නෑ කියලා. එහෙම වුණොත් ඒ Font එක එයාට පෙන්නන්නේ නෑ. හැබැයි Font Family Property එක නිසා, අපි දාපු Font එක අයිති වෙන Font Family එකේ, අපි දාපු Font එක ළගට ඉන්න, ඊළග Font එක පෙන්නනවා. ඒකත් එයාගේ එකේ තිබ්බේ නැත්නම්, Font Family එකේ ඉන්න ඊළග Font එක පෙන්නනවා. පහළ තියෙන විදිහට තමයි මේ Property එක පාවිච්චි කරන්නේ.
{ font - family : Verdana, Geneva, sans-serif }
{ font-family : Georgia, "Times New Roman", Times, serif }
{ font-family : "Courier New", Courier, monospace }
{ font-family : "Arial Black", Gadget, sans-serif }
{ font-family : "MS Serif", "New York", serif }
ඒත් ගොඩක් Web Designing කරන අය මේ වැඩේට පාවිච්චි කරන්නේ Online Web Fonts. මේ වගේ Fonts, Save වෙලා තියෙන්නේ Internet එකේම තමයි. කොහොමත් වෙබ් එකක් බලන්න නම් Internet තියෙන්න එපැයි. ඒ නිසා ලෝකෙ කොහේ ඉදන් බැලුවත් Web Fonts පෙන්නනවා. මේ නිසා ඒකාකාරී බවෙන් මිදුනු, නිතරම Microsoft Office Kit එකේ දකිනවට වඩා ලස්සන, හැඩ වැඩ දාපු, සෑහෙන විවිධත්වයක් තියෙන Fonts සිය දහස් ගණනක් පාවිච්චි කිරීමේ හැකියාව තියෙනවා.
අපේ Fonts වලට Size එකක් දෙන්න පුලුවන්, Font-Size කියන Property එකෙන්. Font එකකට Size එකක් දෙන්න පුලුවන් ක්රම කිහිපයක් තියෙනවා.
{ font-size: 1em; }
{ font-size: 16.3px; }
{ font-size: 30pt; }
{ font-size: 20%; }
em, px, pt, % ..... ඔය මොකකින් දුන්නත් හරි. හැබැයි මතක තියා ගන්න ඕනි em, px, pt, % අතරේ සැළකිය යුතු වෙනසක් තියෙනවා කියලා. ඕනෑම Font එකක Default Size එක එන්නේ මෙහෙමයි.
Px වලින් නම්,
|
% වලින් නම්,
|
em වලින් නම්,
|
Points වලින් නම්,
|
em වගේ එකකින් අතරමැදි අගයක් දෙන්න හරිම අමාරුයි. 1em සහ 2emවල ප්රමාණ අරගෙන බැලුවොත් නිකන් අහසට පොළව වගේ. ඒ නිසා ගොඩක් අය px වලින් අගය දීලා, ඒක % වලට හරවලා, ඊට පස්සේ em වලට හරව ගන්නවා. Px To Em Converter එක තමයි, මේ වැඩේට ගොඩක් අය අතරේ ප්රසිද්ධියක් උසුලන්නේ. ඒ වගේම එක එක ජාතියේ අකුරු වර්ගවල Sizes අතරත් විවිධත්වයක් තියෙනවා. එක අකුරු වර්ගයක 1em අගය කියන්නේ, තවත් අකුරු වර්ගයක දෙගුණය වෙන්න පුලුවන්.
{font-style:italic}
කියන Code එකෙන් අපිට පුලුවන්, ඕනෑම අකුරක්, වචනයක්, වාක්යක්, ඡේදයක් ඇල කරලා ලියන්න. HTMLවල නම් අපි මේක ලිව්වේ <i> කියලා. ඒත් දැන් ඒ වගේ ඒවා පාවිච්චි වෙන්නේ නෑ.
Sri Dalada Maligawa or the Temple of the Sacred Tooth Relic is a Buddhist temple in the city of Kandy, Sri Lanka. It is located in the royal palace complex of the former Kingdom of Kandy, which houses the relic of the tooth of Buddha.
අකුරුවලට පාට දෙන්න ඕනි නම් Color Property එක පාවිච්චි කළාම ඇති {color}.
වචනවල අකුරු ඔක්කොම Capital අකුරුවලින් පෙන්න ගන්න ඕනි නම් {font-variant:small-caps;} කියන එක දාන්න පුලුවන්. මෙතනදි අපිට වචන Capital වලින් Type කරලා දාන්න අවශ්ය වෙන්නේ නෑ. CSS Code එකෙන් ඉබේම Capital වලට Convert කර ගන්නවා.
{font-weight: bold;} එකෙන් පුලුවන් Font එකේ ඝනත්වය උපරිම කරන්න. ඒ කියන්නේ HTMLවල <b> වලින් කරපු දෙයම තමයි.
තව තියෙනවා Line Spacing කියලා Property එකක්. මේකෙන් වචනයක අකුරු අතර තියෙන ඉඩ ප්රමාණය අඩු වැඩි කරන්න පුලුවන්. Kerning කියලා කියන්නෙත් මේකටම තමයි. Value එක විදිහට ධන, සෘණ හෝ දශම අගයක් දෙන්න පුලුවන්. හැබැයි Px වලින්.
{ letter-spacing: 2.6px; }
{ letter-spacing: 20px; }
{ letter-spacing: -30px; }
අකුරුවලට පාට දෙන්න ඕනි නම් Color Property එක පාවිච්චි කළාම ඇති {color}.
වචනවල අකුරු ඔක්කොම Capital අකුරුවලින් පෙන්න ගන්න ඕනි නම් {font-variant:small-caps;} කියන එක දාන්න පුලුවන්. මෙතනදි අපිට වචන Capital වලින් Type කරලා දාන්න අවශ්ය වෙන්නේ නෑ. CSS Code එකෙන් ඉබේම Capital වලට Convert කර ගන්නවා.
{font-weight: bold;} එකෙන් පුලුවන් Font එකේ ඝනත්වය උපරිම කරන්න. ඒ කියන්නේ HTMLවල <b> වලින් කරපු දෙයම තමයි.
තව තියෙනවා Line Spacing කියලා Property එකක්. මේකෙන් වචනයක අකුරු අතර තියෙන ඉඩ ප්රමාණය අඩු වැඩි කරන්න පුලුවන්. Kerning කියලා කියන්නෙත් මේකටම තමයි. Value එක විදිහට ධන, සෘණ හෝ දශම අගයක් දෙන්න පුලුවන්. හැබැයි Px වලින්.
{ letter-spacing: 2.6px; }
{ letter-spacing: 20px; }
{ letter-spacing: -30px; }
ඡේදයක එහෙම පේළි අතර තියෙන පරතරය වැඩි කරන්න ඕන වගේ නම් Line Height කියන Property එක පාවිච්චි කරන්න පුලුවන්. Value එක විදිහට 1ට වැඩි ඕනෑම අගයක් දෙන්න පුලුවන්. දශම සංඛ්යාවක් වුණත් !
{ line-height:1.7 }
{ line-height:3 }
07. Texts
Text එකක් කියන්නේ ඉතින් Fonts ගොඩක එකතුවකට. Text Properties ගැන මතක් කරන කොට මුලින්ම මතක් වෙන්නේ Text Align Property එක. මේකෙන් වෙන්නේ Text එකේ පෙළගැස්ම හදන එක. එක්කෝ වමට. එක්කෝ දකුණට. නැත්නම් මැද්දට. එහෙමත් නැත්නම් සමබරව.
{ text-align: left; }
Dimbulagala also known as Gunners Rock during the British colonial period, is a rock formation in the Polonnaruwa District of Sri Lanka. By the time anthropologist Charles Gabriel Seligman visited the location in 1911, a cave within the rock had become a refuge of the indigenous Vedda people. During the 12th century AD, The Sinhalese people had constructed a Buddhist monastery within the rock formation. The Dimbulagala Raja Maha Vihara monastery was restored in the 1950s. The villagers around the rock are of mixed Vedda and Sinhalese ancestry. |
{ text-align: center; }Dimbulagala also known as Gunners Rock during the British colonial period, is a rock formation in the Polonnaruwa District of Sri Lanka. By the time anthropologist Charles Gabriel Seligman visited the location in 1911, a cave within the rock had become a refuge of the indigenous Vedda people. During the 12th century AD, The Sinhalese people had constructed a Buddhist monastery within the rock formation. The Dimbulagala Raja Maha Vihara monastery was restored in the 1950s. The villagers around the rock are of mixed Vedda and Sinhalese ancestry.
|
{ text-align: right; }
Dimbulagala also known as Gunners Rock during the British colonial period, is a rock formation in the Polonnaruwa District of Sri Lanka. By the time anthropologist Charles Gabriel Seligman visited the location in 1911, a cave within the rock had become a refuge of the indigenous Vedda people. During the 12th century AD, The Sinhalese people had constructed a Buddhist monastery within the rock formation. The Dimbulagala Raja Maha Vihara monastery was restored in the 1950s. The villagers around the rock are of mixed Vedda and Sinhalese ancestry.
|
{ text-align: justify; }
Dimbulagala also known as Gunners Rock during the British colonial period, is a rock formation in the Polonnaruwa District of Sri Lanka. By the time anthropologist Charles Gabriel Seligman visited the location in 1911, a cave within the rock had become a refuge of the indigenous Vedda people. During the 12th century AD, The Sinhalese people had constructed a Buddhist monastery within the rock formation. The Dimbulagala Raja Maha Vihara monastery was restored in the 1950s. The villagers around the rock are of mixed Vedda and Sinhalese ancestry.
|
අපි දන්නවා ඡේදයක පළවෙනි පේළිය පටන් ගන්නේ ටිකක් ඈත් කරලා. පළවෙනි පේළිය ඈත් කරන පරාසය හදාගන්න පුලුවන් {text-indent} කියන Property එකට % හෝ Px අගයක් දීලා.
{text-decoration: underline} එක හරහා අපිට පුලුවන් Text එකක් යටින් තනි ඉරක් අදින්න. {text-decoration:overline;} දැම්මොත් Text එක උඩින් ඉරක් ඇදෙනවා. Text එක කපලා යන්නම ඉරක් ගහන්න ඕනි නම්, අපිට පුලුවන් {text-decoration:line-through;} කියන එක පාවිච්චි කරන්න.
{text-shadow} කියන එකෙන් පුලුවන් අපේ Text එකට හෙවනැල්ලක් Set කරන්න. උදාහරණයක් විදිහට මෙහෙම ලියන්න පුලුවන්.
{text-shadow:5px 5px 3px red;}
අපි Box Shadow Property ගැන කතා කරන කොට හෙවනැලි ගැන ටිකක් විස්තරාත්මකව කතා කරපු නිසා, ආයිත් ඒ ගැන කතා කරන්න අවශ්ය නෑ කියලා හිතනවා.
Text Transform Property කියලත් එකක් තියෙනවා. මේකට ප්රධාන වශයෙන් Values දෙකක් දෙන්න පුලුවන්. {text-transform:capitalize;} කියලා දුන්නොත් ඔක්කොම අකුරු ටික Capital අකුරු වලට Convert වෙනවා. {font-variant:small-caps;} එකටත් වඩා ගොඩක් අය පාවිච්චි කරන්නේ මේ Code එක. අරෙහෙම දුන්නොත් අකුරු පෙන්නන්නේ ටිකක් පුංචියට. {text-transform:lowercase;} කියලා දැම්මොත්, මොනවා ලියලා තිබ්බත් ඔක්කොම ටික Simple අකුරු වලින් පෙන්නන්න ගන්නවා.
තව තියෙනවා Text Overflow කියලා Property එකක්. ඒකටත් තියෙනවා Clip සහ Ellipsis කියලා Values දෙකක්. බලන්න මේ Codes දෙක....
HTML <div id="text1"> This is some long text that will not fit in the box </div> <div id="text2"> This is some long text that will not fit in the box </div> |
CSS #text1 { white-space: nowrap; width: 200px; overflow: hidden; text-overflow: clip; border: 1px solid; } #text2 { white-space: nowrap; width: 200px; overflow: hidden; text-overflow: ellipsis; border: 1px solid; } |
මෙතන Divs දෙකක් තියෙනවා. එකක ID Name එක text1. අනිත් එකේ ID Name එක text2. බලන්න ලියලා තියෙන CSS දෙක. 1px ඝනකම තියෙන, 200px Border එකක් දාලා තියෙනවා. overflow:hidden කියලා සහ white-space: nowrap කියලා අනිවාර්යෙන්ම දෙන්න ඕන. overflow:hidden දැම්මම පෙන්නන්න පුලුවන් උපරිම කොටස පෙන්නලා, ඉතුරු කොටස හංගනවා. එතකොට ඒක පෙන්නන්නේ මේ විදිහටයි. මෙතන ඇත්තටම එකක් දාලා තියෙන්නේ, ඔයාලට තේරුම් ගන්න පහසු වෙන්න.
Divs ඇතුළේ ලියලා තියෙන වාක්ය දිග වැඩියි. Border එකේ Width එක ඊට වඩා පොඩියි. මේ දෙකෙන්ම වෙන්නේ Border එක ඇතුළේ වාක්ය යන්න පුලුවන් උපරිම ප්රමාණයට විතරක් යන එක. ඉඩ නැති වචන, දෙවෙනි පේළියට පනින එක නවත්තන්න තමයි මේ Code එක පාවිච්චි කරන්නේ. Clip එකේදී වාක්ය Border එකේ ගැට්ටේ නතර වෙලා තියෙනවා. Ellipsis එකේදි වාක්ය Border එකේ ගැට්ට ළගට ඇවිල්ලා නතර වෙලා, තිත් පෙළක් පෙන්නලා තියෙනවා.
මේ Overflow කියන එකෙනුත් කරන්න පුලුවන් ගොඩාක් දේවල් තියෙනවා. බලන්න පහළ තියෙන පින්තූරය. මේ වැඩේ කරන්න පාවිච්චි කරලා තියෙන්නේ {overflow: scroll} කියන Code එක. Div එකේ දිග සහ පළලට දීලා තියෙන්නේ 100px ගාණේ. එතකොට පෙන්නන්නේ 100px උසට විතරයි. 100pxට පහළ තියෙන ඉතුරු කොටස බලන්න, Scroll කරන්න පුලුවන් එකක් හැදෙනවා.
{overflow-x: hidden;} දැම්මොත්, 100px උපරිම දිගට පේළි ටික යනවා. ඉතුරු කොටස් පෙන්නන්නේ නෑ. හැබැයි ඒවා පහළට කැඩි කැඩි යන්නේ නෑ. පහළට Scroll කරන්න පුලුවන් එකක් හැදෙනවා.
{overflow-y: hidden;} දැම්මොත්, 100px උපරිම උසට පේළි ටික යනවා. ඉතුරු කොටස් පෙන්නන්නේ නෑ. හරහට Scroll කරන්න පුලුවන් එකක් හැදෙනවා.
08. Words
දැන් අපි ටිකක් වචන පැත්තට අවධානය යොමු කරමු. ඉස්සෙල්ලා අපි අකුරු අතර තියෙන ඉඩ ප්රමාණය වෙනස් කරන විදිහ ගැන ඉගෙන ගත්තා. දැන් බලමු වචන අතර තියෙන ඉඩ ප්රමාණය වෙනස් කරන්නේ කොහොමද කියලා. මෙච්චරයි කරන්න තියෙන්නේ....
{word-spacing: 30px}
30px කියන්නේ ඈත් විය යුතු දුර ප්රමාණය. මේකෙ අගය දෙන්න පුලුවන් PX වලින් විතරයි.
{word-spacing: 30px}
30px කියන්නේ ඈත් විය යුතු දුර ප්රමාණය. මේකෙ අගය දෙන්න පුලුවන් PX වලින් විතරයි.
{word-wrap: break-word;} කියන එක පාවිච්චි කළාම වෙන්නේ මේ වගේ වැඩක් ! Border එකට වඩා, ඒක ඇතුළේ තියෙන වාක්ය දිග වුණොත්, ඒක එළියට පනින අවස්ථා තියෙනවා. මේ Code එක දැම්මම, වාක්ය පේළිවලට කැඩිලා Border එක ඇතුළෙම පෙන්නනවා.
{word-break: keep-all;} කියලා දැම්මත් ඒකම තමයි වෙන්නේ. හැබැයි එතන තියෙන වෙනස තමයි හැම පේළියකම අන්තිම වචනය දෙකට කැඩෙන්නේ නැති එක. ඒ අනුව හැම පේළියකම අන්තිම වචනයත්, මුල වචනයත් සම්පූර්ණ වචනයක් විදිහට පෙන්නනවා. කලින් Code එකේදි Border එකේ ගැට්ටෙ වදින පළවෙනි වචනය දෙකට කැඩිලා, අනිත් පේළියටත් කොටසක් එකතු වෙනවා.
{word-break: break-all;} දැම්මොත් හැම වචනයක්ම යන්න පුලුවන් "උපරිමම උපරිම" ප්රමාණයට යනවා. ඒ නිසා හැම පේළියකම අග වචනය අනිවාර්යෙන්ම දෙකට කැඩිලා, කොටසක් පල්ලෙහා පේළියට යනවා. මෙතනත් Border කතන්දරයක් ඇදලා ගත්තේ ඔයාලට මනෝමයෙන් හිතාගන්න පහසු වෙන්න කියලත් මතක තියා ගන්න ඕන.
09. Captions
HTML Tag එකක් තියෙනවා <caption> කියලා. Caption එක දෙන්න තමයි ඒක පාවිච්චි කරන්නේ. සාමාන්යයෙන් ඒක ඇතුළේ මොකක් හරි ලිව්වම, ඒක Default පෙන්නන්නේ Element එක උඩින්. Element එක යටින් පෙන්නගන්න ඕන නම් {caption-side: bottom;} කියලා ලියන්න පුලුවන්.