Clock

Khmer Web

Gateway to web application
Adding CSS to HTML
Edit

នៅ​ពេល​ដែល​ទំព័រ HTML ណា​មួយ​ត្រូវ​បើក​ឡើង បើ​សិន​ជា​នៅ​ក្នុង​ឯកសារ​នោះ ​មាន​ការបញ្ចូល​ឯកសារ CSS និង​ឬ​មាន​កូដ CSS នៅ​ក្នុង​នោះ​ browser នឹង​បង្កើត​រូបរាង​ទំព័រ HTML ​អាស្រ័យ​ទៅ​តាម​កូដ CSS ។ ហើយ​ការបញ្ចូល​កូដ CSS ចូល​ទៅ​ក្នុង​ទំព័រ HTML អាច​ត្រូវ​ធ្វើ​ឡើង​តាម ៣ របៀប​គឺ inline, internal, external ។

អាស្រ័យហេតុនេះ កន្លង​មក យើង​បាន​ប្រើប្រាស់​វិធី​បញ្ចូល​កូដ CSS ចូល​ទៅ​ក្នុង​ទំព័រ HTML តាម​របៀប internal ដោយ​សរសេរ​កូដ CSS នៅ​ក្នុង tag <style> ដែល​ខ្លួន​វា​ត្រូវ​ស្ថិត​នៅ​ក្នុង <head> 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Adding CSS to HTML</title>
    <style>
    	body {
  		  background-color: linen;
		}

		h1 {
  		  color: maroon;
  		  margin-left: 40px;
		} 
    </style>
  </head>
  
  <body>
	
This is a heading

	
This is a paragraph.

  </body>
</html>

This is a heading

This is a paragraph.


មួយវិញទៀត យើង​គួរ​រំលឹក​ឡើង​វិញ​ថា យើង​ធ្លាប់​បាន​ប្រើប្រាស់ attribute style នៅ​ក្នុង​ element មួយ​ចំនួន ក្នុង​គោលបំណង​កែច្នៃ​រចនា​ element ទាំងនោះ​អោយ​មាន​ទំរង់​និង​សភាព​លក្ខណៈ​ផ្សេង​ៗ​ដែល​យើង​ចង់​បាន​។ តាមការពិត ការធ្វើ​តាម​របៀប​នេះ ត្រូវ​គេ​ចាត់ទុក​ថា​ ជាការបញ្ចូល​កូដ CSS ទៅ​ក្នុង​ឯកសារ HTML តាម​របៀប inline ។ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Adding CSS to HTML</title>
  </head>
  
  <body>
	
This is a heading

	
This is a paragraph.

  </body>
</html>

This is a heading

This is a paragraph.


លើស​ពី​នេះ​ទៀត នៅ​មាន​វិធី​មួយ​ទៀត ​ក្នុង​ការបញ្ចូល​កូដ​ជា​ភាសា CSS ចូល​ទៅ​ក្នងុ​ទំព័រ HTML ។ វិធី​នោះ​គឺ​ការបញ្ចូល​ឯកសារ CSS ដាច់​ដោយ​ឡែក​មួយ​ចូល​ទៅ​ក្នុង​ទំព័រ HTML ដោយ​ប្រើប្រា់ស់ element <link> នៅ​ក្នុង​ element <head> នៃ​ទំព័រ HTML ។ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Adding CSS to HTML</title>
    
  </head>
  
  <body>
	
This is a heading

	
This is a paragraph.

  </body>
</html>

This is a heading

This is a paragraph.


សរុបមក យើង​មាន​វិធី ៣ យ៉ាង​ក្នុង​ការបញ្ជូល​កូដ​ជា​ភាសា CSS ចូល​ទៅ​ក្នុង​ឯកសារ HTML ទាំងឡាយ​។ មួយវិញ​ទៀត យើង​អាច​ប្រើប្រាស់​វិធី​ទាំង ៣ យ៉ាង​នេះ​ព្រម​ជាមួយ​គ្នា​តែ​ម្តង ក្នុង​បញ្ចូល​កូដ CSS ចូល​ទៅ​ក្នុង​ឯកសារ HTML ។ ហើយ​ក្នុង​ករណី​ដែល​មាន​កូដ​ជាន់​គ្នា កូដ​inline មាន​អាទិភាព​ជាង​គេ​។ ហើយ​ចំពោះ​កូដ internal និង external វិញ អាទិភាព​គឺ​អាស្រ័យ​ទៅ​តាម​លំដាប់​លំដោយ​របស់​វា ពោល​គឺ​កូដ​នៅ​ក្រោម​គេ មាន​អាទិភាព​ជាង​គេ​។ 

<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>Adding CSS to HTML</title>
    <style>
    	body {
  		  background-color: linen;
		}

		h1 {
  		  color: maroon;
  		  margin-left: 40px;
		} 
    </style>
  </head>
  
  <body>
	
This is a heading

	
This is a paragraph.

  </body>
</html>

This is a heading

This is a paragraph.