වෙබ් පිටු හැඩගැන්වීම සඳහා විලාසිතා පත්‍ර (Style Sheets - CSS) භාවිතය
CSS (Cascading Style Sheets) භාවිතා කරනුයේ HTML මඟින් සාදන ලද වෙබ් පිටුවක පෙනුම (Appearance) ආකර්ෂණීය ලෙස හැඩගැන්වීමටයි.
1. CSS ව්‍යාකරණ (Syntax) සහ සටහන් (Comments)
CSS රීතියක් ප්‍රධාන කොටස් දෙකකින් සමන්විත වේ: Selector සහ Declaration Block.
-
h1 { color: red; font-size: 20px; } -
CSS Comments:
/* මෙය CSS සටහනකි */
2. CSS තේරීම්කාරක (Selectors)
-
Element Selector: HTML ටැග් එක කෙලින්ම තෝරා ගැනීම. (උදා:
p { color: blue; }) -
ID Selector: කිසියම් නිශ්චිත තනි මූලද්‍රව්‍යයක් සඳහා පමණක් යෙදීමට
#ලකුණ භාවිතා කරයි. (උදා:#main-header { text-align: center; }) -
Class Selector: එකකට වඩා වැඩි මූලද්‍රව්‍ය ප්‍රමාණයකට පොදුවේ යෙදීමට තිත (
.) ලකුණ භාවිතා කරයි. (උදා:.red-text { color: red; }) -
Group Selector: එකම විලාසිතාව මූලද්‍රව්‍ය කිහිපයකට එකවර යෙදීම (කොමාවෙන් වෙන් කරනු ලැබේ). (උදා:
h1, h2, p { font-family: Arial; })
3. CSS ඇතුළත් කරන ක්‍රම 3 (Ways of inserting CSS)
-
Inline CSS: HTML ටැගය තුළම
styleඇට්‍රිබියුටය ලෙස ලිවීම.-
<p style="color: green;">Inline CSS</p>
-
-
Internal / Embedded CSS: HTML පිටුවේ
<head>කොටස තුළ<style>ටැග් යොදා ලිවීම. -
External CSS: වෙනමම
.cssදිගුව සහිත ගොනුවක ලියා, එය<link>ටැගය මඟින් HTML පිටුවට සම්බන්ධ කිරීම.-
<link rel="stylesheet" type="text/css" href="style.css">
-
4. ප්‍රධාන හැඩසැසීම් වර්ග (Formatting Properties)
-
Background:
background-color: yellow;,background-image: url('bg.jpg'); -
Text & Fonts:
color,font-family,font-size,text-align -
ලැයිස්තු, වගු සහ ලින්ක් හැඩසැසීම:
list-style-type,border-collapse,text-decoration: none;(ලින්ක් එකක යටින් ඉර ඉවත් කිරීමට).
Rate this Lesson
Login to rate this lesson