Կասկադային ոճաթերթ

CSS կամ կասկադային ոճաթերթ (Cascading Style Sheets - կասկադային ոճերի թերթներ), կայքին ձևավորում տալու համար օգտագործվող տեխնոլոգիա ծրագրավորման ֆորմալ լեզվով։ CSS-ը հիմնականում օգտագործվում է HTML և XHTML ֆորմատի պատկանող վեբ-էջերի ձևավորման համար, սակայն կարող է նաև օգտագործվել ցանկացած տեսակի XML ֆորմատի փաստաթղթերի համար, ներառյալ SVG և XUL, ինչպես նաև դիզայնի, մակետի, տարբեր սարքերի և տարբեր էկրանների վրա ներկայացնելու համար։

Երբ HTML 3.2 -ի սպեցիֆիկացիայի մեջ ավելացվեցին <font> -ի նման թեգերը, գույնի ատրիբուտները։ Խոշոր վեբ-կայքերի նախագծումը դարձավ երկար և ծախսատար գործընթաց, քանի որ ամեն էջի վրա պետք է նշվեր շրիֆտը և գունային ինֆորմացիան։ Այս խնդիրը լուծելու համար World Wide Web (W3C) կոնսորցիումը ստեղծեց CSS-ը։ CSS-ը HTML-ի էջից հանեց ոճային ֆորմատավորումը։

Նկարագրություն
CSS-ը օգտագործվում է վեբ-էջեր նախագծողների կողմից գույներ, տառատեսակներ, գտնվելու վայր և այլ նկարագրություններ տալու համար։ CSS-ի հիմնական նպատակն է առանձնացնել HTML էջի պարունակությունը և նրա նկարագրությունը, դրանով իսկ էջին հաղորդել մատչելիություն, ճկունություն և նրա նկարագրությունը կառավարելու հնարավորություն, ինչպես նաև նվազեցնել հրամանների կրկնությունը և բարդությունը։ Բացի այդ CSS-ը թույլ է տալիս տվյալ դոկումենտը ներկայացնել տարբեր ոճերով։ Էջի արտածման ժամանակ CSS-ը կարող է վերցվել տարբեր աղբյուրներից։

 Եթե ոճերի աղյուսակը գրված է առանձին ֆայլի մեջ, ապա այն կարող է միանալ վեբ փաստաթղթին` հղումով  (), որը փաստաթղթի մեջ տեղադրվում է  և  զույգ թեգերի մեջ։   թեգը պետք է ունենա href ատրիբուտը, որն էլ նշում է ոճերի աղյուսակի հասցեն։ Այդ աղյուսակում նշված բոլոր հատկությունները տարածվում են ամբողջ  փաստաթղթի վրա։ Գրելաձևը հետևյալն է.
<!DOCTYPE html>
<html>
   <head>
      .....
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      .....
   </body>
</html>

Հեղինակային ոճեր` 
 Inline-ոճ, երբ HTML էջի շարվածքում նշվում է ոճը style ատրիբուտի միջոցով։
<p style="color: blue;">տեքստ</p>
 Ներկառուցված ոճ՝ CSS-ի բլոկներն են գտնվում HTML էջի շարվածքում։
<style>
p { color: blue; }
</style>
 Արտաքին ոճ՝ այսինքն ստեղծվում է առանձին .css ֆայլ, որում հղվում է մեր դոկումենտը։
<link type="text/css" rel="stylesheet" href="mystyle.css"/>

Օգտագործողի ոճեր 
Առանձին CSS ֆայլ է, որը նշվում է օգտագործողի կողմից՝ զննարկիչի կարգավորումներում։

Զննարկիչի ոճ
Այն ոճն է, որը տրվում է օգտագործվող զննարկիչի կողմից լռելյան պայմանով։

Գրելաձև
Սխեմատիկորեն ոճը նկարագրվում է հետևյալ կերպ՝
Նշիչ{
		Հատկանիշ։ արժեք;
		Հատկանիշ։ արժեք;
		Հատկանիշ։ արժեք;
		Հատկանիշ։ արժեք;
		}
Ստանդարտ CSS-ը որոշում է առաջնայությունները, հետևյալ հերթականությամբ՝
 Հատկանիշը նշված է @important-ի օգնությամբ,
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
 Ոճը նշված է հենց տեգում (inline)
 Նույնացուցիչների քանակը(#id) նշիչում
 Կարգերի (.class) և նախա կարգերի(։pseudoclass) քանակը նշիչում
 Նշիչում տեգերի անունների քանակը։

Բացի այդ նշանակություն ունի նաև նկարագրման հատկանիշների հարաբերական հերթականությունը՝ ավելի ուշ գրված հատկանիշն առաջնայնություն ունի։

Ոճերի աղյուսակների օրինակ.
p {
	font-family: "Garamond", serif;
	} 
h2.class {
	 font-size: 110 %;
	 color: red;
	 background: orange;
	}
#news p {
	 color: orange;
	 }
.class p {
	 color: orange;
	 }
[title]{
	color:orange;
	}
p:hover{
	color:orange;
	}
Այստեղ բերված է 3 կանոն p, h2 և #news p նշիչների համար։ Առաջին երկու կանոններում HTML-ի պարբերության և վերնագրի համար նշանակվում են ոճեր, ըստ որոնց պարբերությունը կարտածվի Garamond տառառեսակով, կամ եթե այդ տառատեսակը հասանելի չէ, որևէ այլ տառատեսակով (serif) տիպի։
Երկրորդ դասի վերնագիրը կարտածվի կարմիր տառերով, սպիտակ ֆոնով և մեծացված տառաչափով։

Երրորդ կանոնը վերաբերվում է այն պարբերություններին, որոնք գտնվում են #news id ունեցող էլեմենտների մեջ։

Դասեր և նույնացուցիչներ 
Դասերը և նույնացուցիչները կարող են վերաբերվել միայն նշված տարրերին (թեգերին), որոնք HTML կոդում ունեն   ատրիբուտներ` class կամ id: Օրինակ
<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>
         Селекторы классов и идентификаторов
      </title>
      <style>
         p.Big {
            font-family: arial, helvetica, sans-serif;
            color: maroon; 
         }
         div#First {
            background-color: silver; 
         }
      </style>
   </head>
   <body>
       .....
       <div id="First">
          .....
       </div>
       <p class="Big">
          .....
       </p>
   </body>
</html>

Հիմնական տարբերությունն այն է, որ նույնացուցիչը  () նշանակվում կամ սահմանվում  է մեկ էլեմենտի համար, իսկ դասը ()-ը սովորաբար հատկանշում է մի քանի էլեմենտներ։ Այնուամենայնիվ, ժամանակակից բրաուզերները  կարող են տարբերակել մի քանի էլեմենտներ միևնույն իդենտիֆիկատորով։ Տարբերությունն այն է նաև, որ կարող են լինել մի քանի դասեր,որոնք ծրագրի կոդում առանձնացվում են բացատանիշներով, իսկ նույնացուցիչները այդպես ներկայացնել հնարավոր չէ։ Կարևոր է նշել հետևյալ տարբերությունը` նույնացուցիչները լայնորեն կիրառվում են JavaScript ծրագրի կոդում, որպեսզի գտնեն փաստաթղթի ունիկալ տարրերը։ Ի տարբերություն թեգերի և նրանց ատրիբուտների, դասերի և նույնացուցիչների անունները կախված են  կոդում տառերի գրառման ձևից։ Դասերի և նույնացուցիչների հատկությունները սահմանվում են սելեքթորների օգնությամբ։ Կարող է դասի հատկությունը  տրվել ամբողջությամբ (այդ դեպքում սելեքթորը սկսվում է «.» նշանով), կամ նույնացուցիչն ինքն իր հատկությամբ (այս դեպքում սելեքթորը սկսվում է «#» նշանով), ինչպես նաև այդ դասի ցանկացած էլեմենտի կամ նույնացուցիչի հատկությունով։

CSS Սելեքթորներ 
Այստեղ պատկերված են CSS սելեքթորներն իրենց օրինակներով, որոնց միջոցով ընտրվում են HTML տարրերը, CSS ոճային աղյուսակում արտաքին տեսքի հետ կապված կանոններ գրելու նպատակով։

Սելեքթոր դաս(class)  
Լինում են դեպքեր, երբ ծրագրավորողը ցանկանում է ստեղծի էջն այնպես, որ այն ունենա երկու պարբերություն <p>, ընդ որում, հնարավոր է,որ դրանք  մշտապես փոփոխվեն կամ կրկնվեն։ Այդպիսի էջի օրինակ կարող է հանդիսանալ հարցազրույցը, որտեղ հերթագայում են խմբագրողի հարցերը և զրուցակցի պատասխանները։
Իհարկե, այսպիսի էջ ունենալու համար պետք է իրարից առանձնացնել հարցերն ու պատասխանները։ Դրա համար ոճային աղյուսակի մեջ երկու պարբերություններ պետք է ստեղծել, որի համար կիրառվում է դաս տիպի սելեքթորը։ Դրա մի օրինակ ներկայացված է ստորև.

<!DOCTYPE html>
<html>
   <head>
               Հարցեր և պատասխաններ
      
      
      <style type="text/css">
         p.ask {
            font-style: italic; 
            font-weight: bold; 
            font-family: Arial, sans-serif; 
            font-size: 10px; 
            color: gray; 
            margin-left: 15px; 
         }
         p.answer {
            font-family: 'Times New Roman', serif; 
            font-size: 12px; 
            color: black; 
         }
      </style>
   </head>
   <body>
      <p class="ask">
        լրագրողի հարցը
      </p>
      <p class="answer">
         պատասխան
      </p>
   </body>
</html>

Բերված օրինակում լրագրողի հարցերը տարբերվումեն գրառման ձևով՝ Arial մոխրագույն, կիսաթավ, 10 տառաչափով, ձախ եզրագծից հեռացված է 15 փիքսելի  չափով։ Պատասխանների համար ընտրված է  Times New Roman  տառատեսակը, տառաչափը` 12, գույնը`սև։ Գրառման այս եղանակը կարելի է կիրառել տարբեր քանակությամբ պարբերությունների և ոճերի բազմազան հնարավորությունների կիրառմամբ էջեր ստեղծելու համար։

Սելեքթոր նույնացուցիչ (id) 
 Ծրագրավորման ժամանակ որոշ տարրեր կիրառվում են հատուկ նպատակներով, կոչվելով ունիկալ տվյալներ, և այս տարրերը ծրագրի ինչ-որ մասում կարող են կապված լինել JavaScript ծրագրի հետ, որպես արտածվող տվյալներ, հետևաբար այդ տարրը նույնատիպ կամ նման տարրերից պետք է առանձնացնել հատկություններով, որը կատարվում է CSS-ի միջոցով:Այն կարող է այդ տարրը դարձնել ունիկալ` վերագրելով նրան իդենտիֆիկատոր`(id): Օրինակ`

 <!DOCTYPE html>
 <html>
   <head>
               Шрифт Courier
      
      
      <style type="text/css">
 </source>
          #onlyThisOne {
            font-family: Courier;  
         }
 
       </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
 </html>
 
Ներկայացվում է այսպես։ 

Նույնացուցիչները կարող են հատկանշված լինել միևնույն էջում գրված ցանկացած թվով տարրերի համար.
 <!DOCTYPE html>
 <html>
   <head>
      <title>
        Տեսք
      </title>
      <meta charset="utf-8" />
      <style type="text/css">
 
          input#green {
            color: green; 
         }
         input#red {
            color: red; 
         }
 
       </style>
   </head>
   <body>
      <form action="handler.php" method="get">
         <p>
            Այս դաշտում ներմուծված տեքստը կունենա կանաչ գույն։ 
            <input type="text" id="green" name="info1" size="20" />
         </p>
         <p>
           Այս դաշտում ներմուծված տեքստը կունենա կարմիր գույն։ 
            <input type="text" id="red" name="info2" size="20" />
         </p>
         <input type="submit" value="Ուղարկել" />
      </form>
   </body>
 </html>

Ժառանգությունը։ Կասկադայնությունը։  CSS ոճերի առաջնահերթություններ 
Եթե հիպերտեքստի նշագրման HTML լեզուն հիմնականում սահմանում է Վէբ էջի կառուցվածքը, ապա CSS-ը թույլատրում է ոճ սահմանել էջի յուրաքանչյուր օբյեկտի համար և այն պահպանել առանձին ֆայլում։  CSS -ի օգնությամբ կարելի է կայքի որոշ պարամետրեր, օրինակ`տառաչափը, փոփոխել`անփոփոխ թողնելով սերվերում պահվող  HTML փաստաթուղթը։ Անհրաժեշտության դեպքում կիրառողի բրաուզերը կարող է դիմել  CSS-ով ստեղծված ոճերի ֆայլին և էջին անհրաժեշտ տեսք տալ։
HTML փաստաթղթերում CSS- ի կիրառումը հիմնված է  «ժառանգության» և  կասկադի  սկզբունքների վրա։
HTML-ում գտնվող բոլոր թեգերը համարվում են HTML-ի ժառանգներ, օրինակ`  head-ը և body-ին, իսկ meta, link, title թեգերը ժառանգներ են հանդիսանում  title-ի համար, h1,h2,.., p, a, li, div, img թեգերը body-ի ժառանգներն են, միևնույն ժամանակ բոլորը միասին HTML-ի ժառանգներն են։ Ավելի պարզ ներկայացնելու համար կիրառենք հետևյալ օրինակը.  դիցուք ծրագիրը պարունակում է մի շարք li  թեգեր, սակայն հարկավոր է գունային փոփոխություն կատարել նրանցից միայն ol թեգի մեջ գրվածների համար։ Ծրագրավորողը կիրառում է հետևյալ ոճային կանոնը. CSS կոդում գրում է.
       ol li {
      color:#ffd0373;
      }:
Կարդացվում է հետևյալ կերպ. ընտրել ol-ի մեջ գրված li թեգերը և հաղորդել գույն։ Այս կանոնը վերաբերվում է նաև հղումներին։ Եթե ծրագրավորողը չի ցանկանում հատկությունը տարածել բոլոր հղումների վրա, ապա առանձնացնում է ցանկածած հղումներ, դիցուք դրանց հայտարարելով որպես ունիկալ արժեք։ Css-ում հատկանիշ վերագրում է այդ արժեքներին։ Օրինակ.
     .links p a{
     color:#f114cs;
      }:
Կարդացվում է այսպես. գունային փոփոխությունը վերաբերվում է links ունիկալ արժեք ունեցող այն a հղումներին, որոնք գտնվում են p թեգի մեջ։ Կա նաև հղումների կեղծ սելեքթոր, որը հիմնականում վերաբերվում է հղումներին։ Դրանք այն հատկություններով են պայմանավորված, թե ինչ գույն կստանա հղումը նախքան կլիկ անելը, մկնիկի սլաքը նրա վրա պահելուց հետո, ընտրված, բայց դեռ չգործարկված հղումը և արդեն բացված կամ գործարկված հղումը։ Նախնական տեսք ապահովում է գրառման հետևյալ օրինակը`
      a:link{
      color:#F124cs;
     }
Մեկ անգամ կիրառելուց հետո այն իր նախնական գույնը փոխում է։ Իսկ եթե կիրառենք hover տարբերակը, այսինքն այն կարգավիճակն է, երբ մկնիկի սլաքը պահում ենք վրան, գույնը փոխում է,  ապա այս հատկությունը կվերաբերվի միայն a-ի նշված տարբերակներին։ Եթե նշենք active տարբերակը, ապա մկնիկի ցուցիչը վրան պահելիս, գույնը փոխում է, 1 սեղմման ժամանակ, դեռ սեղմակը չթողած` գույնը փոխվում է։

Ոճային աղյուսակի օրինակ 
Հետևյալ օրինակով նշված կոդը կամ կարող է հանդես գալ առանձին ֆայլի տեսքով, .css ընդլայնումով, կամ <style> թեգի միջոցով կարող է գրվել HTML ծրագրի «գլխամասային»`   կոդում`
p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20px; 
   color: red; 
   background: white; 
}
.note {
   color: red; 
   background-color: yellow; 
   font-weight: bold; 
}
p#paragraph1 {
   padding-left: 10px;
}
a:hover {
   text-decoration: none;
}
#news p {
   color: blue;
}
[type="button"] {
   background-color: green;
}

Այստեղ կիրառված են յոթ կանոններ p, h2, .note, p#paragraph1, a:hover, #news p և [type="button"] սելեքթորների կիրառմամբ։

Առաջին կանոնը վերաբերվում է HTML-էլեմենտի կոդին` p (պարբերություն) - նշված է ոճ. պարբերությունները ներկայացվում են  Arial տառատեսակով, սակայն եթե բրաուզերն այն չի գտնում, ապա  կիրառում է Helvetica կամ Sans-serif, հակառակ դեպքում այդ ընտանիքի որևէ տեսակ (լռելյայն)
 Երկրորդ կանոնը վերաբերվում է  h2 (երկրորդ մակարդակի վերնագիր). Երկրորդ մակարդակի վերնագիրը  կարտածվի սպիտակ ֆոնի վրա գրված կարմիր տառերով, "Կեգլ" մեծացված չափսերով
Երրորդ կանոնը վերաբերվում է ցանկացած տարրի, ատրիբուտ class, որին տրված կլինի «note» արժեքը, օրինակ, պարբերության արժեքը` <p class="note">Այս կանոնը կարտածվի կիսաթավ շրիֆտով, դեղին ֆոնի վրա կարմիր գույնով</p>
 Չորրորդ կանոնը վերաբերվում է միայն այն էլեմենտներին, որոնք  p են, ունեն id ատրիբուտ, որը հավասար է paragraph1: Այդպիսի  տարրը կունենա ներքին բացատ 10 պիքսելներով (padding)
 Հինգերորդ կանոնը վերաբերվում է hover տարրերին a — հիպերհղմամբ. Լռելայն, բրաուզերների մեծամասնությունը հղման տեքստի տարրերն արտածում են ընդգծումով, այսինքն a ընդգծվում է։ Գրառման text-decoration: none; տեսակի համաձայն` ընդգծումն անհետանում է, երբ մկնիկի ցուցիչը պահում ենք վրան
 Վեցերորդ կանոնը վերաբերվում է այն p էլեմենտներին, որոնք գտնվում են ինչ-որ տարրի մեջ, որի տարրի id ատրիբուտը, հավասար է <code>news</code> (#news p — սա ժառանգների սելեկտորի տիպիկ օրինակ է, տես` վերևից հինգերորդ կետ)
 Յոթերորդ կանոնը վերաբերվում է type հավասար button. Օրինակ, այս գրառման համաձայն, տարրը ակտիվացնելիս ֆոնի գույնը կդառնա կանաչ <input type="button"> (սովորական սեղմակ)։

CSS-դասավորություն 
Նախքան վեբ-էջերում CSS դիզայնի հայտնվելը  փաստաթղթի բովանդակությանը համապատասխան՝ կիրառվում էր HTML ծրագրի հնարավորությունները։ Սակայն  CSS-ը հեղաշրջում կատարեց ծրագրավորման գործընթացում։ HTML-ն օգտագործվում է բովանդակությունը գրելու համար, իսկ  CSS-ը՝ պատրաստի բովանդակությունը ֆորմատ անելու համար։ Երբ  Թիմ Բեռնես Լին ստեղծեց Համաշխարհային ցանցը, կիրառվում էր միայն HTML Ծրագչավորման լեզուն, որը նույնպես լրիվ կատարելագործված չէր. հեղինակը կարող էր խմբագրել միայն պարզագույն թեգեր։ Երբ Վեբ-էջերը լայն տարածում ստացան, դիզայներներն սկսեցին ճանապարհներ փնտրել օնլայնփաստաթղթերին layout հաղորդելու համար։ Այդ նպատակով զննարկիչ արտադրողները ( Netscape, Microsoft) ստեղծեցին նոր թեգեր, օրինակ <font> թեգը, որը տարբերվում էր HTML ծրագրի օրիգինալ թեգերից նրանով, որ ստեղծում էր layout-ը, այլ ոչ կառուցվածքը։ Այսպիսով CSS-ը ատրաքին ոճը սահմանող լեզու է, որն ընդգրկում է տառատեսակներ, գույներ, ֆոնային նկարներ, էջի սահմաններ, բարձրություն, լայնություն և այլն։ CSS-ում կիրառվող շատ հատկություններ նման են HTML հատկություններին։ Օրինակ՝ HTML կոդը վեբ-էջին կարող է կարմիր ֆոն ապահովել հետևյալ գրառմամբ.
<body bgcolor="#FF0000">, իսկ CSS կոդի միջոցով այն կլինի՝
 body{
 baskground-color:"FF0000";
 }

 <!doctype html>
             
        Էջի վերնագիր
         
            #main {
                width: 220px;
                height: 300px;
                border: 1px solid black; 
                display: flex;
                align-items: center;
            }
            #main div {
                flex: 1;
            }
        
    
             Կարմիր
     Կանաչ
     Վարդագույն

CSS-գույներ և ֆոնի գույն 
CSS-ում կիրառվում են հետևյալ պարամետրերը.
 color
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background

Ծանոթագրություններ 

Թվային տեխնոլոգիաներ