CSS කොහොමද වෙබ් පිටුවට Add කරන්නේ?
මේ වැඩේට ක්‍රම 3ක් තියෙනවා
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet එකක් යොදා ගන්නේ බොහෝ වේලාවට එකම CSS code එක ගොඩක් පිටු වලට යොදා ගන්නවනම් තමයි. ඉතින් css code වෙනස් කරලා පහසුවෙන් එම සෑම පිටුවකම Interface එක වෙනස් කරගන්න පුළුවන්. මේ සෑම පිටුවකම අපි <link> tag එක භාවිතා කර Style sheet එක link කල යුතුයි. මෙන්න මේ විදිහට..
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
External Style Sheet එකක් අපිට ඕනෑම Text Editor එකක් මගින් ලිවිය හැකියි. මෙහිදී වැදගත් වන්නේ එය Save කිරීමේදී extension එක ලෙස .css යනුවෙන් ලබා දීමයි.
Internal Style Sheet
Internal Style Sheet එකක් යොදා ගන්නේ තනි පිටුවකට ආවේනික වූ design එකක් නිර්මාණය කිරීම සඳහායි.
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline style
HTML Code එක අස්සෙම CSS code එක යොදා ගැනීම මෙයින් අදහස් වේ.
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
හොඳයි අපි මූලික දේවල් ටික තමයි ඉගෙන ගත්තේ. දැන් එකින් එක Coding කරන විදිය බලමු.
CSS Background
element එකක Background එකට අදාල වෙනස්කම් සිදුකිරීම මෙමගින් සිදුවේ.දැන් අපි Background Properties එකින් එක සාකච්චා කරමු.
Background Color - Element එකක Background Color එක මෙමගින් වෙනස් කල හැක. ඔය පල්ලෙහා තියෙන Code එක බලන්න. මෙමගින් Web පිටුවේ පසුබිම් වර්ණය නිල් පැහැයට හරවයි.
body {background-color:blue;}
color එක අපිට ක්‍රම කිහිපයකටම දිය හැකියි.
- name - ඉහත පරිදි Color එකේ නම ලබා දීමෙන්
- RGB -RGB value එකක් ලෙස "rgb(255,0,0)"
- Hex -hex value ලෙස "#ff0000"
:)
:(
;)
:D
;;-)
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
:-S
#:-S
7:)
:((
:))
:|
/:)
=))
O:-)
:-B
=;
:-c
:)]
~X(
:-h
:-t
8-7
I-)
8-|
:-a
:-$
[-(
:O)
8-
2:-P
(:|
=P~
#-o
=D7
:-SS
@-)
:^o
:-w
7:P
2):)
X_X
:!!
\m/
:-q
:-bd
^#(^
:ar!
No comments:
Post a Comment