CSS ձեռնարկ — Դաս 2 — CSS-ի կիրառումը. background և color հատկություններ

10/05/2025, by Ivan

Բարև բոլորին։ Նախորդ դասում մենք ստեղծեցինք երկու ֆայլ՝ index.html և style.css, որոնք ունեն հետևյալ բովանդակությունը․

index.html

<html>
  <head>
    <title>CSS ձեռնարկ</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Ուսումնասիրեք CSS-ը drupalbook.org-ով</p>
    <p>2-րդ տող․ Ուսումնասիրեք CSS-ը drupalbook.org-ով</p>
  </body>
</html>

style.css

body {
  background: #eeeeee; /* էջի ֆոնը */
  font-size: 14px;     /* տառաչափի չափը */
}
p {
  color: #ff0000;      /* տեքստի գույնը */
}

Այս դասում կշարունակենք CSS-ի ուսումնասիրությունը և կավելացնենք գույներ մեր թեմային։ Սկսում ենք background հատկությունից, որը արդեն կիրառած էինք body-ին:

body {
  background: #eeeeee; /* էջի ֆոնը */
  font-size: 14px;     /* տառաչափի չափը */
}

Այժմ էջը ստացվեց մոխրագույն ֆոնով՝

CSS մոխրագույն ֆոն

CSS շարահյուսություն

CSS-ում սկզբում նշվում է սելեկտորը՝ այն տարրը, որի վրա կիրառվում են հատկությունները․ body, p, .class, #id։

Տեգի անուն՝ առանց որևէ նշանաչափի (օր. p).
Դաս՝ հաջորդում է . (օր. .green).
Id՝ հաջորդում է # (օր. #blue).

Օրինակ՝

<div class="green">
  <p>Օրինակ</p>
</div>
<div id="blue">
  <p>Օրինակ</p>
</div>

CSS-ը գրում ենք բլոկի մեջ՝

.green {
  color: #00ff00; /* տեքստի գույնը ירնգ */
}
#blue {
  color: #0000ff; /* տեքստի գույնը կապույտ */
}

CSS տեքստի կանաչ գույն

Գույն գործածելու կանոն

Գույնները կարող են задаваться հեքսայթթող նիշերով՝ #rrggbb, որտեղ rr՝ կարմիրի խտությունը, gg՝ կանաչի, bb՝ կապույտի։ Օրինակ՝ #ff0000 ներկայացնում է ամբողջովին կարմիր գույն։
Գույն ընտրելու համար օգտվեք ֆոտոշոփի կամ այլ թուլիփագիրներից։

Ժամանակակից էջի համար ընտրենք թեթև ֆոն և մուգ տեքստ՝

body {
  background: #fafafa; /* էջի ֆոնը */
  color: #333;         /* տեքստի ընդհանուր գույն */
}
.green {
  color: #26e921; /* կանաչ տեքստ */
}
#blue {
  color: #0f15f3; /* կապույտ տեքստ */
}

Պահպանեք CSS-ը և թարմացրեք էջը. ահա արդյունքը՝

CSS գունավոր էջ

Այս կերպ CSS-ը թույլ է տալիս պարզունակ HTML-ից տեղափոխել ոճային տեղեկությունները առանձին ֆայլեր՝ դարձնելով կոդը մաքուր և վերահսկելի:

Լրացուցիչ Բլոկների Տեսակներ (EBT) - Դասավորության Կառուցողի նոր փորձառություն❗

❗Լրացուցիչ Պարբերությունների Տեսակներ (EPT) - Պարբերությունների նոր փորձառություն

CSS ձեռնարկ — Դաս 2 — CSS-ի կիրառումը. background և color հատկություններ

CSS շարահյուսություն

Գույն գործածելու կանոն