Cascading Style Sheets CSS აღწერს თუ როგორ გამოჩნდება HTML ელემენტები ვებ გვერდზე. CSS შეუძლია რამოდენიმე სხვადასხვა გვერდზე განლაგებულ ელემენტებზე იქონიოს გავლენა და ის როგორც external stylesheets ინახება CSS ფაილებში.
მაგ.: style.css
[TOC]
CSS გვაძლევს შესაძლებლობას შევცვალოთ HTML ელემენტის სტილის ატრიბუტი/ები, როგორიცაა:
- ფერი
- ფონი
- ჩარჩო
CSS-თან მუშაობის პროცესი შეგვიძლია დავყოთ 4 ძირითად საფეხურად:
- ვქმნით
.cssფაილს - CSS სინტაქსის გამოყენებით ვაბამთ ელემენტის თეგებს
- ვამატებთ სტილ ატრიბუტის property-value წყვილებს
- ვაკავშირებთ CSS ფაილს HTML გვერდთან
| დასახელება | გამოყენება |
|---|---|
| Selector | ტეგის იდენტიფიკატორი |
| Property | პარამეტრი |
| Property Value | მნიშვნელობა |
| Declaration | გაწერა (სტილის) |
p {
background-color: lightblue;
color: white;
text-align: center;
font-family: verdana;
font-size:20px;
}ტეგი <link>-ის გამოყენებით ჩვენ შეგვიძლია HTML ფაილთნ მივაბათ სხვა ფაილები და
შორის css stylesheet:
<head><!-- Connect the html to the css file --><linkrel="stylesheet" href="style.css"></head>ატრიბუტი rel აღნიშნავს ბმული ფაილის ტიპს/როლს html ფაილისთვის, ხოლო
href-ში თავსდება იმ ფაილის მისამართი სადაც სტაილშიტია მოთავსებული.
ყოველ HTML ელემენტს აქვს შესაძლებლობა მიენიჭოს class ან id ატრიბუტი. ეს თვისება შესაძლებლობას გვაძლევს, რომ შევძლოთ კონკრეტული ელემენტის სტილის ცვლილება სტაილშიტიდან.
class-ის გამოყენებით შეგვიძლია გავაერთიანოთ სხვადასხვა (თუნდაც არაერთგვაროვანი ტიპის) html ელემენტი და მივანიჭოთ მათ საერთო მახასიათებელი.
id-ის მეშვეობით შეგვიძლია ინდივიდუალურად ავირჩიოთ html ელემენტი რომელზეც გვსურს რეაგირება. შესაბამისად ყოველ ელემენტს უნდა ჰქონდეს უნიკალური ინდივიდუალური id მნიშვნელობა.
# - გამოიყენება id-ის გამოსაძახებლად
. - გამოიყენება class-ის გამოსაძახებლად
მაგალითად:
.classname1{
background: maroon;
}
#idname{
background: green;
}ფონური ფერის არჩევა:
{
background: gray;
}ან ფერის არჩევა ჰექს კოდით
{
background:#AE78BE;
}ფონის სურათის არჩევა მისამართიდან:
{
background:url(https://www.17thshard.com/forum/uploads/monthly_2018_10/Silmarillion_Tuor1.jpg.6200bf9c97e8100f9dddbbcddbd98f23.jpg);
}| პარამეტრი | მნიშვნელობა |
|---|---|
| background-repeat | no-repeat |
div{
background: maroon;
border: orange;
border-width: thick;
border-style: dotted;
}ან
div{
background: maroon;
border: royalblue 2px dashed;
}p {
font-family: verdana;
font-size:20px;
font-weight: bold;
text-align: center;
}