Cascading Style Sheet (CSS) - ը վեբ կայքերի կոդավորման համակարգ է, որը թույլ է տալիս դիզայներներին միանգամից շահարկել մի քանի գործառույթ ՝ խմբերին որոշակի տարրեր վերագրելով: Օրինակ ՝ վեբ կայքի ֆոնի համար ծածկագիր օգտագործելով ՝ դիզայներները կարող են փոխել ֆոնի գույնը կամ պատկերը վեբ կայքի բոլոր էջերում ՝ մեկ փոփոխությամբ CSS ֆայլում: Ահա թե ինչպես ստեղծել CSS հիմնական կայքի համար:
Քայլեր
Մաս 1 -ը 4 -ից. Ներգրավված CSS գրելը
Քայլ 1. Համոզվեք, որ ունեք HTML պիտակների հիմնական ըմբռնում:
Դուք պետք է իմանաք, թե ինչպես են աշխատում պիտակները և դրանցից
src
եւ
href
հատկանիշներ:
Քայլ 2. Իմացեք CSS- ի հիմնական հատկություններից մի քանիսը:
Դուք կգտնեք, որ շատ հատկություններ կան: Այնուամենայնիվ, անհրաժեշտ չէ սովորել դրանք բոլորը:
-
Որոշ լավ հիմնական CSS հատկություններ պետք է իմանալ
գույն
եւ
տառատեսակ-ընտանիք
- .
Քայլ 3. Իմացեք յուրաքանչյուր համապատասխան հատկության արժեքների մասին:
Բոլոր հատկությունները արժեք են պահանջում: Համար
գույն
սեփականությունը, օրինակ, կարող եք տեղադրել
կարմիր
արժեքը:
Քայլ 4. Իմացեք
ոճը
HTML հատկանիշ:
Այն օգտագործվում է նման տարրի մեջ
href
կամ
src
. Այն օգտագործելու համար հավասարության նշանից հետո չակերտների մեջ տեղադրեք CSS հատկանիշը, երկու կետ, այնուհետև հատկության արժեքը: Սա հայտնի է որպես CSS կանոն:
Քայլ 5. Հասկացեք, որ ներկառուցված CSS- ը սովորաբար չի օգտագործվում վեբ կայքերի համար `վեբ պրոֆեսիոնալ մշակողների կողմից:
Ներքին CSS- ն կարող է ավելորդ խառնաշփոթ ավելացնել HTML փաստաթղթին: Այնուամենայնիվ, դա հիանալի միջոց է ծանոթանալու CSS- ի աշխատանքին:
Մաս 2 -ից 4 -ից. Հիմնական CSS գրելը
Քայլ 1. Գործարկեք ծրագիրը, որը ցանկանում եք օգտագործել:
Այն պետք է թույլ տա ձեզ ստեղծել HTML և CSS ֆայլեր:
Եթե դուք չունեք տեղադրված հատուկ ծրագիր, կարող եք օգտագործել Notepad կամ այլ տեքստային խմբագիր: Պարզապես պահեք ձեր ֆայլը և՛ որպես տեքստային, և՛ որպես CSS ֆայլ:
Քայլ 2. Բացեք HTML ֆայլը ձեր վեբ կայքի համար:
Սա պետք է բացեք նաև HTML խմբագրիչով, եթե այն տեղադրված է:
HTML խմբագիրները թույլ են տալիս խմբագրել HTML և CSS միաժամանակ:
Քայլ 3. Ստեղծեք պիտակ ձեր HTML գլխում:
Սա թույլ կտա ձեզ գրել CSS ՝ առանց առանձին ֆայլի անհրաժեշտության:
Քայլ 4. Ընտրեք տարր, որին ցանկանում եք ավելացնել ոճավորումը և մուտքագրեք տարրի անունը, որին հաջորդում է գանգուր ամրացումների հավաքածու ({}):
Ձեր ծածկագիրը ավելի ընթեռնելի դարձնելու համար միշտ երկրորդ գանգուր ամրակը դրեք իր իսկ գծի վրա:
Քայլ 5. փակագծերի միջև մուտքագրեք ձեր CSS կանոնները այնպես, ինչպես դա կանեիք
ոճը
հատկանիշ.
Յուրաքանչյուր տող պետք է ավարտվի ստորակետով (;): Ձեր կոդը ընթեռնելի դարձնելու համար յուրաքանչյուր կանոն պետք է սկսվի իր տողից, և յուրաքանչյուր տող պետք է գծված լինի:
Շատ կարևոր է նշել, որ այս ոճավորումը կազդի էջի ընտրված տիպի բոլոր տարրերի վրա: Ավելի կոնկրետ ոճավորումը կլուսաբանվի հաջորդ բաժնում:
3 -րդ մաս 4 -ից. Ավելի առաջադեմ CSS
Քայլ 1. Ստեղծեք CSS ֆայլ, այլ ոչ թե HTML ֆայլ և պահպանեք այն օգտագործելով
.css
երկարացում:
Բացեք նաև ձեր HTML ֆայլը:
Քայլ 2. Ստեղծեք պիտակ ձեր HTML գլխում:
Սա թույլ կտա առանձին CSS ֆայլ կապել ձեր HTML փաստաթղթին: Ձեր հղման պիտակը պետք է ունենա երեք հատկանիշ.
ռել
տիպ
և
href
-
ռել
նշանակում է «հարաբերություն» և զննարկիչին պատմում է, թե ինչ հարաբերություններ ունի HTML փաստաթուղթը: Այստեղ այն պետք է ունենա արժեք
"ոճաթերթ"
- .
-
տիպ
պատմում է, թե ինչ տեսակի լրատվամիջոցների հետ է կապված: Այստեղ այն պետք է ունենա արժեք
"տեքստ/css"
-
href
- այստեղ օգտագործվում է նույն կերպ, թե ինչպես է այն օգտագործվում տարրում, բայց այստեղ այն պետք է կապվի CSS ֆայլին: Եթե CSS ֆայլը գտնվում է նույն ֆայլում, ինչ HTML ֆայլը, ապա միայն ֆայլի անունը պետք է գրել չակերտների մեջ:
Քայլ 3. Ընտրեք տարբեր տեսակի տարրեր, որոնց ցանկանում եք ավելացնել նույն ոճավորումը:
Ավելացնել ա
դասարան
վերագրել այս տարրերին և դրանք հավասար դնել ձեր ընտրած դասի անվան վրա: Սա ձեր տարրերին կտա նույն ոճը:
Քայլ 4. Հանձնարարեք, թե ինչ ոճավորում կստանա դասարանը:
Մուտքագրեք դասի անունը ձեր CSS ֆայլում դրան նախորդող ժամանակահատվածով (.)
.դասարան
).
Քայլ 5. Ընտրեք միայնակ տարրեր, որոնց վրա ցանկանում եք ավելացնել հատուկ ոճավորում և ավելացնել ան
id
հատկանիշ.
Id- երը ստեղծվում են CSS- ում ՝ օգտագործելով ֆունտի խորհրդանիշ (#) և ոչ թե կետ:
Id- ն ավելի կոնկրետ է, քան դասերը, ուստի id- ն կանցնի ցանկացած դասի ոճավորում, եթե այն ունի դասից տարբեր արժեք ունեցող հատկանիշ:
4 -րդ մաս 4 -ից ՝ ավելին իմանալ
Քայլ 1. Այցելեք w3 դպրոցներ:
Այն պաշտոնական կայք է, որն ուղղված է վեբ զարգացման հմտությունների ուսուցմանը: W3- ն ունի բազմաթիվ հղումներ, որոնք թվարկված են HTML- ի և CSS- ի, ինչպես նաև վեբ այլ լեզուների համար:
Քայլ 2. Գտեք այլ կայքեր, որոնք հատուկ ուղղված են սովորելու և ուսուցանելու HTML և CSS:
CSS- ի նման կայքերը, ինչպիսիք են tricks.com- ը, ուղղված են CSS- ի և վեբ ձևավորման հմտությունների ուսուցմանը: Հեղինակավոր աղբյուրներ գտնելը կօգնի ձեզ ուսման ճանապարհին:
Քայլ 3. Կապվեք վեբ դիզայներների և մշակողների հետ:
Նրանց փորձը և գիտելիքները կարող են ձեզ սովորեցնել արժեքավոր գիտելիքներ և հմտություններ:
Քայլ 4. Դիտեք ձեր հանդիպած կայքերի աղբյուրի կոդը:
Wellարգացած կայքերի CSS- ի դիտումը կարող է ձեզ ցույց տալ կայքերի մասերի նախագծման ուղիներ: Որպես պրակտիկա այն պատճենելը և կոդի հետ շփոթելը կարող է օգնել ձեզ սովորել, թե ինչպես օգտագործել տարբեր CSS հատկանիշներ:
