CSS-ის სამი ტიპი(ები)

HTML დოკუმენტში არსებობოს CSS-ის გამოყენების სამი ტიპი, რომელთა დახმარებითაც შეგვიძლია მარტივად მოვახდინოთ ელემენტის გასტილვა.

CSS-ის ტიპებია

inline CSS (ხაზსშიდა)
internal/embedded CSS
external CSS

განვიხილოთ სათითაო მათგანი მაგალითების მიხედვით.

რა არის inline CSS?

inline CSS გამოიყენება გახსნის თეგში style ატრიბუტის სახით, იხილეთ ქვემოთ მოცემული მაგალითი

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>
 
<body>
    <p style="color:#ff0000; font-size:18px;">This is paragraph</p>
</body>
</html>

დადებითი და უარყოფითი მხარეები

დადებითი მხარეები

inline CSS-ის გამოყენების დადებითი მხარეა, მისი მარტივად გამოყენება, მისი დახმარებით შეგვიძლია უმარტივესად გავსტილოთ კონკრეტული ელემენტი დამატებითი CSS ფაილის შექმნის გარეშე.
ასევე მნიშვნელობანია გვახსოვდეს, რომ inline CSS-ის გამოყენებით სტილები ხდება პრიორიტეტული internal და external CSS-ებთან მიმართებით.

უარყოფითი მხარეები

უარყოფით მხარედ შეგვიძლია ჩავთვალოთ კომპლექსური სტილები, რომლებიც საკმაოდ ართულებს კოდის გარჩევადობას და ასევე მოგვიწევს კოდის დუბლირება

რა არის internal CSS?

internal CSS-ის გამოყენება ხდება სპეციალურ style თეგში, რომელიც მოთავსებული უნდა იყოს <head></head> თეგის შიგნით და აუცილებელია თეგს ქონდეს გახსნის და დახურვის თეგები <style></style>

მოცემული თეგების შიგნით ჩვენ შეგვიძლია სტანდარტული CSS სინტაქსის დახმარებით დავწეროთ კოდი, რომელიც გავრცელდება მთლიანად დოკუმენტის იმ ელემენტებზე რომლებზეც ვიმოქმედებთ

მაგალითი:

<!DOCTYPE html>  
<html>
   <head>
      <style>  
         body {  
             background-color: dodgerblue;  
         }  
         h1 {  
             color: red;  
             padding: 50px;  
         }   
      </style>
   </head>
   <body>
      <h2>Internal Css</h2>
      <p>Cascading Style sheet types: inline, external and internal</p>
   </body>
</html>

დადებითი და უარყოფითი მხარეები

დადებითი მხარეები

საშუალებას გვაძლევს მარტივად განვასხვავოთ CSS კოდი HTML-დოკუმენტისგან inline CSS-თან შედარებით
აუცილებელია გვახსოვდეს, რომ internal CSS-ის თვისებები პრიორიტეტულია external CSS-თან შედარებით

უარყოფითი მხარეები

ზრდის HTML დოკუმენტის ზომას, რაც ართულებს მის დეველოპმენტს
სტილები ვრცელდება მხოლოდ იმ დოკუმენტზე რომელშიც მას ვიყენებთ

რა არის external CSS?

external CSS დეველოპმენტში ყველაზე გამოყენებული ტიპია, ის საშუალებას გვაძლევს გავმიჯონთ ერთმანეთისგან HTML დოკუმენტი და CSS-ის კოდი.

external CSS იდეალური საშუალებაა დიდი ზომის პროექტების დასაწერად, რადგან ყველა ფაილი თუ დოკუმენტი ცალ-ცალკე ერთმანეთისგან განცალკევებულად გვაქვს.

external CSS-ის გამოყენება ხდება <head></head> თეგში, <link> თეგის დახმარებით, რომელსაც არ სჭირდება დახურვის თეგი

მაგალითი:

HTML დოკუმენტი

<!DOCTYPE html>
<html>
  <head>
    <title>External CSS Example</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>This text is blue and 20px in size.</p>
  </body>
</html>

CSS ფაილი