HTML დოკუმენტში არსებობოს CSS-ის გამოყენების სამი ტიპი, რომელთა დახმარებითაც შეგვიძლია მარტივად მოვახდინოთ ელემენტის გასტილვა.
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>
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>
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 ფაილი
p {
color: blue;
font-size: 20px;
}
შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა
ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით