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

CSS
	;
Ընդլայնում	.css
MIME	text/css
Մշակող	CSS Working Group?
Հրատարակված է	դեկտեմբերի 17, 1996
Ֆորմատի տեսակ	ֆայլի ֆորմատ և ծրագրավորման լեզու
Կայք	w3.org/Style/CSS/ և drafts.csswg.org

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

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

Նկարագրություն[խմբագրել | խմբագրել կոդը]

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

Եթե ոճերի աղյուսակը գրված է առանձին ֆայլի մեջ, ապա այն կարող է միանալ վեբ փաստաթղթին` հղումով (անգլ.՝ link), որը փաստաթղթի մեջ տեղադրվում է <head> և </head> զույգ թեգերի մեջ։ <link> թեգը պետք է ունենա 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>

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

CSS Սելեքթորներ[խմբագրել | խմբագրել կոդը]

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

Pattern	Matches	First defined in CSS level
E	an element of type E	1
E:link	an E element is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	1
E:active	an E element during certain user actions	1
E::first-line	the first formatted line of an E element	1
E::first-letter	the first formatted letter of an E element	1
.c	all elements with class="c"	1
#myid	the element with id="myid"	1
E.warning	an E element whose class is "warning" (the document language specifies how class is determined)	1
E#myid	an E element with ID equal to "myid"	1
E F	an F element descendant of an E element	1
*	any element	2
E[foo]	an E element with a "foo" attribute	2
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	2
E[foo~="bar"]	an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"	2
E[foo\|="en"]	an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"	2
E:first-child	an E element, first child of its parent	2
E:lang(fr)	an element of type E in language "fr" (the document language specifies how language is determined)	2
E::before	generated content before an E element's content	2
E::after	generated content after an E element's content	2
E > F	an F element child of an E element	2
E + F	an F element immediately preceded by an E element	2
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	3
E[foo*="bar"]	an E element whose "foo" attribute value contains the substring "bar"	3
E:root	an E element, root of the document	3
E:nth-child(n)	an E element, the n-th child of its parent	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting from the last one	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting from the last one	3
E:last-child	an E element, last child of its parent	3
E:first-of-type	an E element, first sibling of its type	3
E:last-of-type	an E element, last sibling of its type	3
E:only-child	an E element, only child of its parent	3
E:only-of-type	an E element, only sibling of its type	3
E:empty	an E element that has no children (including text nodes)	3
E:target	an E element being the target of the referring URI	3
E:enabled	a user interface element E that is enabled	3
E:disabled	a user interface element E that is disabled	3
E:checked	a user interface element E that is checked (for instance a radio-button or checkbox)	3
E:not(s)	an E element that does not match simple selector s	3
E ~ F	an F element preceded by an E element	3

Սելեքթոր դաս(class)[խմբագրել | խմբագրել կոդը]

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

<!DOCTYPE html> <html>

  <head>
     <title>
        Հարցեր և պատասխաններ
     </title>
     <meta charset="utf-8" />
     <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, գույնը`սև։ Գրառման այս եղանակը կարելի է կիրառել տարբեր քանակությամբ պարբերությունների և ոճերի բազմազան հնարավորությունների կիրառմամբ էջեր ստեղծելու համար։ Կաղապար:CSS:rendered

Սելեքթոր նույնացուցիչ (id)[խմբագրել | խմբագրել կոդը]

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

<!DOCTYPE html>
<html>
  <head>
     <title>
        Шрифт Courier
     </title>
     <meta charset="utf-8" />
     <style type="text/css">
</source>

         #onlyThisOne {
            font-family: Courier;  
         }

      </style>
   </head>
   <body>
      <p id="onlyThisOne">
         Courier
      </p>
   </body>
 </html>

Ներկայացվում է այսպես։ Կաղապար:CSS:rendered

Նույնացուցիչները կարող են հատկանշված լինել միևնույն էջում գրված ցանկացած թվով տարրերի համար.

 <!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 ծրագրի «գլխամասային»` <head> </head> կոդում`

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) ստեղծեցին նոր թեգեր, օրինակ թեգը, որը տարբերվում էր HTML ծրագրի օրիգինալ թեգերից նրանով, որ ստեղծում էր layout-ը, այլ ոչ կառուցվածքը։ Այսպիսով CSS-ը ատրաքին ոճը սահմանող լեզու է, որն ընդգրկում է տառատեսակներ, գույներ, ֆոնային նկարներ, էջի սահմաններ, բարձրություն, լայնություն և այլն։ CSS-ում կիրառվող շատ հատկություններ նման են HTML հատկություններին։ Օրինակ՝ HTML կոդը վեբ-էջին կարող է կարմիր ֆոն ապահովել հետևյալ գրառմամբ. <body bgcolor="#FF0000">, իսկ CSS կոդի միջոցով այն կլինի՝

body{
baskground-color:"FF0000";
}

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Էջի վերնագիր</title>
       <style> 
           #main {
               width: 220px;
               height: 300px;
               border: 1px solid black; 
               display: flex;
               align-items: center;
           }
           #main div {
               flex: 1;
           }
       </style>
   </head>
   <body>

Կարմիր

Կանաչ

Վարդագույն

   </body>
</html>

CSS-գույներ և ֆոնի գույն[խմբագրել | խմբագրել կոդը]

CSS-ում կիրառվում են հետևյալ պարամետրերը.

color
background-color
background-image
background-repeat
background-attachment
background-position
background

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

↑ What is CSS?

Վիքիպահեստ նախագծում կարող եք այս նյութի վերաբերյալ հավելյալ պատկերազարդում գտնել Կասկադային ոճաթերթ կատեգորիայում։

[1] What is CSS?

[1]

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

Բովանդակություն

Նկարագրություն[խմբագրել | խմբագրել կոդը]

Հեղինակային ոճեր`[խմբագրել | խմբագրել կոդը]

Օգտագործողի ոճեր[խմբագրել | խմբագրել կոդը]

Զննարկիչի ոճ[խմբագրել | խմբագրել կոդը]

Գրելաձև[խմբագրել | խմբագրել կոդը]

Դասեր և նույնացուցիչներ[խմբագրել | խմբագրել կոդը]

CSS Սելեքթորներ[խմբագրել | խմբագրել կոդը]

Սելեքթոր դաս(class)[խմբագրել | խմբագրել կոդը]

Սելեքթոր նույնացուցիչ (id)[խմբագրել | խմբագրել կոդը]

Ժառանգությունը։ Կասկադայնությունը։ CSS ոճերի առաջնահերթություններ[խմբագրել | խմբագրել կոդը]

Ոճային աղյուսակի օրինակ[խմբագրել | խմբագրել կոդը]

CSS-դասավորություն[խմբագրել | խմբագրել կոդը]

CSS-գույներ և ֆոնի գույն[խմբագրել | խմբագրել կոդը]

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

Նավարկման ցանկ

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

Նկարագրություն[խմբագրել | խմբագրել կոդը]

Հեղինակային ոճեր`[խմբագրել | խմբագրել կոդը]

Օգտագործողի ոճեր[խմբագրել | խմբագրել կոդը]

Զննարկիչի ոճ[խմբագրել | խմբագրել կոդը]

Գրելաձև[խմբագրել | խմբագրել կոդը]

Դասեր և նույնացուցիչներ[խմբագրել | խմբագրել կոդը]

CSS Սելեքթորներ[խմբագրել | խմբագրել կոդը]

Սելեքթոր դաս(class)[խմբագրել | խմբագրել կոդը]

Սելեքթոր նույնացուցիչ (id)[խմբագրել | խմբագրել կոդը]

Ժառանգությունը։ Կասկադայնությունը։ CSS ոճերի առաջնահերթություններ[խմբագրել | խմբագրել կոդը]

Ոճային աղյուսակի օրինակ[խմբագրել | խմբագրել կոդը]

CSS-դասավորություն[խմբագրել | խմբագրել կոդը]

CSS-գույներ և ֆոնի գույն[խմբագրել | խմբագրել կոդը]

Ծանոթագրություններ[խմբագրել | խմբագրել կոդը]

Նավարկման ցանկ

Որոնել