Css ոճաթերթ և սելեկտորներ
HTML-ին ոճ հաղորդելու տարբերակները
CSS – Cascading Style Sheets – Կասկադային ոճաթերթ, որն օգտագործվում է վեբ էջի արտաքին տեսքը նկարագրելու համար։ Css-ի հեղինակն է Հոկոն Վիում Լին։ Լեզվի ստանդարտը որոշված է W3C-ի կողմից։ Css-1-ը դուրս է եկել 1996 թվականին և հիմա հասանելի է css-3-ը։
Կասկադային ոճաթերթ -html-ի էլեմենտին հնարավոր է սահմանել մեկից ավելի ոճային տարբերակներ, ուստի անհրաժեշտ է ընտրել դրանց մեջ ակտիվ տարբերակը։ Այն ընտրվում է կասկադային անցումով՝ ավելի ընդհանուրից անցում ավելի կոնկրետ սահմանմանը։
Օրինակ՝
p { color: orange; }
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<p>Hello world!!</p>
<p style= "color: red">Hayti lessons</p>
</body>
</html>
<style> էլեմենտում սահմանված է բոլոր <p> էլեմենտների տեքստը նարնջագույնով, որը ընդհանուր սահմանումն է։ Երկրորդ <p> էլեմենտին style ատրիբուտով սահմանված է կարմիր, որը կոնկրետ սահմանումն է։ Այսպիսով օգտագործվել է կասկադային անցում ավելի ընդհանուրից ավելի կոնկրետը։
Html-ին ոճ հաղորդելու համար կան երեք տարբերակներ՝
1– inline –ոճը սահմանվում էլեմենտի ներսում style ատրիբուտի միջոցով։
Օրինակ՝
<p style= "color: red; font-size: 10px;">Hello world</p>
color: և font-size: – ը հատկությունների անվանումներն են, իսկ red; և 10px; -ը՝ հատկության արժեքները։
2 – որևէ էլեմենտին ընդհանրական ոճ հաղորդելու համար <head>-ում կօգտագործվի <style> էլեմենտը։
Օրինակ՝
<head>
<style>
p{
color: orange;
}
</style>
</head>
<style> էլեմենտում ոճը սահմանվում է հետևյալ կերպ՝
նշվում է սելեկտորը․ որպես սելեկտոր հանդիսանում է տեգի անվանումը՝ p-ն։
Այն կարող է լինել նաև class և id ատրիբուտների արժեքները:
Եթե սելեկտորը տեգի անվանումն է, ապա ոճը կվերաբերվի այդ տեսակի բոլոր էլեմենտներին։
Եթե սելեկտորը class ատրիբուտի արժեքն է, ապա ոճը կվերաբերվի բոլոր էլեմենտներին, որոնք ունեն class ատրիբուտի նույն արժեքը։
p {
font-size: 18px;
color: red;
}
Եթե սելեկտորը class-ի արժեքն է՝
<p class= "testClass">Hello world</p>
.testClass {
font-size: 18px;
color: orange;
}
Եթե սելեկտորը id-ի արժեքն է՝
<p id= "testId">Hello World</p>
#testId {
font-size: 18px;
color: orange;
}
Եթե class-ի դեպքում հնարավոր է նույն արժեքը սահմանել մի քանի էլեմենտների, ապա id-ն որպես այդպիսին մեկն է html փաստաթղթում։
« * » սիմվոլի դեպքում ոճը կվերաբերի բոլոր էլեմենտներին՝
*{ color: red }
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<div>
div tag.
<h2>Header-2</h2>
<p>
p tag.
<h1>header-1</h1>
</p>
</div>
</body>
</html>
Ստորակետով հնարավոր է թվարկել՝ որ էլեմենտներին է վերաբերվում ոճը՝
h1, h2 {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Hayti</title>
<link href= "style.css" rel= "stylesheet">
</head>
<body>
<div>
div tag.
<h2>Header-2</h2>
<p>
p tag.
<h1>header-1</h1>
</p>
</div>
</body>
</html>
3 –<link> տեգում href ատրիբուտի միջոցով սահմանվում է Css-ի արտաքին ֆայլի հասցեն։ Ֆայլի ֆորմատը՝ ” .css “։
<link> -ը տեղադրվում է <head> էլեմենտում։ Ֆայլում css -ը գրվում է նույնկերպ ինչպես <style> էլեմենտում։
Արտաքին ֆայլն օգտագործվում է հարմարության համար, Եթե css կոդի ծավալը մեծ է։
Օրինակ՝
<head>
<link href= "style.css" rel= "stylesheet">
</head>
Բարդ սելեկտորներ
Կան նաև բարդ սելեկտորներ․ դրանք են՝
Կոնտեքստային սելեկտորներ
Հարևան սելեկտորներ
Դուստր սելեկտորներ
Ատրիբուտների սելեկտորներ։
Կոնտեքստային սելեկտորներ
Կոնտեքստային սելեկտորներն անհրաժեշտ են դուստր էլեմենտներին ոճ սահմանելու համար։
Նախ նշվում է հիմնական էլեմենտը, որից հետո անհրաժեշտ դուստր էլեմենտը(-երը)՝ պրոբելով առանձնացված։
Օրինակ՝
div p {
color: orange;
}
<body>
<div>
<p>Hello World-1</p>
<form>
<p>Hello World-2</p>
</form>
<p>Hello World-3</p>
<p>Hello World-4</p>
</div>
<p> Այս մեկին չի վերաբերվի </p>
</body>
Ոճը վերաբերում է միայն հիմնական էլեմենտում գտնվող <p> -երին։
Հնարավոր է սամանել նաև հետևյալ կերպ՝
.red li a {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href= "style.css" rel= "stylesheet">
<title></title>
</head>
<body>
<p>
Paragraph in body.
</p>
<div>
<p>Paragraph in div..</p>
<ul class="red">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<a href="#">Link in body.</a>
</body>
</html>
Ոճը կվերաբերի <a> էլեմենտներին, որոնք գտնվում են <li> էլեմենտում, որն իր հերթին՝ այն <ul> էլեմենտում, որի class ատրիբուտը հավասար է «red»-ի։
Հարևան սելեկտորներ
Հարևան սելեկտորը սահմանվում է « + » -ով և վերաբերում է նշված սելեկտորի անմիջապես հարևան սելեկտորին միայն։
Օրինակ՝
h1 + p {
color: orange;
}
<body>
<div>
<h1>Header-1</h1>
<p>Paragraph-1</p>
<h1>Header-2</h1>
<p>Paragraph-2</p>
<p>Այս մեկին չի վերաբերվի</p>
<div>
</body>
«~» -ը հարևան սելեկտորի տեսակ է։ Ոճը վերաբերում է նշված սելեկտորից բոլոր հարևան սելեկտորներին։
Օրինակ՝
h1 ~ p {
color: orange;
}
<body>
<p>Այս մեկին չի վերաբերի</p>
<h1>Hello h1</h1>
<p>Hello World-1</p>
<span>Սրան նույնպես չի վերաբերի</span>
<div>
<p>Սրան նույնպես չի վերաբերի</p>
</div>
<p>Hello World-1</p>
</body>
Դուստր սելեկտորներ
Դուստր սելեկտորները սահմանվում են « > » սիմվոլով և համարվում են անմիջապես հիմնական էլեմենտում գտնվող սելեկտորները։
Օրինակ՝
div > h1 {
color: orange;
}
<body>
<div>
<h1>Header-1</h1>
<p>
<h1>Ոճն այս մեկին չի վերաբերի</h1>
</p>
</div>
</body>
Ատրիբուտների սելեկտորներ
Ատրիբուտների սելեկտորները ոճ են հաղորդում էլեմենտներին, որոնք ունեն նշված ատրիբուտը, կամ տվյալ ատրիբուտի արժեքը։
Օրինակ՝
<form>
<input type= "text" required >
<input type= "submit" >
</form>
Առաջին <input> -ին ոճ հաղորդելու համար կսահմանվի input[required] կամ՝ [required] ։
Օրինակ՝
input[required] {
color: red;
}
Եկրորդ <input> -ին ոճը կսահմանվի՝
input[type="submit"] {
color: red;
}
Կան ատրիբուտներ, որոնց արժեքը մեկից ավելի է։ Այս դեպքում ոճը կօգտագործվի, եթե ատրիբուտի արժեքը սկսի սելեկտորում նշվածով, կամ թվարկած արժեքներում լինի այն։
p[class ~= “par02”] – եթե որևէ վայրում class -ն ունենա “par02” արժեքը, ապա այն կհամապատասխանի սելեկտորին։
p[class ~="par02"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style></style>
</head>
<body>
<p class="par01 par02 par03">Lorem ipsum dolor sit.</p>
<p class="par01 par03">Lorem ipsum dolor sit.</p>
<p class="par01 par02 par03">Lorem ipsum dolor sit.</p>
<p class="par01 par03">Lorem ipsum dolor sit.</p>
</body>
</html>
class և id ատրիբուտներում արժեքի համար թույլատրելի է օգատգործել « – » սիմվոլը։
p[class | =”red”] –ատրիբուտի արժեքը պետք է սկսի սելեկտորում նշվածով և շարունակվի «-» սիմվոլով։ Օրինակ՝ ” class = ‘red-color-for-this’ “։
p[class |="red"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style></style>
</head>
<body>
<p class="color-red-for-this">Lorem ipsum dolor sit.</p>
<p class="red-color-for-this">Lorem ipsum dolor sit.</p>
</body>
</html>
a[href ^ =”http://”] -ատրիբուտի արժեքը պետք է սկսի սելեկտորում նշվածով։ Օրինակ՝ href= “http։//www.hayti.am” ։
a[href ^="http://"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
</style>
</head>
<body>
<a href="https://hayti.am">Lorem ipsum dolor sit.</a>
</body>
</html>
a[href $ =”.pdf”] –ատրիբուտի արժեքը պետք է ավարտվի նշվածով։ Օրինակ՝ href= “image.pdf” ։
a[href $=".pdf"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
</style>
</head>
<body>
<a href="document.pdf">Lorem ipsum dolor sit.</a>
</body>
</html>
a[href * =”hayti”] –ատրիբուտի արժեքն իրենում պետք է ունենա նշվածը։ Օրինակ՝ href= “http://hayti.am” ։
a[href *="hayti"] {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hayti</title>
<style>
</style>
</head>
<body>
<a href="https://hayti.am">Lorem ipsum dolor sit.</a>
</body>
</html>
Եթե սելեկտորները միասին են՝ առանց պրոբելի, ապա վերաբերում են նույն էլեմենտին։
Հնարավոր է նաև տարբեր ոճեր միացնել իրար, որտեղ ոճը կսահմանվի հիմնականից երկրորդականը։
div {
width: 500px;
height: 200px;
margin-bottom: 20px;
}
.class1 {
color: white;
background-color: Black;
font-size: 30px;
font-weight: bold;
border: solid red 5px;
}
.class1.class2 {
color: black;
background-color: grey;
border-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<div class="class1">black պատկերն ընդունում է ՛.class1՛ -ի ոճը։</div>
<div class="class1 class2">
grey պատկերն ընդունում է ՛.class1՛ -ի և ՛class2՛ -ի ոճը։
</div>
</body>
</html>
Armenian 
Russian