CSS ձեռնարկ — Դաս 2 — CSS-ի կիրառումը. background և color հատկություններ
Բարև բոլորին։ Նախորդ դասում մենք ստեղծեցինք երկու ֆայլ՝ 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-ում սկզբում նշվում է սելեկտորը՝ այն տարրը, որի վրա կիրառվում են հատկությունները․ 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; /* տեքստի գույնը կապույտ */
}
Գույն գործածելու կանոն
Գույնները կարող են задаваться հեքսայթթող նիշերով՝ #rrggbb, որտեղ rr՝ կարմիրի խտությունը, gg՝ կանաչի, bb՝ կապույտի։ Օրինակ՝ #ff0000 ներկայացնում է ամբողջովին կարմիր գույն։
Գույն ընտրելու համար օգտվեք ֆոտոշոփի կամ այլ թուլիփագիրներից։
Ժամանակակից էջի համար ընտրենք թեթև ֆոն և մուգ տեքստ՝
body {
background: #fafafa; /* էջի ֆոնը */
color: #333; /* տեքստի ընդհանուր գույն */
}
.green {
color: #26e921; /* կանաչ տեքստ */
}
#blue {
color: #0f15f3; /* կապույտ տեքստ */
}
Պահպանեք CSS-ը և թարմացրեք էջը. ահա արդյունքը՝
Այս կերպ CSS-ը թույլ է տալիս պարզունակ HTML-ից տեղափոխել ոճային տեղեկությունները առանձին ֆայլեր՝ դարձնելով կոդը մաքուր և վերահսկելի: