რა არის HTML

რა არის HTML

დამატების თარიღი: 2021

კატეგორია: ისწავლე აქ

ავტორი: UIIGBLO

მოთხოვნა?: აქტიური

ფასი: 

  |   რეიტინგი: 0  

CSS (Cascading Style Sheets) არის ტექნოლოგია რომელიც გამოიყენება HTML დოკუმენტის გარე იერსახის აღწერისათვის, მისი საშუალებით შეგვიძლია განვსაზღვროთ ნებისმიერი HTML ელემენტის სიგრძე, სიგანე, ფონის ფერი, მდებარეობა სხვა ელემენტებთან მიმართებაში და ა.შ.CSS პირველად 1994 წელს წარმოადგინა ერთ-ერთმა პიონერმა ვებ-ტექნოლოგიებში - ჰაკონ ვიემ ლაიმ (ნორვეგია). W3C-ის (World Wide Web Consortium ანუ მსოფლიო ქსელის კონსორციუმი) მიერ რეკომენდებული პირველი ოფიციალური ვერსიის (CSS 1) პრეზენტაცია კი შედგა 1996 წელს, ამ ვერსიაზე, ჰაკონთან ერთად მუშაობდა ბერტ ბოსი - ჰოლანდიელი სწავლული კომპიუტერულ მეცნიერებათა დარგში.

CSS-თან დაკავშირება

CSS-თან მუშაობა საკმაოდ მოსახერხებელია რადგან ერთი CSS დოკუმენტით შესაძლებელია რამდენიმე HTML დოკუმენტის გაკონტროლება. სტილების განსაზღვრა, როგორც წესი, ხდება ხოლმე ცალკე - '.css' გაფართოების მქონე ფაილში.
როდესაც ბრაუზერის კითხულობს CSS ჩანაწერებს, იგი HTML დოკუმენტს აფორმატებს ამ სტილების შესაბამისად. არსებობს CSS სტილების HTML დოკუმენტთან დაკავშირების სამი ხერხი:
  • გარე სტილები
  • შიდა სტილები
  • ხაზსშიდა სტილები, ჩაშენებული სტილები

გარე სტილები

გარე სტილების გამოყენებისას მხოლოდ ერთი CSS ფაილის დარედაქტირებით შეიძლება რამოდენიმე HTML დოკუმენტის ვიზუალის შეცვლა. ყველა ეს დოკუმენტი უნდა შეიცავდეს ზემოთხსენებულ გარე CSS ფაილთან დამაკავშირებელ ბმულს, ბმული დავსდება დოკუმენტის <head> სექციაში<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

შიდა სტილები

შიდა სტილების გამოყენება შესაძლებელია მაშინ როდესაც ყველა გვერდს აქვს თავისი უნიკალური სტილები. მათი აღწერა უნდა მოხდეს <style> ელემენტში, ხოლო თავად <style> ელემენტი უნდა მოთავსდეს <head> სექციაში
<head>
    <style>
        body {
            background-color: linen;

        }

        h1 {
            color: maroon;

            margin-left: 40px;

        } 
    </style>
</head>
              

ხაზსშიდა სტილები

ჩაშენებული სტილები ანუ ხაზსშიდა სტილები შესაძლებელია გამოვიყენოთ მაშინ, როდესაც გვინდა რომ ცალ-ცალკე ელემენტებს მივანიჭოთ სხვადასხვა სტილები, მაგალითად გვაქვს სამი ცალი <h1> ელემენტი და გვინდა რომ სამივეს სვადასხვა ფერი ჰქონდეს<h1 style="color:blue;">სათაური</h1>
<h1 style="color:red;">სათაური</h1>
<h1 style="color:green;">სათაური</h1>

CSS სინტაქსი

სტილების აღწერის სინტაქსი ასეთია


ობიექტი ანუ სელექთორი განსაზღვრავს HTML ელემენტს რომლის სტილსაც ვქმნით - ამ შემთხვევაში h1. CSS ბლოკი შედგება ერთი ან რამოდენიმე, ერთმანეთისაგან წერტილ-მძიმით გამოყოფილი ჩანაწერისაგან, თავად ჩანაწერი კი შედგება ერთმანეთისაგან ორწერტილებით გამოყოფილი "თვისება:მნიშვნელობა" წყვილებისაგან. CSS ჩანაწერი უნდა მოექცეს ფიგურულ ფრჩხილებში.

CSS სელექთორები

CSS სელექთორები გამოიყენება HTML ელემენტების ამოსარჩევად, ამორჩევა შეიძლება მოხდეს ელემენტის დასახელების, id-ის, class-ის, რომელიმე ატრიბუტის და ა.შ მეშვეობით.

ელემენტის სახელის მიხედვით ამორჩევა ხდება ასეp {
    text-align: center;
    color: red;
}


id ატრიბუტის მიხედვით ამორჩევა ხდება ასე#para1 {
    text-align: center;
    color: red;
}
განსაზღვრუოლი id ატრიბუტის მქონე ელემენტის ამოსარჩევად id-ის მნიშვნელობის წინ იწერება "#" სიმბოლო.

class ატრიბუტის მიხედვით ამორჩევა ხდება ასე.para1 {
    text-align: center;
    color: red;
}
განსაზღვრუოლი class ატრიბუტის მქონე ელემენტის ამოსარჩევად class-ის მნიშვნელობის წინ იწერება "." სიმბოლო.

HTML ელემენტს შეიძლება მივმართოთ რამოდენიმე კლასის საშუალებით<p class="center large">This paragraph refers to two classes.</p>კლასის დასახელება არ შეიძლება დაიწყოს ციფრით.

შესაძლებელია მოხდეს ისე, რომ სხვადასხვა დასახელების მქონე ელემენტებს გააჩნდეთ ერთნაირი სტილები, ასეთ შემთხვევაში შეიძლება მოვახდინოთ ელემენტების დაჯგუფებაh1, h2, p {
    text-align: center;
    color: red;
}


კომენტარები CSS-ში შესაძლებელია იყოს როგორც ერთხაზიანი, აგრეთვე მრავალხაზიანიp {
    color: red;
    /* ერთხაზიანი კომენტარი */
    text-align: center;
}

/* მრავალზახიანი
კომენტარი */

კომენტარები: 0

კომენტარის დამატება ფორმის

reload, if the code cannot be seen