អំពីភាសាកូតCSS

  1. i.   CSS ជាអ្វី?

CSS  មកពីពាក្យថា Cascading Style Sheets ។ នៅក្នុងកូដ CSS អនុញ្ញាតិអោយលោក អ្នក រចនាគេហទំព័រមួយ បានយ៉ាងស្អាត ដោយយើងអាច ធ្វើការផ្លាស់ប្ដូរ និង រៀបចំFonts, Color , Background, Border,  លក្ខណៈរបស់អត្ថបទ ឬ លក្ខណៈរបស់តំណភ្ជាប់ ជាដើម ។

នៅក្នុង HTML យើងមិនអាចរចនា​អត្ថបទ របស់យើងទៅតាមអ្វីដែលយើងត្រូវការ នោះទេ តែចំនែកនៅក្នុង CSS វិញ មានពាក្យគន្លឺជាច្រើន ដើម្បីធ្វើអោយគេហទំព័ររបស់យើង មើលទៅមាន ភាពស្រស់ស្អាត និង ទាក់ទាញ។

ម៉្យាងវិញទៀត  CSS  អាចអោយយើងធ្វើការកំនត់ វានៅក្នុងក្បាលទំព័រ (Header)ក៏បាន ឬ យើង ដាក់វាជាឯកសារ(File) ផ្សេងដាច់ដោយលែកក៏បាន ដោយយើងធ្វើការដំណរភ្ជាប់មកឯកសារ HTML  

អត្ថប្រយោជន៏របស់

ក.​ ចំនេញពេលវេលាៈ         សំរាប់កូដ HTML ពេលយើងសសេរ Font Size, Color, Size  … យើងត្រូវ ការ សសេរវាដដែលៗ គ្រប់ទីកន្លែងដែលយើងចង់បំលែងទំរង់ផ្សេងៗរបស់អត្ថបទ​។

ខ. គេហទំព័រ ដំណើរការលឿន

គ.ងាយស្រួលធ្វើការកែប្រែ រាល់ចំនុចផ្សេងៗ

ឃ.អាចបន្ថែមលក្ខណៈជាច្រើនទៅលើ html

  1.  CSS Syntax

CSS Syntax មានពីរធំៗ គឺ Selector និង Declaration (Declaration អាចមានមួយ ឬ ច្រើន)

  1. 1.   Selector

យើងអាចប្រើ Selector តែមួយ ឬច្រើនក៏បានដែលដែរ ដែលគេហៅថា Group Selector ។

  1. ការប្រតិបត្ដិ របស់កូដ CSS(Implement CSS)

ការប្រតិបត្ដិ  (Implement CSS)  ឬការផ្ដល់នូវតំលៃ​របស់កូដCSS មាន ៣ ប្រភេទ​គឺ Inline Style,  Internal Style Sheet , External Style Sheet ។

  1. Inline Style

ការប្រើ Inline Style គ្រាន់តែ ប្រើនូវ Attribute ណាមួយរបស់ CSS នៅក្នុងTag  ណាមួយ(html) ដែលយើងចង់អោយកូដនោះផ្ដល់តំលៃទៅអោយ។

<p style=”color:green; margin-left:20px”>Inline Style</p>

  1. Internal Style Sheet

យើងគ្រាន់តែ បន្ថែមនូវ Tag Style ដែលមានទំរង់ដូចខាងក្រោម នៅចន្លោះ Header របស់កូដ HTML នោះវានឹង Apply រាល់អត្ថបទទាំងអស់ ។ តែនេះល្អ សម្រាប់តែ ការបង្កើតតែទំព័រ តែមួយ ប៉ុណ្ណោះទើបល្អ ។

<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>

  1. External Style Sheet

សំរាប់​External Style Sheet នេះវាល្អក្នុងតំណភ្ជាប់ទៅទំព័រច្រើនផ្សេងៗគ្នា ជាមួយទំរង់ CSS តែមួយ  ។  ហើយរាល់ទំព័រនីមួយៗ ត្រូវតែមានលីងទៅកាន់ ឯកសាររបស់ CSS ។​

នៅក្នុងទំព័ររបស់ html នីមួយៗ នៅចន្លោះ Header ត្រូវមានកូដ Link ដូចខាងក្រោម ៖

<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
</head>

ហើយសំរាប់ File របស់ CSS យើងត្រូវរក្សាទុកជា (.css) ដើម្បីអោយFile html ស្គាល់​ ត្រូវប្រាកដថា ទីតាំងរបស់ឯកសារទាំងអស់នោះ ត្រឹមត្រូវ។

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}

  1. iii.    ID & ClASS

យើងប្រើ ID or Class ដើម្បីកំណត់ប្រភេទ ឬ ឈ្មោះនៃ Selector តាមដែលយើង ត្រូវការ ក្នុងការបន្ថែមធាតុផ្សេងៗ នៅក្នុង html

1. ID

នៅពេលយើងសសេរនៅក្នុងកូដ html ប្រើក្នុងទំរង់ <div id=”text”>…</div>

ប៉ុន្ដែនៅក្នុងឯកសារ CSS វិញ យើងប្រើសញ្ញាទ្រុងជ្រូក(#) បន្ទាប់មកឈ្មោះ (#text{color: blue;….})

2. Class

យើងប្រើ Class ក្នុងការកំណត់ជាលក្ខណះក្រុមទៅលើ Element របស់ HTML

ដោយយើងប្រើសញ្ញាចុច (.) សំរាប់កំនត់នៅពេលសសេរ នៅក្នុងឯកសារ CSS

[.center {text-align:center;} ឬ p.center {text-align:center;}]

<head>

<style type=”text/css”>

h1.css-code { color:#ffffff }

p.css-code { color:#aabbcc; }

</style>

</head>

<body>

<h1 class=”css-code”>CSS Class</h1>

<p class=”css-code”>CSS classes can be very useful</p>

</body>

II.CSS Style

  1. i.   Style Background

        លក្ខណៈរបស់ Background អាចមានជាពណ៌( Background-color: ) ឬ ក៏ជារូបភាពក៏បាន ហើយចំពោះ Background ជារូបភាព( Background-image: )ក៏មានលក្ខណៈ របស់វាដូចជា Background-repeat, Background-position   

  1. 1.   Background-Color

Background-Color គឺប្រើសំរាប់តែកំណត់ពណ៌សំរាប់ផ្នែកខាងក្រោយរបស់Element ណាមួយប៉ុណ្ណោះ  ដូចជា Body ឬ ផ្នែកណាមួយ  ។​

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

Ex:

<html><head><style type=”text/css”>.a{background-color: #99CC33;}</style>

<title>Cascading Style Sheets</title>

</head>

<body><p>Using Background-Color …</p></body>

</html>

 

 

 

 

 

 

  1. 2.   Background-Image

Background-Image គឺប្រើសំរាប់កំណត់រូបភាព អោយនៅជាផ្នែកខាងក្រោយនៃ Element ។

body {background-image:url(‘bg.gif’);}

បើយើងសសេរបែបនេះ នោះបានន័យថាទំព័រនេះទាំងមូលនឹងមានរូបឈ្មោះ bg.gif  ​ ជា Background ពីខាងក្រោយ។

Ex:

<html><head><style type=”text/css”>

body{background-image: url(bgimg.png); color:#FFFFFF; font-size: 36px;}

</style><title>Cascading Style Sheets</title></head>

<body>

<p>Using Background-Image …</p>

</body></html>

  1. 3.   Background-repeat

ប្រើវានៅពេលដែលយើង ចង់អោយ Backgroundនោះ មានបន្ដគ្នារហូត នៅលើទំព័ររបស់ វ៉ិបសាយ ដោយក្នុងនោះវាអាចជាជួរដេក(repeat-x) ឬ ជួរឈរ(repeat-y) ទៅតាមយើងកំណត់ ឬក៏មិន(no-repeat) ។

  1. A.   ជួរដេក Repeat-X

body
{
background-image:url(‘bg.png’);
background-repeat:repeat-x;
}

  1. B.   ជួរឈរ Repeat-y

body
{
background-image:url(‘bg.png’);
background-repeat:repeat-y;
}

  1. C.  No-Repeat

body
{
background-image:url(‘bg.png’);
background-repeat:no-repeat;
}

យើងប្រើ no-repeat ដើម្បីកុំអោយរូបភាពរបស់ខាងក្រោយ បង្ហាញដដែលៗ តាមជួរដេក ឬជួរឈរ ។

ចំណាំៈ  ទំហំរូបភាព គឺជាចំនុចសំខាន់នៃការប្រើប្រាស់ background-repreat ។

  1. 4.      Background-position

body
{
background-image:url(‘bg.png’);
background-repeat:no-repeat;
background-position:right top;
}

លក្ខណះនៃការសសេរ ក៏អាចមានទំរង់ដូចខាងក្រោមផងដែរ ៖

body {background:#ffffff url(‘bg.png’) no-repeat right top;}

  1. 5.      Background-attachment

យើងប្រើ Background-attachment ដើម្បីកំណត់ថា រូបភាពផ្នែកខាងក្រោយនោះ ជា Fixed ឬ​ក៏Scroll នៅក្នុងទំព័រនោះ ។

6. Background

យើងប្រើ Background គឺអាចសសេររាល់​ Properties ផ្សេងៗ ទាំងអស់នៅក្នុងនោះ ដូចជា Background-Color, Background-image, Background-repeat, background-position និង Background-attachment

ក្នុងទំរង់ដូចខាងក្រោម៖

body {background:#ffffff url(‘bg.png’) no-repeat right top;}


  1. ii.     Style Text
    1. 1.      Text Color ( text-color: )

យើងអាចប្រើជា ឈ្មោះ ជាកូដ និង ជាតំលៃ(RGB)ដូចខាងក្រោម ៖

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

2. Text Align(text-align:)

#p{text-align:right,left,center,justify;}

យើងអាចជ្រើសរើសមួយណា ទៅតាមតំរូវការរបស់យើងជាក់ស្ដែង។​

Ex:    Text-Align:.. and Color:..

<html><head><style type=”text/css”>

.cl{color:#000000; text-align:left}

.al{text-align: center; color:#FF0000;}

</style><title>Cascading Style Sheets</title></head><body>

<p>Style Text in CSS  … Text-Color…</p>

<p>Style Text in CSS  … Text-Align…</p>

</body></html>

3. Text Indent(text-indent:)

P{text-indent:..px;}

ដើម្បីចុះបន្ទាត់  ។​

4. Text Letter Spacing(letter-spacing:..px;)

សំរាប់កំណត់គំលាតរវាងអក្សរមួយទៅអក្សរមួយទៀត ។​

 

Ex: Text-Indent and letter-spacing:

 

<html><head><style type=”text/css”>

.cl{text-indent: 20px;letter-spacing: 7px; }

</style><title>Cascading Style Sheets</title></head>

<body>

<p>Style Text in CSS  … Text-Indent…<br>Style Text in CSS.. letter-spacing:..</p>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

5. Text Word Spacing (word-spacing:..px;)

សំរាប់កំណត់គំលាតរវាងពាក្យមួយ ទៅពាក្យមួយទៀត ។

6. Text Decoration (text-decoration:)

P{text-decoration:none, overline, line-through,underline, blink; }

សំរាប់កំណត់លក្ខណះរបស់បន្ទាត់ជាមួយអក្សរ ។​

7. Text Transformation (text-transform:)

P{text-transform:uppercase, lowercase, capitalize;}

8. Text Direaction (direction:ltr,rtl,..)

Ltr=left to right , rtl=Right to left;

P{direction:rtl;}

9. Text Shadow (text-shadow: )

P{text-shadow: ..px ..px..px..color}

ប្រើសំរាប់ដាក់ស្រមោលទៅ អោយអក្សរ ។

  1. Text White Space(white-space:pre)

សំរាប់កំណត់អោយ អក្សរនៅតែរក្សានូវ ទំរង់ដដែលដូចពេលសសេរ ។

 

 

 

  1. iii.    CSS Font

1. Font Family(font-family: )

P{font-family:”Time New Roman”, Serif, ..}

សំរាប់ផ្លាស់ប្ដូរប្រភេទ​ឬ រាងរៅរបស់តួអក្សរ ។

2. Font Style(font-style: normal, italic, oblique;)

3. Font Size(font-size:..px;)

សំរាប់កំណត់នូវទំហំ​របស់អក្សរ  ហើយខ្នាតរបស់វា អាចគិតជា Pixel ឬ ក៏ភាគរយក៏បាន ឬ em

  1. 4.  Font Properties

P{font:italic small-caps bold 20px georgia,garamond,serif;}

 

Ex: font-family, font-size, font-style..

<html><head>

<style type=”text/css”>

.tfont{font-family: Georgia, “Times New Roman”, Times, serif; font-size: 36px; font-style: oblique;}

</style><title>Cascading Style Sheets</title>

</head>

<body>

<p class=”tfont”>Style Text in CSS  … font-family…font-size.font-style..</p>

</body>

</html>

 

 

 

 

 

 

 

 

  1. iv.       CSS Links
    1. 1.    Style links

a:link{color:#090909;} Link ដែលមិនទាន់មើល

a:visited{color:#00ff00;} Link ដែលមើលរួចហើយ

a:hover{color:#ff99ff;} Link ដែលដាក់ Mouse នៅលើ

a:active{color:#ffbbff;}Link ដែលបានជ្រើសរើសរួច

2. Common Style Link

ដោយប្រើ Text-Decoration :

a:link{text-decoration:none;} Link ដែលមិនទាន់មើល

a:visited{ text-decoration:none;} Link ដែលមើលរួចហើយ

a:hover{ text-decoration:underline;} Link ដែលដាក់ Mouse នៅលើ

a:active{ text-decoration:underline;}Link ដែលបានជ្រើសរើសរួច

ដោយប្រើ Background-color:

a:link{background-color:#090909;} Link ដែលមិនទាន់មើល

a:visited{background-color:#00ff00;} Link ដែលមើលរួចហើយ

a:hover{background-color:#ff99ff;} Link ដែលដាក់ Mouse នៅលើ

a:active{background-color:#ffbbff;}Link ដែលបានជ្រើសរើសរួច

    

     យើងអាចបន្ថែមStyle ផ្សេងៗទៀត ទៅតាមអ្វីដែលយើងត្រូវការដូចជា Background-image: ជាដើម។

  1. v.   CSS Style List

1. List (Circle , square , upper-roman, loweralpha)

Ul{list-style-type: circle, square ,upper-roman, lower-alpha;}

2. List-style-image:

បើរូបភាពដើម្បី ធ្វើជាលក្ខណះរបស់List

Ul{list-style-image:url(image.gif);}

បើយើងប្រើ list-style: នោះបានន័យថាគ្រប់Listទាំងអស់មានប្រភេទតែមួយ។

3. List-style-position

នៅក្នុង List-Style-Postion មានពីប្រភេទគឺ Outside និង Inside

Ol{list-style-position:inside,outside;}

vi. CSS Table

ការបង្កើតតារាងនៅក្នុង CSS ក៏មិនខុសពីលក្ខណនៃការបង្កើតនៅក្នុង html ដែរ គ្រាន់តែ យើងមានការផ្លាស់ប្ដូរទ្រង់ទ្រាយ និងលក្ខណះរបស់តារាង មានភាពខុសគ្នា

1. Table Border

Border:..px;

border-style:dashed, dotted, double;

border-color:#909090;

Example:

<html>

<head>

<style type=”text/css”>

table,th,td{border:2px solid black;}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>One</td>

<td>Two</td>

</tr>

<tr>

<td>Jam</td>

<td>David</td>

</tr>

</table>

</body>

</html>

2. Collapse Border

Table{Border-collapse:collapse, separate;}

Example: Collapse

Example: separate

  1. CSS BOX MODEL

យើងបែបចែក Box ជា ៤ ផ្នែកផ្សេងៗ ទៅតាមលំដាប់ ដូចរូបភាពខាងលើ ៖

ក. Margin:   គឺជាផ្នែកខាងក្រៅបំផុត

ខ. Border:  គឺជាស៊ុមដែល ព័ទ្ធជុំវិញ បន្ទាប់ពី Margin

គ. Padding:  គឺជាចន្លោះ រវាង Border និង Content

ឃ. Content : គឺជាផ្នែកខាងក្នុងបំផុត កន្លែងដែលយើងសសេរ ឬ ដាក់រូបភាព​

  1. i.   Box Model

<html>

<head>

<style type=”text/css”>

div.ex

{

width:320px;

padding:10px;

border:5px solid green;

margin:0px;

}

</style>

<title>Cascading Style Sheets</title>

</head>

<body>

<div class=”ex”>Everything is for …<br />

Happy to be a web Editor…</div> </body></html>

ii.Border Style

<html>

<head>

<style type=”text/css”>

.a{border-style: dashed; border-width:5px; width:50%;}

.b{border-style: dotted; border-width:5px; width:50%;}

.c{border-style: solid; border-width:5px; width:50%;}

.d{border-style: double; border-width:5px; width:50%;}

.e{border-style: groove; border-width:5px; width:50%;}

.f{border-style: ridge; border-width:5px; width:50%;}

.g{border-style: inset; border-width:5px; width:50%;}

.h{border-style: outset; border-width:5px; width:50%;}

</style>

<title>Cascading Style Sheets</title>

</head>

<body>

<p class=”a”>style:dashed</p>

<p class=”b”>style:dotted</p>

<p class=”c”>style:solid</p>

<p class=”d”>style:double</p>

<p class=”e”>style:groove</p>

<p>style:ridge</p>

<p class=”g”>style:inset</p>

<p class=”h”>style:outset</p>

</body>

</html>

  1. Border-color

P{border-color:#ccddcc;}

សំរាប់ដាក់ពណ៌អោយស៊ុមទាំងមូល។ ចំពោះ Border មានលក្ខណះជាច្រើនទៀត ដូចជា ៖

border ដាក់ស៊ុមទាំងអស់
border-bottom ដាក់ស៊ុមតែផ្នែកខាងក្រោម
border-bottom-color ដាក់ពណ៌តែផ្នែកខាងក្រោម
border-bottom-style ដាក់លក្ខណះរបស់ផ្នែកខាងក្រោម
border-bottom-width ដាក់ទំហំរបស់ផ្នែកខាងក្រោម
border-color ដាក់ពណ៌សំរាប់ស៊ុមជុំវិញ
border-left ដាក់ស៊ុមតែផ្នែកខាងឆ្វេង
border-left-color ដាក់ពណ៌ផ្នែកខាងឆ្វេង
border-left-style ដាក់លក្ខណះផ្នែកខាងឆ្វេង
border-left-width ដាក់ទំហំស៊ុមផ្នែកខាងឆ្វេង
border-right ដាក់ស៊ុមផ្នែកខាងស្ដាំ
border-right-color ដាក់ពណ៌ស៊ុមផ្នែកខាងស្ដាំ
border-right-style ដាក់លក្ខណះផ្នែកខាងស្ដាំ
border-right-width ដាក់ទំហំផ្នែកខាងស្ដាំ
border-style ដាក់លក្ខណះរបស់ស៊ុម
border-top ដាក់ស៊ុមខាងលើ
border-top-color ដាក់ពណ៌ផ្នែកខាងលើ
border-top-style ដាក់លក្ខណះស៊ុមផ្នែកខាងលើ
border-top-width ដាក់ទំហំស៊ុមផ្នែកខាងលើ
border-width ដាក់ទំហំរបស់ស៊ុម

iv.CSS Outline

Property Description Values
outline ដាក់លក្ខណះ Outline outline-color
outline-style
outline-width
inherit
outline-color ដាក់ពណ៌ Outline color_name
hex_number
rgb_number
invert
inherit
outline-style ដាក់លក្ខណះអោយOutline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width កំណត់ទំហំអោយOutline thin
medium
thick
length
inherit
  1. v.   CSS Margin

P{margin:..px;}គិតជា Px ឬ ជាភាគរយ

Property Description
margin កំណត់ដោយប្រើតែមួយDeclaration
margin-bottom កំណត់គំលាតខាងក្រោម
margin-left កំណត់គំលាតខាងឆ្វេង
margin-right កំណត់គំលាតខាងស្ដាំ
margin-top កំណត់គំលាតខាងលើ

vi.CSS Padding

លក្ខណះរបស់ Padding ក៏មិនខុសគ្នា ជាមួយនឹង Margin ដែរ គឺគ្រាន់តែ Padding គិតគំលាតរវាង Content​ នៅក្នុង Border

 

 

 

 

 

 

 

 

 


 

  1. IV.      CSS ADVANCED
  2. i.    Grouping/Nesting

1. Grouping

      ការប្រើ Grouping គឺការកំនត់ Element ជាច្រើនផ្សេងគ្នា ដើម្បីអោយមាន លក្ខណតែមួយ ។

H1,h2, h3, h4, p{…(Properties) .. .}

2. Nesting

    ការប្រើ Nesting គឺការកំណត់ដោយឡែកៗ ពីគ្នារបស់ Element នីមួយ ។

P{properties;}, h2{properties;}, h1{properties}.. .

ii.CSS Dimension

 

P{height:..px, width:..px } ខ្នាត់របស់វា គិតជា % ឬ px ។

Property Description Values
height កំណត់កំពស់របស់ element auto
length
%
inherit
max-height កំណត់កំពស់ខ្ពស់បំផុតរបស់ element none
length
%
inherit
max-width កំណត់ទទឹងធំបំផុតរបស់  element none
length
%
inherit
min-height កំណត់កំពស់ទាបបំផុតរបស់ element Length
%
inherit
min-width កំណត់ទទឹងទាបបំផុតរបស់ element length
%
inherit
width កំណត់ទំហំទទឹងរបស់  element auto
length
%
inherit

 

រៀបរៀងដោយលោកគ្រូ ពៅ តុលា ជាប្រធានផ្នែកទំនាក់ទំនងសង្គម នៃមជ្ឈមណ្ឌលបណ្តុះបណ្តាលវិជ្ចាជីវៈដុន បូស្កូខេត្តកែប

គេហទំពរ័ៈ http://donboscokep.org/

អ៊ីម៉ែលៈpovtula@gmail.com

 

ឆ្លើយ​តប

Fill in your details below or click an icon to log in:

ឡូហ្កូ WordPress.com

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី WordPress.com របស់​អ្នក​។ Log Out / ផ្លាស់ប្ដូរ )

រូប Twitter

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Twitter របស់​អ្នក​។ Log Out / ផ្លាស់ប្ដូរ )

រូបថត Facebook

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Facebook របស់​អ្នក​។ Log Out / ផ្លាស់ប្ដូរ )

Google+ photo

អ្នក​កំពុង​បញ្ចេញ​មតិ​ដោយ​ប្រើ​គណនី Google+ របស់​អ្នក​។ Log Out / ផ្លាស់ប្ដូរ )

កំពុង​ភ្ជាប់​ទៅ​កាន់ %s