Դաս 1։ Ի՞նչ է CSS-ը

0

Հնարավոր է՝ Դուք արդեն լսել եք CSS-ի  մասին  առանց  իմանալու  անգամ,  թե  ինչ  է  դա։  Այս  դասի միջոցով  Դուք կիմանաք՝ ինչ է CSS-ը  և ինչ հնարավորություններ է ընձեռնում Ձեզ։

CSS հապավումը բացվում է որպես Cascading Style Sheets։

Ի՞նչ կարող եք անել CSS-ով

CSS-ը արտաքին ոճը (style) սահմանող լեզու է, որով ստեղծվում են HTML document-ների layout-ը։ Օրինակ՝ CSS-ը ընգրկում է տառատեսակներ, գույներ, ֆոնային նկարներ,  էջի  սահմաններ,  բարձրություն,  լայնություն և այլն։

Ընդամենը մի քանի դաս անցնելուց հետո Դուք կկարողանաք ստեղծել Ձեր ոճ-երը (style)՝ օգտագործելով CSS։ CSS-ով հնարավոր է աշխատել ցանկացած browser-ի դեպքում։

Որո՞նք են CSS-ի և HTML-ի տարբերությունները

HTML-ն օգտագործվում է բովանդակությունը  գրելու համար։ CSS-ն  օգտագործվում  է  պատրաստի բովանդակությունը ֆորմատ անելու համար։

Միգուցե  մի քիչ բարդ և տեխնիկական է հնչում, սակայն  շարունակե՛ք կարդալ և ամեն ինչ ավելի հասկանալի կդառնա:

Այն ժամանակներում, երբ Թիմ Բեռնես Լին նոր էր ստեղծել համաշխարհային ցանցը, HTML լեզուն օգտագործվում էր միայն տեքստին կառուցվածք հաղորդելու համար: Հեղինակը կարող էր խմբագրել իր տեքստը ինչպես օրինակ նշելով՝ <սա վերնագիր է>, <սա պարբերություն է>՝ օգտագործելով HTML tag-եր՝ <h1> կամ <p> և այլն:

Երբ Web-ը լայն տարածում ստացավ, դիզայներները սկսեցին ճանապարհներ փնտրել օնլայն document-ներին layout հաղորդելու համար: Այդ նպատակով browser արտադրողները (այդ ժամանակ դրանք Netscape-ն ու Microsoft-ն էին) ստեղծեցին նոր HTML tag-եր, ինչպես օրինակ՝<font>, որը տարբերվում էր օրիգինալ HTML tag-երից նրանով, որ ստեղծում էր layout-ը այլ ոչ կառուցվածքը:

Ինչպե՞ս է աշխատում CSS-ը:

CSS-ում կիրառվող շատ propertie-ներ, նման են HTML-ում կիրառվողներին: Այսպիսով, եթե Դուք ունեցել եք HTML-ով աշխատելու փորձ, ապա շատ կոդեր Ձեզ ծանոթ կթվան: Եկե՛ք անցնենք կոնկրետ օրինակի՝

CSS-ի հիմնական syntax

Օրինակի համար մենք ուզում ենք գեղեցիկ կարմիր գույն որպես ֆոն webpage-ի համար:

Օգտագործելով HTML՝ մենք կարող էին անել հետևյալը՝

        <body bgcolor=”#FF0000″>

CSSի դեպքում նույնը պիտի անենք այսպես՝

      body {

                backgroundcolor: #FF0000;

}

Ինչպես կարող եք նկատել կոդերը իրար բավականին նման են: Վերևում պատկերված օրինակը ցույց է տալիս նաև CSS-ի հիմնական (fundamental) մոդելը:

1

Սակայն որտե՞ղ է պետք տեղադրել CSS կոդը: Այս հարցին մենք պիտի անդրադառնանք այժմ:

Կցել CSS-ը HTML document-ին

Կա երեք ճանապարհ CSS-ը  HTML document-ին կցելու համար: Դրանք ներկայացված են ստորև: Մենք խրախուսում ենք Ձեզ կենտրոնանալ դրանցից 3-րդի՝ այսինքն external-ի վրա:

Մեթոդ 1: In-line (attribute style)

CSS-ը HTML-ին կցելու անելու համար մեկ մեկ մեթոդ է օգտագործել HTML attribute style-ը: Վերցնելով արդեն նշված կարմիր background-ի օրինակը՝ դա կլինի հետևյալ կերպ՝

        <html>

          <head>

               <title>Example</title>

          </head>

          <body style=”background-color: #FF0000;”>

               <p>This is a red page</p>

          </body>

        </html>

Մեթոդ 2: Internal (tag style)

Մեկ այլ տարբերակ է կցել CSS կոդերը օգտագործելով HTML tag <style>: Օրինակ այսպես՝

        <html>

          <head>

               <title>Example</title>

               <style type=”text/css”>

                 body {background-color: #FF0000;}

               </style>

          </head>

          <body>

               <p>This is a red page</p>

          </body>

        </html>

Մեթոդ 3: External (link to a style sheet)

Մեր երաշխավորված տարբերակը այսպես կոչված link to external style sheet-ն է: Այս դասընթացների ընթացում բոլոր օրինակները հենց  այս մեթոդով են ներկայացված լինելու:

external style sheet-ը ընդամենը text file է  .css extension-ով: Ինչպես ցանկացած այլ ֆայլ, Դուք կարող եք այն տեղադրել Ձեր վեբ սերվերում կամ hard disk-ի վրա:

Օրինակի համար՝ մեր style sheet-ի անվանումն է style.css և այն տեղակայված է style անվանումով folder-ում: Ահա ասվածի իլյուստրացիան՝

figure002

Հնարքը HTML document-ից (default.htm) style sheet (style.css) link ստեղծելն է:

        <link rel=”stylesheet” type=”text/css” href=”style/style.css” />

Ուշադրություն դարձրե՛ք, թե ինչպես է style sheet-ի patհ-ը նշված attribute href-ի միջոցով:

Կոդի տողը պետք է տեղադրվի HTML կոդի header section-ում, այսինքն <head>  և </head> tag-երի միջև: Ահա այսպես՝

        <html>

          <head>

               <title>My document</title>

               <link rel=”stylesheet” type=”text/css” href=”style/style.css” />

          </head>

          <body>

          …

Այս լինքը հաղորդում է browser-ին, որ այն պետք է օգտագործի  CSS-ի layout-ը HTML ֆայլ ցուցադրելիս: Մի քանի HTML document-ներ կարող են link ունենալ նույն style sheet-ի հետ: Այլ կերպ ասած՝ մեկ CSS ֆայլը կարող է օգտագործվել մի քանի HTML document-ների layout-ներ կառավարելու համար:

figure003

Այս տեխնիկան կօգնի Ձեզ խնայել ժամանակ: Եթե օրինակ Դուք ցանկանում եք փոխել միանգամից 100 վեբ էջերի background գույն,  ապա style sheet-ը Ձեզ հետ կպահի 100 HTML document-ների համար դա մեկ առ մեկ անելու անհրաժեշտությունից: CSS-ի շնորհիվ դա կարելի է անել մի քանի վայրկյանների ընթացքում  պարզապես փոխելով կոդը  հիմնական style sheet-ում:

Եկե՛ք փորձենք կիրառել այն, ինչ սովորել ենք:

Փորձի՛ր ինքդ

Բացե՛ք Notepad++ կամ ցանկացած editor, որն օգտագործում եք և ստեղծե՛ք երկու ֆայլեր HTML և CSS  հետևյալ բովանդակությամբ՝

default.htm

        <html>

          <head>

               <title>My document</title>

               <link rel=”stylesheet” type=”text/css” href=”style.css” />

          </head>

          <body>

               <h1>My first stylesheet</h1>

          </body>

        </html>

style.css

        body {

          background-color: #FF0000;

        }

Այժմ տեղադրե՛ք երկու կոդերը նույն folder-ում: Հիշե՛ք պահպանել ֆայլերը ճիշտ extension-ներով (համապատասխանաբար “.htm” և “.css”):

Բացե՛ք default.htm-ը Ձեր browser-ով և տեսե՛ք կարմիր background-ը: Շնորհավորում ենք: Դուք պատրաստեցիք Ձեր առաջին style sheet-ը:

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.