ՍԿԻԶԲ
Թարմացվել է 11.03.2024

Docy

@Կանոններ

Մոտավոր ընթերցում. 7 րոպե 0 դիտումներ

@charset

@charset – Նախատեսված է css ֆայլի կոդավորումը(սիմվոլների թվային արժեքները, որն անհրաժեշտ է համակարգչին՝ դրանք ճիշտ մշակելու համար) սահմանելու համար։ Հիմնականում բրաուզերի կանխադրված կոդավորման տեսակն այն է, ինչ անհրաժեշտ է ծրագրային ֆայլերը մշակելու համար։ Հիմնականում կանոնը կսահմանվի համոզվելու համար։

				
					@charset"utf-8";

p {
  margin: 0;
  padding: 0;
}

@font-face

@font-face – սահմանում է հեղինակային կամ սեփական տառատեսակներ։  

Հեղինակային անվտանգ տառատեսակները օգտվողի համակարգչի օպերացիոն համակարգում զետեղված ստանդարտ տառատեսակներն են,  իսկ սեփականը՝  երբ ծրագրավորողը ներբեռնել է համացանցից նախընտրելի տառատեսակ։

Սեփական տառատեսակը վեբ կայքի ամբողջ տվյալների հետ միասին բեռնվում է սերվերում, որպեսզի բրաուզերը անրաժեշտ ֆայլերի հետ ներբեռնի նաև տվյալ տառատեսակը։

Սերվերից ներբեռնվող տառատեսակի հասցեն( src:url(…); ) և անվանումը( font-family: someFont; ) սահմանվում է  @font-face  կանոնում։ Դրանք պարտադիր են, իսկ տեքստին վերաբերող այլ css հատկություններ սահմանվում է ըստ ցանկության։ 

Կարելի է սահմանել line-gap-override հատկությունը նույնպես։ Այն վերասահամանում է տողերի միջև ընկած կանխադրված հեռավորությունը։ Օգտագործվում է, երբ անհրաժեշտ է՝ երկու տարբեր տառատեսակներ ունենան տողերի միջև նույն հեռավորությունը։

Բրաուզերներն աջակցում են տառատեսակների տարբեր ֆորմատներ, ուստի src հատկության մեջ, իրարից ստորակետներով առանձնացված, պետք է սահմանել տառատեսակի ֆորմատների մի քանի հասցեներ՝ մի քանի url(…)-ներ։ Օրինակ՝ “ internet explorer ” բրաուզերի մինչև 9-րդ տարբերակն աջակցում է տառատեսակի .eot ֆորմատը, որը ցանկալի է ավելացնել հին տարբերակից օգտվողների համար։

				
					 @font-face {
    font-family: 'RobotoDelta-VF';
    src: url("RobotoDelta-VF.ttf");
    line-gap-override: 100%;
  }
  div {
    font-family: 'RobotoDelta-VF';
    font-size: 1.5em;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>
      Tincidunt integer eu augue augue nunc elit dolor, luctus placerat
      scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet....
    </div>
  </body>
</html>

@font-face-ում տառատեսակի հասցեն կարող է լինել երեք տեսակի՝

– src: local(example.ttf) – Բրաուզերը նախ կստուգի՝ արդյոք տառատեսակը զետեղված է օգտվողի համակարչի օպերացիոն համակարգի տառատեսակների ցանկում և եթե ոչ՝ կօգտագործի url() -ում սահմանվածը։

– տառատեսակը սահմանվում է ինտերնետից(src: url(https://…..)), կամ սերվերից(src: url(example/fonts/Future-Friends.ttf) )։

				
					 @font-face {
     font-family: 'Bodoni MT','Roboto' ;
     src: local('Bodoni MT'),
     url(https://fonts.gstatic.com/s/roboto/v30/
          KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2)
     format('woff2'); /* format()-ի միջոցով սահմանվել է տառատեսակի ֆորմատը․ */
}

@font-face-ի դեսկրիպտորներից(հատկություններից) է նաև unicode-range-ը, որը սահմանում է @font-face-ի տառատեսակի սիմվոլների միջակայքը։ Սերվերից կներբեռնվի ամբողջ տառատեսակը միայն այն դեպքում, երբ օգտագործվի միջակայքում գտնվող սիմվոլներից մեկը։ Եթե վեբ կայքը հասանելի է ենթադրենք հայերեն, ռուսերեն, անգլերեն լեզուներով և օգտվողն օգտագործում է հայերեն տարբերակը, ապա բրաուզերը սերվերից կներբեռնի միայն հայերեն տառատեսակը, որով ձեռք կբերվի կայքի օգտագործման որոշակի արագություն։

Արժեքները կարող են լինել՝
Unicode սիմվոլներից յուրաքանչյուրը․ օրինակ՝ U+26, որը համապատասխանում է « & » սիմվոլին։

Որոշակի սիմվոլների միջակայք․ օրինակ՝ U+0025-00FF, այսինքն հասանելի կլինի U+0025-ից մինչև U+00FF  միջակայքում ընկած սիմվոլները։

« ? » նշանով սահմանվող միջակայք․ օրինակ՝  U+4??, այսինքն հասանելի կլինի U+400-ից մինչև U+4FF ընկած միջակայքում սիմվոլները։

				
					  @font-face {
    font-family: "AlexBrush";
    src: url(AlexBrush-Regular.ttf);
    unicode-range: U+26;
  }
  div {
    font-size: 4em;
    font-family: AlexBrush, Helvetica, sans-serif;
  }
				
			
				
					<div>HTML & CSS = WEB</div>

@import

@import –նախատեսված է html-ին արտաքին css ֆայլ կցելու համար․ նույնն է ինչ <link> էլեմենտը։ 

Դրանց տարբերությունը լեզվի մեջ է․ @import-ը css-ի կողմից առաջարկվող մեխանիզմն է, իսկ <link>-ը՝  html-ի։ @import-ը չի աջակցվում հին բրաուզերների կողմից։ Այս երկուսից նախընտրելի է <link> տարբերակը։

@import-ը սահմանվում է ամենասկզբում, կամ @charset-ից հետո։

Հնարավոր է սահմանել css ոճի համար նախատեսված սարքավորման տեսակը։ 

Հետևյալ օրինակում՝ screen ՝ համակարգչի մոնիտորների համար և print ՝ պրինտերների համար․

				
					  @import "/style/example01.css" screen;
  @import "/style/example02.css" print;
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hellow World!!</p>
  </body>
</html>

@keyframes

@keyframes – նախատեսված է անիմացիայի համար։ Անիմացիայի ողջ ընթացքում, սահմանում է կետեր(ключевых кадров / путевых точек), որոնց միջոցով քայլ առ քայլ վերահսկվում է անիմացիան։

Հատուկ կադրերը հնարավոր է սահմանել խառը հերթականությամբ, բայց կմշակվեն տոկոսների աճման հերթականությամբ։

Մինիմալ սահմանվում է երկու կադր՝ 

from(նույնն է ինչ 0%-ը)-սահմանում է անիմացիայի սկիզբը։

to(նույնն է ինչ 100%-ը)-սահմանում է անիմացիայի վերջը։

Երկուսից ավել կադրերը սահմանվում են %-ներով։

@keyframes-ի կառուցվածքն է՝

				
					  @keyframes box {
    from {
      left: 0;
    }
    to {
      left: 300px;
    }
  }

box – անիմացիայի անվանումն է, որը պարտադիր է․ կարող է լինել ցանկացած բառ։

from / to – հատուկ կադրերի սելեկտորներն են․ սահմանում է անիմացիայի սկզիբը և վերջը։

left: 0; / left: 300px;- css հատկություններ են՝ օբյեկտը կշարժվի դեպի ձախ 300px ով։

				
					  div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: box 4s infinite;
  }
  @keyframes box {
    0% {
      top: 0px;
      left: 0px;
      background: red;
    }
    25% {
      top: 0px;
      left: 530px;
      background: blue;
    }
    50% {
      top: 100px;
      left: 530px;
      background: yellow;
    }
    75% {
      top: 100px;
      left: 0px;
      background: green;
    }
    100% {
      top: 0px;
      left: 0px;
      background: red;
    }
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Пример</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div></div>
  </body>
</html>

animation: box 4s infinite;- animation հատկության մեջ, պրոբելով առանձնացված սահմանվել է ընդհանուր անիմացիայի երեք արժեքներ՝ 

box–  @keyframes-ի անվանումն է, 

4s infinite – css-ի հատկություններ են։ 4s-ը՝ անիմացիայի մի ցիկլը կտևա 4 վարկյան, իսկ infinite-ը՝ անիմացիայի վերջանալուց հետո այն նորից կկրկնվի։

@keyframes – ում սահմանվել է 5 հատուկ կադրեր, որոնց միջոցով վերահսկվում է անիմացիան։

Առաջին հատուկ կադրը՝ 0%՝, որին սահմանվել է css-ի հատկություններ՝ վանդակի անիմացիայի սկիզբը պետք է սկսի էջի ամենավերևի(top) ձախ(left) անկյունից կարմիր գույնով(background)։

Երկրորդ հատուկ կադրը՝ 25%՝  մինչև 25% -ը օբյեկտը պետք է տեղափոխվի ձախից աջ 530px-ով, որի ընթացքում գույնը կփոխի կապույտի՝ պահպանելով իր վայրը էջի ամենավերևում։

Անիմացիան այդպես կշարունակվի մինչև այն սկզբնական վայրում ավարտվելը, որը կտևա 4 վարկյան և ավարտվելուն պես նորից կսկսի իր ցիկլը։

@media

@media – նույնն է, ինչ <link>-ի  media ատրիբուտը։ media ատրիբուտը html-ի կողմից տրամադրվող մեխանիզմ է, իսկ @media -ն՝ css-ի կողմից:

all – համապատասխանում է բոլոր տեսակի սարքավորումներին,

print – համապատասխանում է պրինտերներին,

screen – համապատասխանում է համակարգչի մոնիտորներին,

speech – համապատասխանում է տեսողության խնդիրներ ունեցողների համար նախատեսված սարքավորումներին։

				
					  @media screen {
    p {
      color: red;
    }
  }
  @media print {
    p {
      color: green;
    }
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world!!</p>
  </body>
</html>

@page

@page – նախատեսված է, երբ css-ի media տեսակը հավասար է print- ի, կամ css -ում հատուկ հատկություններ առանձնացնելու համար, որոնք կօգտագործվեն միայն էջը տպելու ժամանակ։ 

Կանոնը թույլ է տալիս մինչ տպելը էջի դաշտերի տեղակայման փոփոխություն․ այս կանոնում սահմանված հատկությունները կօգտագործվեն միայն տպելու ժամանակ։ 

Կարելի է սահմանել որոշակի հատկություններ՝ margin, margin-top, margin-bottom, margin-right, margin-left՝ վերևից և ներքևից, աջ և ձախ կողմից արտաքին սահմաններ։

Բրաուզերն իրենում ունի տպելու համար նախատեսված ծրագիր, որտեղ հնարավոր է մինչ էջերը տպելը տեսնել դրանց տեսքը։ Այնտեղ հնարավոր է փաստաթղթի էջերը ցուցադրել հերթականությամբ, կամ աջ և ձախ դասավորությամբ։ 

Կան հատուկ պսևդոկլասներ, որոնց միջոցով հնարավոր է հատկություններն օգտագործել միայն աջ կողմում ցուցադրված էջերի համար,  միայն ձախ կողմում ցուցադրվածների համար, կամ փաստաթղթի միայն առաջին էջի համար։ 

Այդ պսևդոկլասներն են՝

:left -հատկություններն օգտագործել միայն ձախ կողմում ցուցադրված էջերի համար,

:right – միայն աջ կողմում ցուցադրվածների համար,

։first – միայն առաջին էջի համար։

				
					  @page :first {
    margin-left: 50%;
    margin-top: 50%;
  }
  p {
    page-break-after: always;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <p>Hello world01!!</p>
    <p>Hello world02!!</p>
    <p>Hello world03!!</p>
    <p>Hello world04!!</p>
    <button onclick="window.print()">print</button>
  </body>
</html>

@supports

@supports – ստուգում է՝ բրաուզերն աջակցու՞մ է նշված css հատկությունը, և դրա հիման վրա թույլատրում է օգտագործել սահմանված css ոճը։ 

Պայմանների տեսակները երեքն են՝  not, and, or :  

Օրինակ՝

				
					  @supports (display: flex) {
    p {
      color: red;
    }
  }

Եթե բրաուզերն աջակցում է display: flex css հատկությունը, ապա միայն այդ դեպքում կօգտագործվի @supports -ում սահմանված css ոճը:

				
					  @supports not (transform: perspective(300px)) {
    p {
      color: red;
    }
  }

Եթե բրաուզերը չի աջակցում transform: perspective() css հատկությունը, ապա միայն այդ դեպքում կօգտագործվի @supports -ում սահմանված css ոճը։

				
					  @supports (display: flex) and (transform: perspective(300px)) {
    p {
      color: red;
    }
  }

Եթե բրաուզերն աջակցում է թե՜ display: flex  և թե՜ transform: perspective() css հատկությունները, ապա միայն այդ դեպքում կսահմանվի @supports -ում նշված css ոճը։

				
					  @supports (display: flex) or (transform: perspective(300px)) {
    p {
      color: red;
    }
  }

Եթե բրաուզերն աջակցում է նշվածներից գոնե մեկը, ապա միայն այդ դեպքում կօգտագործվի @supports -ում սահմանված css ոճը։

Հետևյալ օրինակում՝ եթե բրաուզերն աջակցում է css հատկությունը, ապա չի ցուցադրվի ‘.no’ սելեկտորով տեքստը․ եթե չի աջակցում ցուցադրվում է ‘.yes’ սելեկտորով տեքստը։

				
					  @supports (display: flex) {
    .no {
      display: none;
    }
  }
  @supports not (display: flex) {
    .yes {
      display: none;
    }
  }
				
			
				
					<!DOCTYPE html>
<html>
<head>
  <title>@supports</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p class="yes">Ձեր բրաուզերը աջակցում է display: flex հատկությունը։</p>
  <p class="no">Ձեր բրաուզերը չի աջակցումdisplay: flex հատկությունը</p>
</body>
</html>

@counter-style

@counter-style – սահմանում է ցուցակի հաշվիչ։ 

Ցուցակի հաշվիչը սովորաբար մի քանի տեսակի է՝ բաղկացած է թվերից,  հռոմեական թվերից, լատինական տառերից և այլն։ 

@counter-style կանոնը հնարավորություն է տալիս օգտագործել հաշվիչի տեսակներ, որն ընտրվում է մեր կողմից։ 

Օրինակ՝

				
					  @counter-style mrgayin {
    system: cyclic;
    symbols: "1F347";
    suffix: " ";
  }
  ul {
    list-style-type: mrgayin;
  }
				
			
				
					<body>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>
</body>

 Հաշվիչի ոճը սահմանվում է դեսկրիպտորների միջոցով, որոնք գտնվում են @counter-style կանոնում։

Դրանք են՝

system

system: սահմանում է, թե բրաուզերը ինչ ալգորիթմ պիտի օգտագործի ցուցակի հաշվիչի ոճը պատկերելու համար։ 

Օրինակ կարող է ցիկլային ալգորիթմն օգտագործել՝ թվարկված սիմվոլները հերթով հատկացնել հաշվիչին և ավարտվելու դեպքում ցիկլը կրկնել։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըsymbolic
Հարակից կանոն@counter-style

Արժեքներն են՝

cyclic – ցիկլային ալգորիթմ՝ թվարկված սիմվոլները հերթով հատկացվում է հաշվիչին և ավարտվելու դեպքում ցիկլը կրկնվում է։

Հետևյալ օրինակի դատարկ չակերտներում անհրաժեշտ է տեղադրել նախընտրելի սիմվոլը կամ պատկերակը(icon)։

				
					  @counter-style mrger {
    system: cyclic;
    symbols: "" "" "";
    suffix: " ";
  }
  ul {
    list-style-type: mrger;
  }
				
			
				
					<body>
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
  </ul>
</body>

fixed –նշված բոլոր սիմվոլները հերթականությամբ տեղադրվում են․ սիմվոլների ավարտվելուն պես, ցուցակին վերադարձվում է իրեն հատուկ համարակալումը՝

				
					  @counter-style mrger {
    system: fixed;
    symbols: "" "" "";
    suffix: " ";
  }
  ul {
    list-style-type: mrger;
  }

symbolic –սիմվոլները տեղադրելու ամեն ցիկլից հետո յուրաքանչյուր սիմվոլ գումարում է մեկով։ 

Օրինակ` a, b, c սիմվոլներ. երկրորդ ցիկլի ժամանակ դրանք կգումարվեն մեկով՝aa, bb, cc և այլն։

				
					  @counter-style eghanak {
    system: symbolic;
    symbols: "" "" "";
    suffix: " ";
  }
  ul {
    list-style-type: eghanak;
  }

alphabetic –սիմվոլները տեղադրում է մորզեի այբուբենի պես։ 

Օրինակ` a, b, c սիմվոլները․ առաջին ցիկլի ժամանակ սիմվոլները կտեղադրվեն ինչպես կան, երկրորդ ցիկլի ժամանակ` երկու սիմվոլ՝ նախ aa, հետո ab, ba, bb,  երրորդում՝ aaa, aba, abb, aca, acb, acc  և այլն:

				
					  @counter-style erkr_patkerner {
    system: alphabetic;
    symbols: "○" "●" "□";
    suffix: " ";
  }
  ul {
    list-style-type: erkr_patkerner;
  }

numeric –աշխատում է ինչպես alphabetic-ը, բայց մի տարբերությամբ․ alphabetic-ը սիմվոլները ցուցադրում է մորզեի այբուբենով, իսկ numeric-ը սիմվոլները ցուցադրում է համարակալման տեսքով։ Համարակալումը սկսում է մեկից: 

Տարբերությունը կերևա, եթե որպես սիմվոլներ օգտագործվեն թվեր՝

				
					  @counter-style alph_tver {
    system: alphabetic;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: " ";
  }
  @counter-style num_tver {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: " ";
  }
  .ul01 {
    list-style-type: alph_tver;
  }
  .ul02 {
    list-style-type: num_tver;
  }

additive –հռոմեական թվերը սահմանվում են հետևյալ կերպ՝  I-1 … IV-4,  V-5 … IX-9, X-10 … և այլն։ 

Այս նույն տրամաբանությամբ additive արժեքի միջոցով լատինական տառերի փոխարեն հնարավոր է օգտագործել ցանկացած սիմվոլ։

Սիմվոլները սահմանվում են additive-symbols հատկությամբ՝ մեծից փոքր հերթականությամբ․ նշվում է թիվը, որից հետո համարժեք սիմվոլը։

				
					  @counter-style tvayin_model {
    system: additive;
    additive-symbols: 14 "■", 10 "▲", 4 "◉", 1 "◆";
    suffix: " ";
  }
  ul {
    list-style-type: tvayin_model;
    margin-left: 100px;
  }

extends –ժառանգում է list-style-type css հատկության արժեքներից ցանկացածը։ 

Այս դեպքում չի սահմանվում symbols կամ additive-symbols հատկությունները։

				
					  @counter-style tvayin_model {
    system: extends armenian;
    suffix: " - ";
  }
  ul {
    list-style-type: tvayin_model;
  }

negative

negative: – սովորաբար, եթե ցուցակի հաշվիչը սկսում է բացասական թվերից, ավելացվում է մինուս սիմվոլը։ negative հատկության միջոցով մինուսի փոխարեն կսահմանվի այլ սիմվոլ։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը« – »՝ մինուս։
Հարակից կանոն@counter-style

Արժեքը կլինի որևէ սիմվոլ, բառ կամ նկար։

				
					  @counter-style decimal-negative {
    system: extends decimal;
    suffix: " ";
    negative: "(" ")";
  }
  ol {
    list-style-type: decimal-negative;
  }
				
			
				
					<body>
  <ol start="-5">
    <li>one</li>
    <li>two</li>
    .
    .
    .
  </ol>
</body>

prefix

prefix: – ցուցակի մարկերից առաջ սահմանում է որևէ սիմվոլ, բառ, կամ նկար։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըոչինչ
Հարակից կանոն@counter-style

Արժեքը կարող է լինել որևէ սիմվոլ, բառ կամ նկար։

				
					  @counter-style numeric-prefixed {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    prefix: "Համար ";
  }
  ol {
    list-style-type: numeric-prefixed;
    list-style-position: inside;
  }

suffix

suffix: -ցուցակի մարկերից հետո սահմանում է որևէ սիմվոլ, բառ, կամ նկար։ 

Օրինակ կարող է ստանդարտ կետը փոխարինել այլ սիմվոլով։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը« ․ »
Հարակից կանոն@counter-style

Արժեքը կարող է լինել որևէ սիմվոլ, բառ կամ նկար։

				
					  @counter-style numeric-suffixed {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: "~";
  }
  ol {
    list-style-type: numeric-suffixed;
    list-style-position: inside;
  }

range

range: – ցուցակի մարկերի ոճը կօգտագործվի միայն range-ում սահմանած միջակայքում։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըauto
Հարակից կանոն@counter-style

Արժեքներն են՝

auto – cyclic, numeric և  fixed արժեքների դեպքում միջակայքը կարող է լինել բացասական անվերջությունից դրական անվերջություն։ alphabetic, symbolic արժեքների դեպքում` մեկից մինչև դրական անվերջություն: additive-ի դեպքում` զրոյից մինչև դրական անվերջություն։

infinite – եթե միջակայքում առաջինն է նշված, ապա կվերաբերի բացասական անվերջությանը, իսկ եթե երկրորդն է՝ կվերաբերի դրական անվերջությանը։

որևէՄիջակայք – երկու թվերից բաղկացած միջակայք, որտեղ առաջինը պետք է փոքր լինի երկրորդից։

				
					  @counter-style fruit-range {
    system: cyclic;
    symbols: "1F34E" "1F34F" "1F34A";
    suffix: " ";
    range: 3 5, 8 10;
  }
  ol {
    list-style-type: fruit-range;
  }

pad

pad: – սահմանում է ցուցակի հաշվիչի սիմվոլների մինիմալ քանակը։ Սահմանվում է երկու արժեք, առաջինը՝ հաշվիչի սիմվոլների քանակը(դրական թիվ), իսկ երկրորդը՝որևէ սիմվոլ, սովորաբար՝ « 0 »:

Հակիրճ տվյալներ՝

Նախասահմանված արժեքը0 “”
Հարակից կանոն@counter-style
				
					  @counter-style numeric-padded {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    pad: 3 "0";
  }
  ol {
    list-style-type: numeric-padded;
  }

fallback

fallback: -սահմանում է ցուցակի հաշվիչի ոճի պահեստային տարբերակը, երբ ընթացիկ ոճը չպատկերվի։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըdecimal
Հարակից կանոն@counter-style

Որպես արժեք ընդունում է list-style-type-ի ցանկացած տարբերակը։

				
					  @counter-style alpha-fallback {
    system: fixed;
    symbols: "24B6" "24B7" "24B8" "24B9" "24BA" "24BB";
    suffix: " ";
    fallback: upper-alpha;
  }
  ol {
    list-style-type: alpha-fallback;
  }

symbols

symbols: –սահմանում է ցուցակի հաշվիչի սիմվոլները։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըԱմբողջական թվեր
Հարակից կանոն@counter-style

Արժեքը կարող է լինել որևէ սիմվոլ, բառ կամ նկար։

				
					  @counter-style symbol-example {
    system: cyclic;
    symbols: "1F34E" "1F34F";
    suffix: " ";
  }
  ol {
    list-style-type: symbol-example;
  }

speak-as

speak-as: – սահմանում է` ինչպես լսելի ձայնով կարդացող բրաուզերի ծրագիրը արտասանի նշված սիմվոլները։

Օրինակ կարող է արտասանել ցուցակի հաշվիչի թվերը, կամ թվերի փոխարեն սիմվոլները ներկայացնել որևէ ձայնային սիգնալով։ Աջակցվում է միայն Firefox բրաուզերի կողմից։

Հակիրճ տվյալներ՝

Նախասահմանված արժեքըauto
Հարակից կանոն@counter-style

Արժեքներն են՝

bullets –որևէ արտահայտություն կամ ձայնային սիգնալ, որը կսահմանի օգտագործվող բրաուզերը։

numbers – կկարդա հաշվիչի թվային արժեքը։

words – կարտասանի հաշվիչի թվային արժեքը վեբ էջի լեզվին համապատասխան։

spell-out –կարտասանի հաշվիչի թվային արժեքը տառետառ՝ վեբ էջի լեզվին համապատասխան։

auto – եթե system-ը հավասար է alphabetic-ի, ապա speak-as-ը հավասար կլինի spell-out-ի։Եթե system-ը հավասար է cyclic-ի, ապա speak-as-ը հավասար կլինի bullets-ի։ Մնացած դեպքերում speak-as-ը հավասար է numbers-ի։

@property

@property – սահմանում է փոփոխական։

Փոփոխականի սահմանման այլ տարբերակ, որտեղ՝

–colorBlue: -փոփոխականի անվանումն է, իսկ ՛#0026ff՛ դրա արժեքը։ 

var(–colorBlue) – փոփոխականը՝ որպեսզ background-color-ի արժեք։

				
					  div {
    --colorBlue: #0026ff;
    background-color: var(--colorBlue);
  }

@property կանոնի միջոցով նույնպես փոփոխական կսահմանվի, բայց դեսկրիպտորների միջոցով կնշվի փոփոխականի համար լրացուցիչ տվյալներ՝

				
					  @property --elementWidth {
    syntax: "<percentage>"; /* սահմանում է արժեքի տեսակը․ տվյալ 
                          դեպքում՝ % ։ */
    initial-value: 50%; /* փոփոխականի կանխադրված արժեքը։ */
    inherits: false; /* ժառանգելու՞է արդյոք ծնող էլեմենտի տվյալ 
                    հատկության արժեքը․ false` ոչ(կամ՝ true- այո)։ */
  }
  .div01 {
    width: 1200px;
  }
  .div02 {
    width: --elementWidth; /* եթե չի ժառանգելու, ապա 50% -ը կվերաբերի բրաուզերի պատուհանի տեսադաշտին։ */
  }
				
			
				
					<body>
  <div class="div01">
    <div class="div02"></div>
  </div>
</body>

@layer

@layer – Գիտենք, որ !important հատուկ բառի միջոցով սահմանվում է արժեքի գերադասությունը(Տես՝ ՛Սելեկտորների առաջնահերթությունը և կասկադայնությունը՛ բաժնի ՛Սելեկտորների առաջնահերթությունը՛ մասում)։

Հետևյալ օրինակում  blue -ն գերադաս կլինի red -ից՝

				
					div {
  color: red;
}
				
			
				
					<body>
  <div style="color: blue;">Hello world!</div>
</body>

Իսկ այստեղ red -ը՝  blue -ից, որովհետեև սահմանվել է  !important –ը՝

				
					div {
  color: red !important;
}
				
			
				
					<body>
  <div style="color: blue;"></div>
</body>

@layer կանոնը նույնպես նախատեսված է ոճի գերադասությունը սահմանելու համար։

@layer-ի միջոցով սահմանվում է ցանկացած քանակի « ոճային շերտեր » և ամեն շերտին՝ Css հատկություններ։

@layer-ում այն շերտը, որը սահմանված է ամենավերջում, կլինի բոլորից գերադասը։

Չշերտավորված ոճը(այն, որի համար սահմանված չէ @layer կանոնը) շերտավորված բոլոր ոճերից ավելի գերադաս է։

 

Հետևյալ օրինակում չշերտավորված ոճը ամենագերաադասն է՝ չնայած նրա, որ շերտավորված ոճում սելեկտորը սահմանված է իդենտիֆիկատորի մակարդակով(#a01): Այսպիսով հղումը կլինի կանաչ։

				
					  @layer defaults, utilities; /* սահմանված է երկու շերտային ոճ */

  @layer utilities {
    /* գերադաս է մնացած շերտերից, քանի որ վերջում է։ */
    #a01 {
      color: red;
    }
  }
  @layer defaults {
    /* ունի ամենաթույլ գերադասությունը */
    a {
      color: blue;
    }
  }

  a {
    /* չշերտավորված ոճ է և ամենագերադասն է։ */
    color: green;
  }
				
			
				
					<a id="a01" href="some-url">some url</a>

Եթե տարբեր շերտային ոճերում նույն հատկության համար սահմանված է !important-ը, ապա գերադաս կլինի նրանը, որը @layer-ում սահմանված է առաջինը։

Հետևյալ ոճում defaults -ը ամենագերադասն է՝ չնայած սահմանված է ամենասկզբում։ Այսպիսով հղումը կլինի կարմիր։

				
					 @layer defaults, components, utilities;
  @layer defaults {
    a {
      color: red !important;
    }
  }

  @layer utilities {
    #a01 {
      color: blue !important;
    }
  }
  @layer components {
    a {
      color: green;
    }
  }

  #a01 {
    color: yellow;
  }

Շերտային ոճը նույն անունով կարելի է սահմանել մի քանի անգամ։ Այստեղ չշերտավորվածն ամենագերադասն է․ դրանից հետո հերթականությունը սկսում է վերջից՝ layer-3, layer-2, layer-1 .

				
					  @layer layer-1 {
    a {
      color: red;
    }
  }
  @layer layer-2 {
    a {
      color: orange;
    }
  }
  @layer layer-3 {
    a {
      color: yellow;
    }
  }
  a {
    color: green;
  }

Հետևյալ օրինակում օգտագործել ենք !important-ը և layer-1-ը դարձել է ամենագերադասը, քանի որ ամենասկզբում է․ հերթականությունն այսպիսին է՝layer-1, layer-2, layer-3,  a :

				
					  @layer layer-1 {
    a {
      color: red !important;
    }
  }
  @layer layer-2 {
    a {
      color: orange !important;
    }
  }
  @layer layer-3 {
    a {
      color: yellow !important;
    }
  }
  a {
    color: green !important;
  }

Համարակալված շերտային ոճերը կարելի է նաև խմբավորել։
Հետևյալ օրինակում գերադասության հերթականությունն այսպիսին է՝
a,
layer-3 – a,
layer-3 – sub-layer-2,
layer-3 – sub-layer-1,
layer-2,
layer-1:

 
				
					  @layer layer-1 {
    a {
      color: red;
    }
  }
  @layer layer-2 {
    a {
      color: orange;
    }
  }
  @layer layer-3 {
    @layer sub-layer-1 {
      a {
        color: yellow;
      }
    }
    @layer sub-layer-2 {
      a {
        color: green;
      }
    }
    a {
      color: blue;
    }
  }
  a {
    color: indigo;
  }

Շերտային ոճերը նույնպես կարելի է խմբավորել։ Կարող ենք խմբավորել երկու կերպ՝

				
					  @layer one {
    @layer two, three;
    @layer three {
      /* styles ... */
    }
    @layer two {
      /* styles ... */
    }
  }

Կամ օգտագործել այս տարբերակը՝

				
					  @layer one.two, one.three;
  @layer one.three {
    /* ... */
  }
  @layer one.two {
    /* ... */
  }

Հետևյալ օրինակում հերթականությունն այսպիսիսն է՝
Verona,
Capulets.Tybalt,
Capulets.Juliet,
Montagues.Benvolio,
Montagues.Romeo:

				
					  @layer Montagues, Capulets, Verona;
  @layer Montagues.Romeo {
    a {
      color: red;
    }
  }
  @layer Montagues.Benvolio {
    a {
      color: orange;
    }
  }
  @layer Capulets.Juliet {
    a {
      color: yellow;
    }
  }
  @layer Verona {
    a {
      color: blue;
    }
  }
  @layer Capulets.Tybalt {
    a {
      color: green;
    }
  }

Հետևյալ օրինակում գերադասը առաջինն է։ Խմբավորման մեջ շերտային ոճը որքան խորն է, այնքան քիչ գերադաս է․

				
					  @layer defaults {
    a {
      color: red;
    }
    @layer reset {
      a {
        color: blue;
      }
    }
  }

Խմբավորված շերտային ոճերը @layer-ի մեջ կարող ենք նշել խառը հերթականությամբ և չկորցնել յուրաքանչյուր խմբի գերադասությունը։ Հետևյալ օրինակում հերթականությունն այսպիսին է՝
default.media,
default.type,
reset.media,
reset.type։

				
					@layer reset.type, default.type, reset.media, default.media;

Հետևյալ օրինակում շերտավորված ոճերից մեկին(utilities) սահմանել ենք @import-ի միջոցով ներմուծվող ամբողջական Css ոճ(example.css ֆայլի css հատկությունները)։

				
					  @layer default, components, utilities;
  @import url("example.css") layer(utilities);

Շերտային ոճը կարող է նաև անանուն լինել․ այն չի ունենա գերադասություն և կակտիվանա գերադաս շերտային ոճի հետ միասին։

				
					  @layer layer-1 {
    a {
      color: red;
    }
  }
  @layer {
    a {
      font-size: 40px;
    }
  }
  @layer layer-2 {
    a {
      color: orange;
    }
  }
  @layer layer-3 {
    a {
      color: blue;
    }
  }

revert-layer – ի միջոցով չեղարկում ենք տվյալ շերտային ոճի revert-layer արժեքով հատկությունը։
Հետևյալ օրինակում .no-theme-ի միջոցով չեղարկվում է theme շերտային ոճի բոլոր color հատկությունները։ Արդյունքում կատիվանա default-ի color հատկությունը։

				
					  @layer default {
    a {
      color: red;
    }
  }
  @layer theme {
    a {
      color: blue;
    }
    .no-theme {
      color: revert-layer;
    }
  }

@namespace

@namespace –  SVG ֆորմատի նկարը չի սահմանվում html-ի էլեմենտներով, այն XML տեսակի է, չնայած կարող է ունենալ html տեսակից <a> էլեմենտ։ Եթե նույն html փաստաթղթում <a> էլեմենտը սահմանվի թե SVG-ի և թե html-ի համար, ապա ոճ սահմանելիս անհրաժեշտ է տեղեկացնել բրաուզերին, թե այն որ տեսակի համար է նախատեսված։

Խնդիրը լուծվում է ՛ անվանատարածքներ(пространства имен) ՛  -ի միջոցով, որը առանձնացնում է SVG էլեմենտները html էլեմենտներից։

				
					  @namespace svg-nkar "http://www.w3.org/2000/svg";
  svg-nkar|a {
    color: red;
  }
  a {
    color: green;
  }

@namespace  – սահմանում է անվանատարածք։

svg-nkar– տվյալ անվատարածքին սահմանվել է « svg-nkar » պրեֆիքսը ։

“http://www.w3.org/2000/svg”- անվանատարածքի տեսակն է՝  @namespace -ը՝ այս դեպքում svg-nkar-ը, պատկանում է …/svg – ի անվանատարածքին։

 svg-nkar | a – « | » սիմվոլի միջոցով սահմանվում է՝ տվյալ a էլեմենտի ոճը պատկանում է « svg-nkar » անվանատարածքի <a> էլեմենտին։ Մյուս a -ի ոճը կպատկանի html-ի <a> էլեմենտին։

CSS -Ի ԸՆԴՀԱՆՈՒՐ ԿԱՌՈՒՑՎԱԾՔԸ - Նախորդ Պսևդոկլասներ և պսևդոէլեմենտներ Հաջորդը - CSS -Ի ԸՆԴՀԱՆՈՒՐ ԿԱՌՈՒՑՎԱԾՔԸ @media

Նմանատիպ հոդվածներ

Թողնել մեկնաբանություն

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ

Powered By hayti

hyArmenian
ru_RURussian hyArmenian