Css ոճաթերթ և սելեկտորներ
HTML-ին ոճ հաղորդելու տարբերակները
CSS – Cascading Style Sheets – Կասկադային ոճաթերթ, որն օգտագործվում է վեբ էջի արտաքին տեսքը նկարագրելու համար։ Css-ի հեղինակն է Հոկոն Վիում Լին։ Լեզվի ստանդարտը որոշված է W3C-ի կողմից։ Css-1-ը դուրս է եկել 1996 թվականին և հիմա հասանելի է css-3-ը։
Կասկադային ոճաթերթ -html-ի էլեմենտին հնարավոր է սահմանել մեկից ավելի ոճային տարբերակներ, ուստի անհրաժեշտ է ընտրել դրանց մեջ ակտիվ տարբերակը։ Այն ընտրվում է կասկադային անցումով՝ ավելի ընդհանուրից անցում ավելի կոնկրետ սահմանմանը։
Օրինակ՝
p { color: orange; }
Hayti
Hello world!!
Hayti lessons
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-01.png)
<style> էլեմենտում սահմանված է բոլոր <p> էլեմենտների տեքստը նարնջագույնով, որը ընդհանուր սահմանումն է։ Երկրորդ <p> էլեմենտին style ատրիբուտով սահմանված է կարմիր, որը կոնկրետ սահմանումն է։ Այսպիսով օգտագործվել է կասկադային անցում ավելի ընդհանուրից ավելի կոնկրետը։
Html-ին ոճ հաղորդելու համար կան երեք տարբերակներ՝
1– inline –ոճը սահմանվում էլեմենտի ներսում style ատրիբուտի միջոցով։
Օրինակ՝
Hello world
color: և font-size: – ը հատկությունների անվանումներն են, իսկ red; և 10px; -ը՝ հատկության արժեքները։
2 – որևէ էլեմենտին ընդհանրական ոճ հաղորդելու համար <head>-ում կօգտագործվի <style> էլեմենտը։
Օրինակ՝
<style> էլեմենտում ոճը սահմանվում է հետևյալ կերպ՝
նշվում է սելեկտորը․ որպես սելեկտոր հանդիսանում է տեգի անվանումը՝ p-ն։
Այն կարող է լինել նաև class և id ատրիբուտների արժեքները:
Եթե սելեկտորը տեգի անվանումն է, ապա ոճը կվերաբերվի այդ տեսակի բոլոր էլեմենտներին։
Եթե սելեկտորը class ատրիբուտի արժեքն է, ապա ոճը կվերաբերվի բոլոր էլեմենտներին, որոնք ունեն class ատրիբուտի նույն արժեքը։
p {
font-size: 18px;
color: red;
}
Եթե սելեկտորը class-ի արժեքն է՝
Hello world
.testClass {
font-size: 18px;
color: orange;
}
Եթե սելեկտորը id-ի արժեքն է՝
Hello World
#testId {
font-size: 18px;
color: orange;
}
Եթե class-ի դեպքում հնարավոր է նույն արժեքը սահմանել մի քանի էլեմենտների, ապա id-ն որպես այդպիսին մեկն է html փաստաթղթում։
« * » սիմվոլի դեպքում ոճը կվերաբերի բոլոր էլեմենտներին՝
*{ color: red }
Hayti
div tag.
Header-2
p tag.
header-1
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-02.png)
Ստորակետով հնարավոր է թվարկել՝ որ էլեմենտներին է վերաբերվում ոճը՝
h1, h2 {
color: red;
}
Hayti
div tag.
Header-2
p tag.
header-1
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-03.png)
3 –<link> տեգում href ատրիբուտի միջոցով սահմանվում է Css-ի արտաքին ֆայլի հասցեն։ Ֆայլի ֆորմատը՝ ” .css “։
<link> -ը տեղադրվում է <head> էլեմենտում։ Ֆայլում css -ը գրվում է նույնկերպ ինչպես <style> էլեմենտում։
Արտաքին ֆայլն օգտագործվում է հարմարության համար, Եթե css կոդի ծավալը մեծ է։
Օրինակ՝
Բարդ սելեկտորներ
Կան նաև բարդ սելեկտորներ․ դրանք են՝
Կոնտեքստային սելեկտորներ
Հարևան սելեկտորներ
Դուստր սելեկտորներ
Ատրիբուտների սելեկտորներ։
Կոնտեքստային սելեկտորներ
Կոնտեքստային սելեկտորներն անհրաժեշտ են դուստր էլեմենտներին ոճ սահմանելու համար։
Նախ նշվում է հիմնական էլեմենտը, որից հետո անհրաժեշտ դուստր էլեմենտը(-երը)՝ պրոբելով առանձնացված։
Օրինակ՝
div p {
color: orange;
}
Hello World-1
Hello World-3
Hello World-4
Այս մեկին չի վերաբերվի
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-04.png)
Ոճը վերաբերում է միայն հիմնական էլեմենտում գտնվող <p> -երին։
Հնարավոր է սամանել նաև հետևյալ կերպ՝
.red li a {
color: red;
}
Paragraph in body.
Link in body.
Ոճը կվերաբերի <a> էլեմենտներին, որոնք գտնվում են <li> էլեմենտում, որն իր հերթին՝ այն <ul> էլեմենտում, որի class ատրիբուտը հավասար է «red»-ի։
Հարևան սելեկտորներ
Հարևան սելեկտորը սահմանվում է « + » -ով և վերաբերում է նշված սելեկտորի անմիջապես հարևան սելեկտորին միայն։
Օրինակ՝
h1 + p {
color: orange;
}
Header-1
Paragraph-1
Header-2
Paragraph-2
Այս մեկին չի վերաբերվի
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-05.png)
«~» -ը հարևան սելեկտորի տեսակ է։ Ոճը վերաբերում է նշված սելեկտորից բոլոր հարևան սելեկտորներին։
Օրինակ՝
h1 ~ p {
color: orange;
}
Այս մեկին չի վերաբերի
Hello h1
Hello World-1
Սրան նույնպես չի վերաբերի
Սրան նույնպես չի վերաբերի
Hello World-1
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-06.png)
Դուստր սելեկտորներ
Դուստր սելեկտորները սահմանվում են « > » սիմվոլով և համարվում են անմիջապես հիմնական էլեմենտում գտնվող սելեկտորները։
Օրինակ՝
div > h1 {
color: orange;
}
Header-1
Ոճն այս մեկին չի վերաբերի
![](https://hayti.am/wp-content/uploads/2023/12/css_selektorner-07.png)
Ատրիբուտների սելեկտորներ
Ատրիբուտների սելեկտորները ոճ են հաղորդում էլեմենտներին, որոնք ունեն նշված ատրիբուտը, կամ տվյալ ատրիբուտի արժեքը։
Օրինակ՝
Առաջին <input> -ին ոճ հաղորդելու համար կսահմանվի input[required] կամ՝ [required] ։
Օրինակ՝
input[required] {
color: red;
}
Եկրորդ <input> -ին ոճը կսահմանվի՝
input[type="submit"] {
color: red;
}
Կան ատրիբուտներ, որոնց արժեքը մեկից ավելի է։ Այս դեպքում ոճը կօգտագործվի, եթե ատրիբուտի արժեքը սկսի սելեկտորում նշվածով, կամ թվարկած արժեքներում լինի այն։
p[class ~= “par02”] – եթե որևէ վայրում class -ն ունենա “par02” արժեքը, ապա այն կհամապատասխանի սելեկտորին։
p[class ~="par02"] {
color: red;
}
Hayti
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
class և id ատրիբուտներում արժեքի համար թույլատրելի է օգատգործել « – » սիմվոլը։
p[class | =”red”] –ատրիբուտի արժեքը պետք է սկսի սելեկտորում նշվածով և շարունակվի «-» սիմվոլով։ Օրինակ՝ ” class = ‘red-color-for-this’ “։
p[class |="red"] {
color: red;
}
Hayti
Lorem ipsum dolor sit.
Lorem ipsum dolor sit.
![](https://hayti.am/wp-content/uploads/2023/12/css-mas1-att-sel01-1024x406.png)
a[href ^ =”http://”] -ատրիբուտի արժեքը պետք է սկսի սելեկտորում նշվածով։ Օրինակ՝ href= “http։//www.hayti.am” ։
a[href ^="http://"] {
color: red;
}
Hayti
Lorem ipsum dolor sit.
a[href $ =”.pdf”] –ատրիբուտի արժեքը պետք է ավարտվի նշվածով։ Օրինակ՝ href= “image.pdf” ։
a[href $=".pdf"] {
color: red;
}
Hayti
Lorem ipsum dolor sit.
a[href * =”hayti”] –ատրիբուտի արժեքն իրենում պետք է ունենա նշվածը։ Օրինակ՝ href= “http://hayti.am” ։
a[href *="hayti"] {
color: red;
}
Hayti
Lorem ipsum dolor sit.
Եթե սելեկտորները միասին են՝ առանց պրոբելի, ապա վերաբերում են նույն էլեմենտին։
Հնարավոր է նաև տարբեր ոճեր միացնել իրար, որտեղ ոճը կսահմանվի հիմնականից երկրորդականը։
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;
}
black պատկերն ընդունում է ՛.class1՛ -ի ոճը։
grey պատկերն ընդունում է ՛.class1՛ -ի և ՛class2՛ -ի ոճը։
![](https://hayti.am/wp-content/uploads/2023/12/css-mas1-att-sel02-1024x544.png)
Նմանատիպ հոդվածներ
- CSS-POSITION
- CSS — ԱՅԼ ՀԱՏԿՈՒԹՅՈՒՆՆԵՐ(ՄԱՍ-2)
- ժառանգականություն
- CSS-TABLE
- @Կանոններ
- Սելեկտորների առաջնահերթությունը և կասկադայնությունը
- CSS-PRINT
- CSS-COLOR AND BACKGROUND
- CSS-SIZES
- CSS-TEXT AND FONT (ՄԱՍ-1)
- Չափի միավորները css-ում
- Հատկություններում օգտագործվող առանձնահատկություններ
- Պսևդոկլասներ և պսևդոէլեմենտներ
- Css-ի ֆունկցիաները (Մաս-3)
- CSS-PADDING-MARGIN
- CSS-TEXT AND FONT (ՄԱՍ-2)
- Գույների ֆորմատներ
- Css-ի ֆունկցիաները (Մաս-1)
- @media
- CSS – ՀԱՏԿՈՒԹՅՈՒՆՆԵՐ
- Css-ի ֆունկցիաները (Մաս-2)
- CSS-FLEX
- CSS-FORMATTING
- CSS-ANIMATION
- CSS-GRID
- CSS-LOGICAL
- CSS-BORDER
- CSS-CONTENT
- CSS – ԱՅԼ ՀԱՏԿՈՒԹՅՈՒՆՆԵՐ(ՄԱՍ-1)
- CSS-LISTS
- Css-ի բլոկ մոդելը
-
Իմանալ ավելին