CSS តំណាងឱ្យ Cascending Style Sheets
។
CSS ពិពណ៌នាអំពី របៀបដែលធាតុ HTML
ត្រូវបានបង្ហាញនៅលើអេក្រង់ក្រដាសឬនៅក្នុងប្រព័ន្ធផ្សព្វផ្សាយផ្សេងទៀត ។
CSS រក្សាទុកការងារច្រើន ។ វាអាចគ្រប់គ្រងប្លង់គេហទំព័រច្រើនក្នុងពេលតែមួយ។
CSS អាចត្រូវបានបន្ថែមទៅធាតុ HTML ក្នុង 3 វិធី:
- Inline - ដោយប្រើគុណលក្ខណៈរចនាប័ទ្មក្នុងធាតុរបស់ HTML
- ផ្នែកខាងក្នុង - ដោយប្រើធាតុ <style> នៅក្នុងផ្នែក <ក្បាល>
- ខាងក្រៅ - ដោយប្រើឯកសារ CSS ខាងក្រៅ
វិធីសាមញ្ញបំផុតដើម្បីបន្ថែម
CSS គឺត្រូវរក្សារចនាប័ទ្មក្នុងឯកសារ CSS ដាច់ដោយឡែក។ ទោះជាយ៉ាងណាក៏ដោយនៅទីនេះយើងនឹងប្រើរូបរាងខាងក្នុងនិងរចនាបថផ្ទៃក្នុងពីព្រោះនេះងាយស្រួលក្នុងការបង្ហាញនិងងាយស្រួលសម្រាប់អ្នកដើម្បីសាកល្បងវាដោយខ្លួនឯង។
CSS ក្នុងតួត្រូវបានប្រើដើម្បីអនុវត្តរចនាប័ទ្មតែមួយគត់ទៅធាតុ
HTML តែមួយ។
CSS Inline ប្រើរចនាប័ទ្មគុណលក្ខណៈរបស់ធាតុ
HTML ។
ឧទាហរណ៍នេះកំណត់ពណ៌អត្ថបទនៃធាតុ <h1> ទៅជាពណ៌ខៀវ:
ឧទាហរណ៍
<h1 style="color:blue;">This is a Blue Heading</h1>
CSS ខាងក្នុង
CSS ខាងក្នុងត្រូវបានប្រើដើម្បីកំណត់រចនាប័ទ្មសម្រាប់ទំព័រ
HTML តែមួយ។
CSS ខាងក្នុងត្រូវបានកំណត់ក្នុងផ្នែក <head> នៃទំព័រ HTML
ក្នុងធាតុ <style>:
ឧទាហរណ៍
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS ខាងក្រៅ
សន្លឹករចនាប័ទ្មខាងក្រៅត្រូវបានប្រើដើម្បីកំណត់រចនាប័ទ្មសម្រាប់ទំព័រ
HTML ជាច្រើន។
ជាមួយសន្លឹករចនាប័ទ្មខាងក្រៅអ្នកអាចផ្លាស់ប្តូររូបរាងនៃគេហទំព័រទាំងមូលដោយការផ្លាស់ប្តូរឯកសារមួយ!
ដើម្បីប្រើសន្លឹករចនាប័ទ្មខាងក្រៅបន្ថែមតំណទៅវានៅក្នុងផ្នែក <ក្បាល>
នៃទំព័រ HTML:
ឧទាហរណ៍
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
សន្លឹករចនាប័ទ្មខាងក្រៅអាចត្រូវបានសរសេរក្នុងកម្មវិធីនិពន្ធអត្ថបទ។ ឯកសារនេះមិនត្រូវមានលេខកូដ HTML ទេហើយត្រូវតែរក្សាទុកជាមួយផ្នែកបន្ថែម
.css ។
នេះជារបៀបដែល
"styles.css" មើលទៅ:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
ពុម្ពអក្សរ CSS
លក្ខណសម្បត្តិ ពណ៌ CSS
កំណត់ពណ៌អត្ថបទដែលត្រូវប្រើ។
លក្ខណសម្បត្តិ គ្រួសារពុម្ពអក្សរ CSS កំណត់ពុម្ពអក្សរដែលត្រូវប្រើ។
លក្ខណសម្បត្តិ ទំហំពុម្ពអក្សរ CSS កំណត់ទំហំអត្ថបទដែលត្រូវប្រើ។
ឧទាហរណ៍
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
ស៊ុម CSS
លក្ខណសម្បត្តិ ស៊ុម CSS
កំណត់ស៊ុមជុំវិញធាតុ HTML:
ឧទាហរណ៍
p {
border: 1px solid powderblue;
}
CSS Padding
border: 1px solid powderblue;
}
CSS Padding
លក្ខណៈសម្បត្តិ ចន្លោះ CSS
កំណត់ចន្លោះ (ចន្លោះ)
រវាងអត្ថបទនិងស៊ុម:
ឧទាហរណ៍
p {
border: 1px solid powderblue;
padding: 30px;
}
border: 1px solid powderblue;
padding: 30px;
}
រឹម CSS
លក្ខណសម្បត្តិ រឹម CSS
កំណត់រឹម (ចន្លោះ)
ខាងក្រៅស៊ុម:
ឧទាហរណ៍
p {
border: 1px solid powderblue;
margin: 50px;
}
border: 1px solid powderblue;
margin: 50px;
}
លេខសម្គាល់គុណលក្ខណៈ
ដើម្បីកំណត់រចនាប័ទ្មជាក់លាក់សម្រាប់ធាតុពិសេសមួយបន្ថែមគុណលក្ខណៈលេខសម្គាល់ទៅធាតុ:
<p id="p01">I am different</p>
បន្ទាប់មកកំណត់រចនាប័ទ្មសម្រាប់ធាតុដែលមានលេខសម្គាល់ជាក់លាក់:
ឧទាហរណ៍
#p01 {
color: blue;
}
color: blue;
}
គុណលក្ខណៈថ្នាក់
ដើម្បីកំណត់រចនាប័ទ្មសម្រាប់ធាតុប្រភេទពិសេសមួយបន្ថែមគុណលក្ខណៈថ្នាក់មួយទៅធាតុ:
<p class="error">I am different</p>
បន្ទាប់មកកំណត់រចនាប័ទ្មសម្រាប់ធាតុដែលមានថ្នាក់ជាក់លាក់:
ឧទាហរណ៍
p.error {
color: red;
}
color: red;
}
សេចក្តីយោងខាងក្រៅ
សន្លឹករចនាប័ទ្មខាងក្រៅអាចត្រូវបានយោងជាមួយ
URL ពេញលេញឬជាមួយផ្លូវដែលទាក់ទងនឹងទំព័របណ្ដាញបច្ចុប្បន្ន។
ឧទាហរណ៍នេះប្រើ
URL ពេញដើម្បីភ្ជាប់ទៅសន្លឹករចនាប័ទ្ម:
ឧទាហរណ៍
<link rel="stylesheet" href="https://www. khlearn-it.blogspot.com/html/styles.css">
ឧទាហរណ៍នេះភ្ជាប់ទៅសន្លឹករចនាប័ទ្មដែលស្ថិតនៅក្នុងថត
html នៅលើវ៉ិបសាយបច្ចុប្បន្ន:
ឧទាហរណ៍
<link rel="stylesheet" href="/html/styles.css">
ឧទាហរណ៍នេះភ្ជាប់ទៅសន្លឹករចនាប័ទ្មដែលមាននៅក្នុងថតដូចគ្នាជាទំព័របច្ចុប្បន្ន:
ឧទាហរណ៍
<link rel="stylesheet" href="styles.css">