Կայքի տեսողական ոճը եւ դասավորությունը թելադրված են CSS- ով կամ Cascading Style Sheets- ով: Սրանք փաստաթղթեր են, որոնք ձեւավորում են վեբ-ի HTML ձեւաչափը, ապահովելով վեբ բրաուզերների հրահանգները, թե ինչպես ցուցադրել այդ էջանիշից առաջացող էջերը: CSS- ն օգտագործում է էջի դասավորությունը, ինչպես նաեւ գույնը, ֆոնային նկարները, տիպաբանությունը եւ այլն:
Եթե դուք նայեք CSS ֆայլին, ապա կտեսնեք, որ ցանկացած ձեւագրման կամ կոդավորման լեզու նման, այդ ֆայլերը ունեն հատուկ տեքստ: Յուրաքանչյուր ոճաթերթը կազմված է CSS կանոնների մի շարքից: Այս կանոնները, որոնք ամբողջությամբ վերցված են, ինչն է ոգեշնչում կայքը:
CSS կանոնների մասերը
CSS կանոնը բաղկացած է երկու մասից `ընտրողից եւ հայտարարությունից: Ընտրողը որոշում է, թե ինչ է ձեւավորվում էջում, եւ հռչակագիրը այն է, թե ինչպես պետք է հագնվել: Օրինակ:
p {
գույնը `# 000;
}
Սա CSS կանոնն է: Ընտրիչ մասը «p» է, որը «պարբերությունների» համար տարր ընտրող է: Այսպիսով, ընտրեք ALL- ի պարբերությունները կայքէջում եւ դրանք տրամադրեք այս ոճով (եթե առկա են պարբերություն, որոնք ուղղված են ձեր CSS փաստաթղթում այլ բնորոշ ոճերի հետ):
Կանոնի մի մասը, որը ասում է, «գույնը` # 000 »; այն, ինչ հայտնի է որպես հռչակագիր: Այդ հայտարարությունը բաղկացած է երկու կտորից `գույքը եւ արժեքը:
Գույքը այս հայտարարության «գունավոր» կտորն է: Այն թելադրում է, թե ընտրողի ինչ կողմն է փոխվելու տեսողական:
Արժեքը այն է, ինչ ընտրված CSS հատկությունը կփոխվի: Մեր օրինակում մենք օգտագործում ենք # 000-ի hex արժեքը, որը CSS- ի համար նախատեսված է «սեւ» համար:
Այսպիսով, օգտագործելով այս CSS կանոնը, մեր էջը կունենա պարբերություն սեւերի տառատեսակի գույնի մեջ:
CSS- ի գույքային հիմունքներ
Երբ դուք գրեք CSS- ի հատկությունները, դուք չեք կարող պարզապես կատարել դրանք, ինչպես տեսնում եք տեղավորել: Օրինակների համար «գույնը» փաստացի CSS հատկություն է, այնպես որ կարող եք օգտագործել այն: Այս հատկությունը այն է, ինչ որոշում է տարրերի տեքստի գույնը: Եթե փորձել եք օգտագործել «տեքստային գույն» կամ «տառատեսակի գույն» որպես CSS- ի հատկություններ, դրանք կխախտվեն, քանի որ դրանք CSS- ի լեզուի իրական մասեր չեն:
Մեկ այլ օրինակը «ֆոնի-պատկեր» գույքն է: Այս հատկությունը սահմանում է պատկեր, որը կարող է օգտագործվել ֆոնային համար, ինչպես այսպես.
.logo {
background-image: url (/images/company-logo.png);
}
Եթե դուք փորձել եք օգտագործել «ֆոնային նկար» կամ «ֆոնային գրաֆիկական», որպես սեփականության, ապա դրանք կարող են ձախողվել, քանի որ դրանք նորից CSS- ի հատկություններ չեն:
Որոշ CSS հատկություններ
Կան CSS- ի մի շարք հատկություններ, որոնք կարող եք օգտագործել ոճը կայքի համար: Որոշ օրինակներ են.
- Սահման (ներառյալ սահմանի ոճը, սահմանի գույնը եւ սահմանի լայնությունը)
- Padding- ը (ներառյալ լիցքաթափող, լցված-աջ, լիցքաթափված ներքեւ եւ լիցքաթափ ձախ)
- Մարիններ (ներառյալ մարժա-վերին, margin-right, margin-bottom, եւ margin-left)
- Տառատեսակ ընտանիք
- Տառաչափը
- Ֆոնի գույնը
- Լայնությունը
- Բարձրությունը
CSS- ի այս հատկությունները մեծ են, օրինակ, օրինակ, քանի որ բոլորը շատ պարզ են եւ նույնիսկ եթե դուք չգիտեք CSS, կարող եք հավանաբար գուշակել այն, ինչ անում են իրենց անուններով:
Կա նաեւ CSS հատկություններ, որոնք կհանդիպեն նաեւ, որոնք չեն կարող ակնհայտ լինել, թե ինչպես են նրանք աշխատում իրենց անուններով:
- Ֆլոաթ
- Մաքրել
- Overflow
- Տեքստ փոխակերպում
- Z- ինդեքս
Երբ դուք ավելի խորանում եք վեբ դիզայնի մեջ, դուք կգտնեք (եւ օգտագործում) այս բոլոր հատկությունները եւ ավելին:
Անհրաժեշտ արժեքներ
Ամեն անգամ, երբ դուք օգտագործում եք գույք, դուք պետք է այն նվիրեք արժեքին, եւ որոշ հատկություններ կարող են ընդունել միայն որոշակի արժեքներ:
«Գույն» գույքի մեր առաջին օրինակում մենք պետք է օգտագործենք գունային արժեք: Սա կարող է լինել hex արժեք , RGBA արժեք կամ նույնիսկ գունավոր բանալի բառեր : Այնուամենայնիվ, այդ արժեքներից որեւէ մեկը կաշխատի, եթե օգտագործեք «մռայլ» բառը այս գույքի հետ, դա ոչինչ չի անի, քանի որ որպես այդպիսին կարող են լինել նկարագրական, դա CSS- ում ճանաչված արժեք չէ:
Մեր երկրորդ օրինակն է, «ֆոնի-պատկեր», պահանջում է պատկերային ուղի օգտագործումը ձեր կայքի ֆայլերից փաստացի պատկեր ստանալու համար: Սա արժեք է / սինթետիկա, որը պահանջվում է:
CSS- ի բոլոր հատկությունները ունեն արժեքներ, որոնք ակնկալում են: Օրինակ:
- Սահմանի գույնը ակնկալում է գունային արժեք
- Սահմանի չափը ակնկալում է չափի արժեք, պիքսել կամ տոկոսներ
- Սահմանային ոճերը ակնկալում են այս գույքի համար օգտագործված բացառված ոճերից մեկը, ինչպես «պինդ»,
Եթե դուք գնում եք CSS- ի հատկությունների ցուցակի միջոցով, դուք կհայտնաբերեք, որ նրանցից յուրաքանչյուրն ունի կոնկրետ արժեքներ, որոնք կօգտագործեն ստեղծելու ոճերի ստեղծման համար:
Խմբագրված է Ջերեմի Գիրարդը