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

Վիքիպեդիայից՝ ազատ հանրագիտարանից
CSS
CSS-shade.svg

Ընդլայնում .css
MIME text/css
Մշակող Համացանցի կոնսորցիում
Հրատարակված է դեկտեմբերի 17, 1996
Ֆորմատի տեսակ ոճային լեզու և ֆայլի ֆորմատ
Կայք w3.org/Style/CSS
Cascading Style Sheets Վիքիպահեստում

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

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

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-ը որոշում է առաջնայությունները, հետևյալ հերթականությամբ՝

  1. Հատկանիշը նշված է @important-ի օգնությամբ,
<!DOCTYPE html>
<html>
   <head>
      .....
      <style media="all">
         @import url(style.css);
      </style>
   </head>
</html>
  1. Ոճը նշված է հենց տեգում (inline),
  2. Նույնացուցիչների քանակը(#id) նշիչում,
  3. Կարգերի (.class) և նախա կարգերի(։pseudoclass) քանակը նշիչում,
  4. Նշիչում տեգերի անունների քանակը։

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

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;
        }</code>

Այստեղ բերված է 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>
Կաղապար:BookCat

Ժառանգությունը: Կասկադայնությունը: 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;
     }:

Կարդացվում է այսպես. գունային փոփոխությունը վերաբերվում է li:nks ունիկալ արժեք ունեցող այն a հղումներին, որոնք գտնվում են p թեգի մեջ: Կա նաև հղումների կեղծ սելեքթոր, որը հիմնականում վերաբերվում է հղումներին: Դրանք այն հատկություններով են պայմանավորված, թե ինչ գույն կստանա հղումը նախքան կլիկ անելը, մկնիկի սլաքը նրա վրա պահելուց հետո, ընտրված, բայց դեռ չգործարկված հղումը և արդեն բացված կամ գործարկված հղումը: Նախնական տեսք ապահովում է գրառման հետևյալ օրինակը`

     a:link{
     color:#F124cs;
    }

Մեկ անգամ կիրառելուց հետո այն իր նախնական գույնը փոխում է: Իսկ եթե կիրառենք hover տարբերակը, այսինքն այն կարգավիճակն է, երբ մկնիկի սլաքը պահում ենք վրան, գույնը փոխում է, ապա այս հատկությունը կվերաբերվի միայն a-ի նշված տարբերակներին: Եթե նշենք active տարբերակը, ապա մկնիկի ցուցիչը վրան պահելիս, գույնը փոխում է, 1 կլիկի ժամանակ, դեռ սեղմակը չթողած` գույնը փոխվում է:

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

Հետևյալ օրինակով նշված կոդը կամ կարող է հանդես գալ առանձին ֆայլի տեսքով, .css ընդլայնումով, կամ <style> թեգի միջոցով կարող է գրվել HTML ծրագրի «գլխամասային» կոդում`

p {
   font-family: arial, helvetica, sans-serif; 
}
h2 {
   font-size: 20pt; 
   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"] սելեքթորների կիրառմամբ:

  1. Առաջին կանոնը վերաբերվում է HTML-էլեմենտի կոդին` p (պարբերությանը) — նշված է ոճ. պարբերությունները ներկայացվում են Arial տառատեսակով, սակայն եթե բրաուզերն այն չի գտնում, ապա կիրառում է Helvetica կամ Sans-serif, հակառակ դեպքում այդ ընտանիքի որևէ տեսակ (լռելայն):
  2. Երկրորդ կանոնը վերաբերվում է h2 (երկրորդ մակարդակի վերնագրին). Երկրորդ մակարդակի վերնագիրը կարտածվի սպիտակ ֆոնի վրա գրված կարմիր տառերով, "Կեգլ" մեծացված չափսերով.
  3. Երրոևդ կանոնը վերաբերվում է ցանկացած տարրի, ատրիբուտ class որը կլինի հավասար «note». Օրինակ, պարբերության: <p class="note">Այս կանոնը կարտածվի կիսաթավ շրիֆտով, դեղին ֆոնի վրա կարմիր գույնով. </p>
  4. Չորրորդ կանոնը վերաբերվում է միայն այն էլեմենտնարին, որոնք p, ատրիբուտը id որը հավասար է paragraph1: Այդպիսի տարրը կունենա ներքին բացատ 10 պիքսելներով (padding).
  5. Հինգերորդ կանոնը վերաբերվում է hover տարրերինa — հիպերհղում. Լռելայն,բրաուզերների մեծամասնությունը տեստի տարրերն արտածում են ընդգծված a Ընդգծվում է. Գրառման այս տեսակի համաձայն` ընդգծումն անհետանում է, երբ մկնիկի ցուցիչը պահում ենք վրան:
  6. Վեցերորդ կանոնը վերաբերվում է այն էլեմենտներին,p, որոնք գտնվում ենвнутри ինչ-որ տարրի մեջ,որի տարրի ատրիբուտը id, հավասար է «news» (#news p — ստա չառանգների սելեկտորի տիպիկ օրինակն է, տես. վերևից հինգերորդ կետ).
  7. Յոթերորդ կանոնը վերաբերվում է typeհավասար button. Օրինակ, այս գրառման համաձայն, տարրը ակտիվացնելիս ֆոնի գույնը կդառնա կանաչ:<input type="button"> (սովորական սեղմակ):