CSS վերևից ներքև `ներառյալ CSS3

Բացահայտում. Ձեր աջակցությունն օգնում է կայքը պահպանել: Այս էջում առաջարկվող որոշ ծառայությունների համար մենք վաստակում ենք ուղեգրման վճար.


Cascading Style Sheets- ը կամ CSS- ը այն լեզուն է, որը դարձնում է համացանցը գեղեցիկ: HTML- ի և JavaScript- ի հետ մեկտեղ, այն տեխնոլոգիաներից մեկն է, որը պետք է յուրացնի յուրաքանչյուր առջևի վերջավոր մշակողը.

Չնայած համացանցը լի է ռեսուրսներով ՝ CSS սովորելու համար, եթե սկսնակ եք, գուցե դժվար ժամանակ ունենաք մեծ ռեսուրսներ առանձնացնելուց, պարզապես լավ է.

Այս ռեսուրսային ուղեցույցում մենք տալիս ենք հիմնական ներածություն այն մասին, թե որն է CSS- ն, ինչն է այն ի վիճակի, ինչպես նաև վերջին տարբերակում ընդգրկված առանձնահատկությունները. CSS3.

Սկսել CSS- ով

Եթե ​​պատրաստ եք ցատկել, ահա թե ինչ է ընդգրկում այս ուղեցույցը.

  • Ներածություն CSS- ին. եթե դուք նոր եք CSS- ին, ապա սա սկիզբն է: Այս բաժնում ներկայացված է CSS- ի հիմնական ակնարկը և ձեզ մատնանշում է այլ մեծ ռեսուրսներ.
  • Ինչ նոր է CSS3- ում. եթե ուզում եք ուսումնասիրել CSS3- ում լույս տեսած մոդուլները, այս թեմայի համար գլուխ բարձրացրեք, որտեղ դուք կսովորեք լրատվամիջոցների հարցումների, տուփի չափսերի, 3D վերափոխումների, անիմացիաների, սյունակների բազմակի դասավորությունների և այլնի մասին:.
  • Պատասխանատու կայքերի ստեղծում CSS- ի միջոցով. այսօր կայքերը պետք է գեղեցիկ մատուցեն ցանկացած չափսի սարքի վրա, և CSS- ը այն լեզուն է, որը դա դարձնում է.
  • Ինչպես կատարել լոգարիթմական դռների կոճակները. սկզբնական է jQuery- ն CSS- ի հետ համատեղելու համար `իսկապես սառը էֆեկտներ ստեղծելու համար.
  • Ամեն ինչ CSS գույների մասին. վեր կենալ և գնալ CSS գույներով: Այս բաժինը ներառում է հիանալի գունային հղում.
  • Գրելու արդյունավետ CSS.արագ էջեր բեռնելը ավելի կարևոր է, քան երբևէ: Սա ցույց կտա ձեզ, թե ինչպես գրել CSS, որը կարող է զգալիորեն կրճատել ձեր բեռի ժամանակը.
  • Վարպետ CSS առցանց. այդ ռեսուրսները հնարավորություն են տալիս CSS վարպետության ուղին: Եթե ​​նախընտրում եք սովորել սովորելով `կատարելով կրթության ոճը, ապա այս բաժինը ձեզ համար է.
  • CSS- ի զարմանալի աշխատանքներ. ոգեշնչում ես փնտրում: Այստեղ մենք հավաքեցինք համացանցում CSS- ի առավել զարմանալի որոշ ստեղծագործություններ.
  • CSS3- ի պաշտոնական խոսքը. այժմ, երբ դուք գիտեք CSS- ը և իմացաք, թե որ մոդուլները դուրս են եկել CSS3- ում, լավ գաղափար է ծանոթանալ W3C- ին, CSS- ի զարգացմանը խթանող կազմակերպությանը.
  • Առաջարկվող ընթերցում. եթե նախընտրում եք սովորել ebook- ի կամ թղթի օգնությամբ, ստուգեք առաջարկվող գրքերի մեր ցուցակը, որտեղ վստահ եք, որ կգտնեք վերնագիր, որը կասկածի տակ է դնում ձեր հետաքրքրությունը.

Ներածություն CSS- ին

Contents

Ներածություն CSS- ին

CSS կամ Cascading Style Sheets- ը այն լեզուն է, որն օգտագործվում է կայքի ոճը և տեսքը որոշելու համար.

Վեբ կայքի բովանդակությունը, ներառյալ վերնագրերը, կետերը և պատկերները, բեռնված են HTML փաստաթղթում պարունակվող ցուցումների համաձայն, և CSS- ը ձեր զննարկչին ասում է, թե ինչպես ներկայացնել յուրաքանչյուր տարր այդ HTML փաստաթղթում.

CSS- ն օգտագործվում է այնպիսի կայքերի համար, ինչպիսիք են կայքի դիրքի կետերը, ինչպես նաև ֆոնային գույնը, սահմանի չափը և ոճը, մի կետի և մյուսի միջև տարածությունը, տառատեսակի ընտանիքը և այլն որոշելու համար.

CSS- ի հիմնական առավելությունն այն է, որ ստեղծում է տարանջատում կայքի ձևավորման և կայքի բովանդակության միջև: Հատկացնելով բովանդակությունը դիզայնից, դիզայնի փոփոխությունները կարող են կատարվել մի ամբողջ կայք ՝ CSS- ի մի քանի ֆայլերի մի քանի կանոնների ճշգրտմամբ:.

Երեք տեղ `CSS- ի կանոններ գրելու համար

Նախքան CSS- ի մեկ տող գրել կարող եք իմանալ, թե որտեղ պետք է այն գրել, և ինչպես այն կապել այն HTML բովանդակության հետ, որի վրա ազդում է: Կան երեք տարբեր տեղեր, որոնցով կարող եք գրել CSS.

  • Արտաքին ոճի թերթ. Մի փաստաթուղթ, որը ստեղծվել է բացառապես CSS կանոններ պարունակելու համար, որոնք կարող են կիրառվել բազմաթիվ HTML փաստաթղթերի համար, օգտագործելով LINK տարրը HTML փաստաթղթի վերնագրում.
  • Ներքին ոճի թերթ. CSS ոճերը, որոնք ներկառուցված են ուղղակիորեն HTML փաստաթղթի վերնագրի մեջ, ոճային տարրերի պիտակների միջև.
  • Ներառման ոճեր. CSS ոճերը ավելացվել են մեկ HTML էլեմենտ ՝ օգտագործելով HTML փաստաթղթում ոճային հատկանիշը.

Չնայած կա ժամանակ և տեղ ներքին ոճերի թերթեր և ներսային ոճեր օգտագործելու համար, դրանց ճնշող մեծամասնությունը CSS ոճերը լավագույնս կիրառվում են ՝ օգտագործելով արտաքին ոճի թերթիկ.

Արտաքին ոճի թերթիկը կարող է կապված լինել ցանկացած թվով HTML փաստաթղթերի հետ, որոնք հնարավորություն են տալիս վերահսկել մի ամբողջ կայքի տեսքը մեկ CSS ֆայլից.

CSS- ի կանոնները միացնելով HTML- ի հատուկ տարրերին

CSS կանոնները կազմված են երկու մասից ՝ ընտրող և հայտարարագիր: Յուրաքանչյուր հայտարարագիր բաղկացած է նաև երկու մասից ՝ գույք և արժեք.

  • Ընտրողներ նույնականացնել կամ ընտրել HTML տարրը (ներ) ը, որի վրա պետք է կիրառվի CSS կանոնը.
  • Հատկություններ անուններ են, որոնք նկարագրում են այն առանձնահատկությունը, որի կանոնն անդրադառնում է: Մի քանի հաճախ օգտագործվող CSS հատկությունները լուսանցքային, սահմանային, ֆոնային գույնի, տեքստի հավասարեցման և տառատեսակի ոճն են.
  • Արժեքներ նկարագրեք, թե ինչպես պետք է հայտնվի գույքը: Եթե ​​տվյալ գույքը մարժա է, ապա ընդհանուր արժեքը կարող է լինել 10 պիքսել.

Ընտրողներ և առանձնահատկություններ

Հաճախ անգամ ոճային թերթը պարունակում է հակասական կանոններ HTML- ի մեկ տարրի համար: Հայեցակարգը ընտրողի առանձնահատկությունը կորոշի, թե որ կանոններն են կիրառվում HTML- ի յուրաքանչյուր տարրի համար.

Օրինակ, եթե հղումների ցուցակը օգտագործվում է հիմնական նավիգացիայի համար, և լրացուցիչ ցուցակները ներկայացվում են էջի հիմնական մարմնում, նավիգացիայի ցանկը և մարմնի մեջ նշված ցուցակները անհրաժեշտ կլինեն CSS կանոնների տարբեր շարք:.

Հակառակ դեպքում նավիգացիայի ընտրացանկը և էջի մարմնում ցուցակը ենթակա կլինեն նույն CSS կանոններին.

Հասկանալով, թե ինչպես են աշխատում CSS ընտրիչները, HTML- ի ճիշտ տարրերի վրա ազդող կանոնների գրելու բանալին է.

Չնայած CSS- ի ամենատարածված ընտրիչները id, դասի և պիտակների կամ տարրերի ընտրողներն են, այլ ընտրողներ, ինչպիսիք են ատրիբուտները, դիրքային ընտրիչները, կեղծ ընտրիչները և ընտրիչների համադրությունները, կարող են օգտագործվել ավելի մեծ առանձնահատկություններով կանոններ ստեղծելու համար:.

CSS- ի ընդհանուր օգտագործումներ

Կան բազմաթիվ CSS հատկություններ, որոնք կիրառվում են HTML- ի գրեթե յուրաքանչյուր էջում: Այս CSS- ի այս ընդհանուր հատկություններին ծանոթանալը թույլ կտա ձեզ լուծել հիմնական ոճավորման և դիրքավորման առաջադրանքների մեծ մասը.

Ոճավորող տառատեսակ

CSS- ը կարող է օգտագործվել ցանկացած ցանկալի տառատեսակի ոճ ստեղծելու համար: Անկախ նրանից, թե դա գույնի, չափի, քաշի, գծի բարձրության, հավասարեցման, գործի, ինքնին տառատեսակի ձևի կամ զարդարանքների, ինչպիսիք են ՝ ընդգծողներն ու շեղբերները, որոնք ցանկանում եք վերահսկել, CSS հատկությունները կարող են օգտագործվել ցանկալի էֆեկտ ստեղծելու համար.

Մասնագիտության սկզբունքները կիրառելով, տառատեսակի տարբեր ոճ կարող է կիրառվել էջի յուրաքանչյուր HTML տարրի վրա.

Տուփի մոդելը

Յուրաքանչյուր HTML տարրի շուրջ տարածությունն առավել լավ հասկացվում է ՝ մտածելով այն մասին, թե ինչ է կոչվում տուփի մոդելը.

Տուփի մոդելի դիագրամ

Տուփի մոդելը բաղկացած է երեք CSS հատկությունից ՝ լիցք, սահման և լուսանցք: Այս հատկությունները կարող են կիրառվել ցանկացած HTML էլեմենտ: Օրինակի միջոցով հասկանալ այս երեք հատկությունները ամենահեշտը.

Դիտարկենք HTML պարբերության հետևյալ տարրը.

Տեքստի պարբերություն.

Ո՞րն է հետևյալ CSS կանոնը գրելու հետևանքը?

փ {
լիցք `10px;
եզրագիծ `պինդ 1px;
մարժա `10px;
}

Պարբերությունը, կարծես, շրջապատված է.

  • Նախ, կետի տեքստի բոլոր կողմերում լիցքավորելու (դատարկ տեղ) 10 փիքսել,
  • Երկրորդ, 1-պիքսել լայն պինդ եզրը պարագրաֆի և լիցքաթափման շուրջ,
  • Երրորդ, սահմանի և ցանկացած հարակից տարրի միջև մարժայի 10 փիքսել (դատարկ տեղ).

Սա այն է, ինչ հայտնի է որպես տուփի մոդել: Յուրաքանչյուր տարր նախապատկերվում է դատարկ տարածքով, որը կոչվում է լիցք, հաջորդը `եզրագիծ, և վերջապես` դատարկ տարածություն, որը կոչվում է լուսանցք.

Օգտագործելով հատակներ

Floats- ն օգտագործվում է HTML տարրերը դեպի իրենց ծնողի տարրը ձախ կամ աջ ուղարկելու համար `առանց HTML փաստաթղթի ընդհանուր հոսքից դրանք չխզելու: Քույրերի ունեցվածքի հետ միասին պարզ է, որ դրանք կայքի դասավորության ձևավորման լավագույն միջոցներից են.

Չնայած մենք չենք պատրաստվում փորձել ծածկել այն ամենը, ինչ կա `իմանալու մասին լողազգեստների մասին, շատ կարևոր է հիմնարար պատկերացում կազմել, թե ինչպես են նրանք աշխատում, երբ սկսում եք CSS սովորել.

Հեշտ է հասկանալ floats- ը խոսքի մշակողի փաստաթղթի համատեքստում: Դիտարկենք տեքստային փաստաթղթում նկարը.

Սովորաբար յուրաքանչյուր պատկեր կա՛մ տեղակայվելու է աջ կողմում, և՛ տեքստի վրա, որը հոսում է պատկերի ձախ կողմում, կա՛մ ձախից դեպի բոլորը ՝ տեքստի վրա, որը հոսում է պատկերի աջ կողմում: Կայքում այս տեսքը կատարվում է float գույքի օգտագործման միջոցով.

Լողացող գույքը ունի չորս ընդունելի արժեք ՝ ձախ, աջ, ոչ մեկը և ժառանգություն: Վերը նշված մեր օրինակի դեպքում.

  • Եթե ​​պատկերը ենթակա է CSS կանոնին ՝ գույքի float և ձախ արժեքի դեպքում, ապա այն տեղադրվում է մայր տարրի ձախ կողմում ՝ աջ կողմից.
  • Արժեքի իրավունքը կկատարեր այնպես, ինչպես և սպասում եք.
  • Ոչ մեկը չի խանգարի, որ տարրը լողանա որևէ ուղղությամբ.
  • Ժառանգությունը կհանգեցնի, որ այդ տարրը ժառանգելու է ծնող տարրի վրա կիրառվող float արժեքը.

Floats- ը սովորաբար օգտագործվում է կայքի նավիգացիայի ընտրացանկեր ստեղծելու համար: Սովորաբար կայքի նավիգացիայի մենյուը բաղկացած է HTML չկարգավորված ցուցակից, որի յուրաքանչյուր ցուցակի տարրը լողում է ձախ կամ աջ, ինչի արդյունքում ցուցակներ են, որոնք հայտնվում են միմյանց կողքին, այլ ոչ թե հավաքված են փամփուշտների ցուցակի ոճով.

Օրինակ ՝ նավիգացիայի տիպիկ ընտրացանկը կարող է այսպիսին թվալ HTML- ում.

  • տուն

  • Մեր խանութը

  • Մեր մասին

  • Կապ մեզ հետ.

Առանց CSS կանոնների, այս ընտրացանկը կհայտնվի որպես ամփոփ ցուցակ, որում յուրաքանչյուր տարր հայտնվում է նոր տողում: Որպեսզի յուրաքանչյուր առարկան հայտնվի մեկ հորիզոնական գծով, որը սկսվում է էջի ձախ մասից, կարող է օգտագործվել հետևյալ CSS կանոնը.

li {
բոց: ձախ;
}

Ուշադրություն դարձրեք, որ այս օրինակը պարզեցնելու համար մենք օգտագործել ենք ցուցակի կետի պիտակը `որպես CSS ընտրիչ: Իրականում դա երբեք չէր արվի: Սովորաբար դասը նշանակվում էր հենց ցուցակի մեջ կամ յուրաքանչյուր ցուցակի կետի, և այդ դասը կօգտագործվի որպես ընտրող.

Մաքրել հատակը

Մեկ այլ գույք, որը հաճախ օգտագործվում է floats- ի հետ միասին, պարզ գույքն է: Երբ մեկ տարրը լողացվում է, հետագա բոլոր տարրերը սահում են և հավասարեցնում լողացող տարրի կողքին.

Այն դեպքերում, երբ ցանկանում եք, որ հետագա տարրերը սկսվեն լողացող իրի տակ, այլ ոչ թե դրա կողքին, կարող եք օգտագործել պարզ գույքը ՝ ստիպելու համար, որ նրանք սկսեն նոր տողից.

Մենք պարզապես քերծել ենք այն ամենը, ինչ կարելի է անել լողազգեստներով և մաքուր գույքով, բայց մենք գտանք այս հիանալի հոդվածը CSS-Tricks- ից, որը խորը դիտում է տալիս այս թեմային.

Օգտագործելով դիրքի գույքը

CSS դիրքի ունեցվածքը մեկ այլ մեթոդ է, որը հաճախ օգտագործվում է վեբ կայքի դասավորությունը ստեղծելու համար: Ի տարբերություն float հատկության, դիրքային հատկությունը հաճախ օգտագործվում է HTML փաստաթղթի բնական հոսքից տարրերը դուրս բերելու և դրանց դիրքը շատ կոնկրետ թելադրելու համար.

Դիրքի հատկության հետ կարելի է օգտագործել երկու արժեք ՝ հարաբերական և բացարձակ: Այդ արժեքներից որևէ մեկը կիրառելուց հետո կարող են օգտագործվել լրացուցիչ հատկություններ, ինչպիսիք են վերևը, ներքևը, ձախը և աջը `տուժած տարրը շատ հատուկ տեղադրելու համար:.

Դիզայնի ստեղծման համար դիրքի ունեցվածքն օգտագործելն առանց ռիսկերի է: Ի տարբերություն float ունեցվածքի, դիրքային սեփականության դիրքում գտնվող տարրերը կհամընկնում են այլ իրերի վրա ՝ ստեղծելով ներուժ ավելի խաչաձև զննարկչի և դիտման չափի խնդիրների համար.

Այնուամենայնիվ, դա լայն տարածում գտած գույք է CSS զարգացման աշխարհում, և դուք լավ կանեիք սովորել դիրքի գույքի օգտագործման հիմունքները.

Ինչ նոր է CSS3- ում

Ինչ նոր է CSS3- ում

Չնայած CSS2- ը մեկ հատուկ բնութագիր էր, CSS3- ը կոտրվել է ավելի քան հիսուն տարբեր մոդուլների, որոնցից յուրաքանչյուրը զարգացման և ընդունման տարբեր փուլում է.

CSS3- ի շարունակական աշխատանքը ղեկավարվում է Համաշխարհային ցանցի կոնսորցիումի կամ W3C- ի կողմից, և նրանք առաջարկում են կենտրոնացված տեղանք, որտեղ կարող եք հետևել CSS3 ստանդարտացման բոլոր ընթացիկ աշխատանքներին:.

Թեև CSS3 տարբեր մոդուլների վրա աշխատանքը շարունակվում է, շատ մոդուլներ արդեն ունեն լայն ընդունում և լայնորեն օգտագործվում են շատ կայքերի կողմից: Ահա CSS3 ամենակարևոր հատկություններից տասը, որոնք արդեն իսկ լայն ընդունելություն են ստացել, և աջակցվում են բոլոր ժամանակակից զննարկիչների կողմից.

  • Մինչդեռ պարզ ստեղծելու ունակությունը անիմացիաներ երկար ժամանակ հնարավոր է եղել JavaScript- ով, CSS անիմացիաները այժմ կարող են ստեղծվել `օգտագործելով ավելի պարզ CSS շարահյուսություն.
  • The հաշվարկ այժմ CSS3- ով հասանելի գործառույթը ծայրաստիճան օգտակար է արձագանքող դասավորություններ ստեղծելու համար: Այն կարող է օգտագործվել ավելացնելու, հանելու, բազմապատկելու կամ բաժանելու համար, իսկ հաշվարկման արդյունքն այնուհետև օգտագործվում է որպես գույքի արժեք.
  • Մի շարք առաջադեմ ընտրողներ ավելացվել են CSS3- ով, ինչը թույլ է տալիս բարձրացնել առանձնահատկության աստիճանը CSS կանոնների համար տարրեր ընտրելիս.
  • Հավելումը գրադիենտներ որպես ֆոնային տեսակը CSS ծրագրավորողներին թույլ է տվել ստեղծել տպավորիչ ֆոններ, որոնք արագ ներբեռնվում և ցուցադրվում են արագ.
  • Լայնության և բարձրության հատկությունները, որոնք կիրառվում են մի տարր, չեն պարունակում լիցք, սահման և լուսանցք: Արդյունքում, ծալելը, լուսանցքը և սահմանը մեծացնում են տարրի չափը նշված լայնությունից և բարձրությունից դուրս: Սա երկար ժամանակ հիասթափեցրել է CSS ծրագրավորողներին, ովքեր դիմում են բարդ մաթեմատիկայի ՝ վեբ կայքի դասավորությունը լավացնելու համար: Այնուամենայնիվ, տուփի չափման նոր գույքի հետ կարող է կիրառվել արժեքային սահմանային վանդակը ՝ պարտադրելով լիցքը, սահմանը և լուսանցքը նշված լայնության և բարձրության սահմանափակումների մեջ ՝ դրանով իսկ պարզեցնելով վեբ էջերի դասավորության ձևավորումը:.
  • CSS- ն կարող է օգտագործվել HTML- ի ցանկացած տարրի սահմանները կիրառելու համար, իսկ սահմանային պատկերի գույներով ՝ պատվերով սահման ստեղծելը և օգտագործելը ավելի հեշտ է, քան երբևէ: Գույքի շարահյուսությունն ինքնին բավականին բարդ է, բայց այն կախելուց հետո դուք կարող եք արագ ստեղծել որևէ տեսակի սահմաններ ցանկացած տարրի համար որևէ կայքի վրա:.
  • Լրատվամիջոցների հարցումներ որոշեք, թե սարքի տեսադաշտը, որն օգտագործվում է կայք մուտք գործելու համար, բավարարում է որոշակի սահմանված բնութագրերին: @Media CSS3 մոդուլը հիմնական գործիքներից մեկն է, որն օգտագործվում է պատասխանատու կայքեր ստեղծելու համար: Լրատվամիջոցների հարցումներից օգտվելով ՝ CSS ծրագրավորողը կարող է ստեղծել CSS կանոններ, որոնք կիրառվում են միայն այն դեպքում, երբ բավարարվում են որոշ լրատվամիջոցների հնարավորություններ, ինչպիսիք են դիտման լայնությունը և բարձրությունը և գունային ցուցադրման հնարավորությունները: Այս եղանակով CSS մշակողները կարող են վերափոխել և չափափոխել տարրերը, կամ թաքցնել բոլորը միասին ՝ հիմք ընդունելով լրատվամիջոցների հարցման արդյունքները:.
  • Օգտագործելով բազմաթիվ նախապատմություններ հատուկ ֆոնային ազդեցություն ստեղծելն ավելի հեշտ է, քան երբևէ CSS3- ով: Օգտագործելով ֆոնային գույքը, բազմաթիվ ֆոնային պատկերներ, գույներ և գրադիենտներ կարող են կիրառվել ցանկացած տարրի վրա.
  • Օգտագործելով սյուներ Թերթի ներշնչմամբ դասավորություն ստեղծելն ավելի հեշտ է, քան երբևէ CSS3 սյունակների գույքի հետ: Գույքը կարող է օգտագործվել սյունակների քանակը և լայնությունը հեշտությամբ սահմանելու համար ՝ ստեղծելով բեռնարկղ, որտեղ բովանդակությունը հեշտությամբ հոսում է մեկ սյունից մյուսը: Սյունակները օգտակար են նաև ճկուն նավիգացիոն ընտրացանկեր ստեղծելու համար.
  • 3D վերափոխումներ հնարավոր է CSS3- ի միջոցով: Սա վարպետության բարդ առարկա է, և դուք լավ կլինեք սկսել `կարդալով CSS- ի վերափոխումների մասին, այնուհետև աշխատել ձեր մի քանի ձեռնարկների միջոցով.

Պատասխանատու կայքերի ստեղծում CSS- ով

Պատասխանատու կայքերի ստեղծում CSS- ով

Կան հարյուրավոր, եթե ոչ հազարավոր, տարբեր սարքերի ցուցադրման չափեր և լուծումներ, որոնք ամեն օր օգտագործվում են ցանց մուտք գործելու համար, և արդյունքում ՝ այլևս բավարար չէ մեկ ամբողջական լրիվ կայք ունենալ, իսկ փոքր-ինչ սարքերի համար մեկ կամ երկու ձևավորում:.

Այսօր ձեր կայքը պետք է դիտելի լինի մեծ էկրանների, փոքր սարքերի և յուրաքանչյուր դիտման չափի միջև.

Դա անելու համար ձեր CSS կայքը պետք է համապատասխանի արձագանքող վեբ ձևավորման երեք հիմնական սկզբունքներին.

  • Նախ, ձեր ընդհանուր դասավորությունը որոշող ողնաշարը կամ ցանցը պետք է հեղուկ լինեն.
  • Երկրորդ, պատկերները պետք է ինքնաբերաբար չափափոխվեն, որպեսզի ցանկացած սարքի վրա գեղեցիկ մատուցվեն.
  • Երրորդ, լրատվամիջոցների հարցումները պետք է օգտագործվեն այն կետերը լուծելու համար, որտեղ հեղուկի սկզբնական ձևավորումը խափանում է.

Նոր վեբ ձևավորման նախագծին մոտենալիս շատ փորձառու դիզայներներ սկսում են ա առաջին հերթին բջջային տեխնիկա: Այս տեխնիկայով նախագծված կայքը սկսվում է ամենափոքր դիզայնի համար, որը նախատեսված է ամենափոքր դիտման համար, և դիտման չափի մեծացման ժամանակ ավելացվում են լրացուցիչ ոճեր:.

Բջջային առաջին տեխնիկան առաջարկում է երկու ուշագրավ առավելություն.

  • Նախ, այն ստիպում է դիզայներին պարզել կայքի կարևոր գործառույթները և դրանք օգտագործել որպես վեբ կայքի ձևավորման հիմք: Բավականին հաճախ, լիարժեք կայքէջը պարունակում է այնպիսի նյութեր, ինչպիսիք են հարմարանքները, ընտրացանկերը և այլն, որոնք չեն հանդիսանում կայքի մաս, երբ դիտվում են բջջային սարքում: Բջջային առաջին մոտեցումը կօգնի ապահովել, որ կայքի հիմնական նպատակը և ֆունկցիոնալությունը կենտրոնական փուլ են անցնում դիտումների բոլոր չափերի մեջ.
  • Երկրորդ, բջջային հեռախոսից կայք մուտք գործող կայքի այցելուները ներբեռնում են ավելի քիչ CSS կանոններ և կայքի աղբյուրներ: Եթե ​​ամբողջ կայքը առաջինն է բեռնում, ապա բջջային օգտագործողը ներբեռնելու է շատ ավելին ռեսուրսներ, քան անհրաժեշտ է: Բջջային առաջին մոտեցումը միայն բեռնում է համապատասխան իրերը բջջային սարքի վրա, պահում է այցելուի որոշ թանկարժեք տվյալներ և ստեղծում է վայրէջքային կայքի բեռնման փորձ:.

Ուսուցման պատասխանատու դիզայն

Պատասխանատու դիզայնի մեթոդները սովորելու լավագույն միջոցներից մեկը `պարզ և հարմարավետորեն պատասխանատու դիզայնի նախագծով: Ստեղծելով ձեր կայքի առաջին պատասխանատու դիզայնը `դուք ավելի լավ պատկերացում կստանաք այն գաղափարների մասին, որոնց մասին մենք խոսել ենք.

Սյունակների ոճի դասավորությունների ժողովրդականության աճով, կայքի դիզայներների համար նոր մարտահրավեր է առաջացել. Սյուների դասավորությունը բոլոր չափերի սարքերին հարմարեցնելու մարտահրավեր:.

Բարեբախտաբար, կան աղբյուրներ, որոնք կօգնեն CSS- ի սկսնակներին և փորձառու ծրագրավորողներին սովորել, թե ինչպես աշխատել այս CSS- ի նոր գույքի հետ պատասխանատու միջավայրում:.

Մեկ այլ հիանալի միջոց ՝ հասկանալու համար, թե ինչպես են CSS- ի լավագույն մշակողները հարմարեցնում կայքերը ՝ պատասխանատու կայքէջ նայելն է ՝ մի շարք չափսերի, կողք կողքի: Media Queries- ն այն կայքն է, որտեղ դուք կարող եք տեսնել հարյուրավոր արձագանքող վեբ կայքի ձևավորում մի շարք չափերի մեջ ՝ բոլորը մեկ էկրանին.

Ինչպես կատարել լոգարիթմական դռների կոճակները

Ինչպես կատարել լոգարիթմական դռների կոճակները

Պարզապես օգտագործելով CSS, դուք կարող եք ստեղծել հիանալի և ուժեղ `կոճակներ: Կարող եք ավելին անել նույնիսկ մի փոքր jQuery- ով.

Ստորև մենք ձեզ ցույց կտանք, թե ինչպես կարելի է լուսանկարել կոճակի պարզ պատկերներ և ստեղծել դրանք `օգտագործելով բոլոր չափերի փոխարկելի կոճակները ձեր կայքի միջոցով: Ի վերջո, դուք կստեղծեք կոճակի վերաօգտագործման կոդ, որը կարող եք օգտագործել, նման կոճակները ստեղծելու համար.

Անիմացիան միացնելու համար կտտացրեք պատկերը.

Լոգարիթմական դռների կոճակները Օրինակ 1

Ստեղծելով ձեր պատկերները

Տեխնիկան, որը մենք պատրաստվում ենք օգտագործել այս կոճակները ստեղծելու համար, կոչվում է «լոգարիթմական» CSS: Այս կոճակները տեղադրելու համար մեզ անհրաժեշտ է երկու պատկեր կոճակի յուրաքանչյուր տարբերակի համար. Մեր դեպքում ՝ երկու սև կոճակի պատկեր և երկու կապույտ կոճակ պատկեր, ընդհանուր առմամբ չորս պատկեր.

Այս պատկերները ստեղծելու համար մենք սկսում ենք կոշտ կոճակի պատկերներ.

Կապույտ կոճակ
Սև կոճակ

Այն, ինչ մենք պետք է անենք, յուրաքանչյուր կոճակը երկու պատկերների բաժանելն է.

  • Ձախ պատկերի պատկերը հնարավորինս նեղ կլինի, մինչդեռ դեռևս գրավելով կոճակի անկյունների ամբողջ շառավիղը.
  • Աջ աջի պատկերը հնարավորինս լայն կլինի, որքանով էլ որ մենք ուզում ենք օգտագործել պատկերների մանիպուլյացիայի ծրագիր `կոճակի մարմինը մի քանի անգամ պատճենելու համար, որպեսզի կարողանանք իսկապես երկար կոճակներ ստեղծել պատկերով.

Ահա այն նկարները, որոնցով մենք կավարտենք դրանց համապատասխան չափերի կտրելուց հետո.

Կապույտ կոճակը ձախ էԿապույտ կոճակը ճիշտ էԿապույտ կոճակը ճիշտ է
Ձախ կոճակ ձախՍև կոճակը ճիշտ էՍև կոճակը ճիշտ է

Բոլոր չորս պատկերները ստեղծելուց հետո պատրաստ կլինեք սկսել կոդավորումը.

Կոճակ HTML

Մեր կոճակը HTML- ն բաղկացած է երեք բաղադրիչներից `արտաքին div- ի փաթաթան, խարիսխի տարր և գնդիկի տարր.

Կոճակի տեքստ

Վերը նշված կոդային բլոկում բոլոր երեք տարրերը բաժանվում են առանձին տողերի, որպեսզի ավելի հեշտությամբ կարողանաք տեսնել, թե ինչ է կատարվում.

Այնուամենայնիվ, գործնականում, ամենայն հավանականությամբ, դուք կցանկանաք պահպանել դրանք բոլորը ներսից, մանավանդ, եթե օգտագործում եք բովանդակության կառավարման համակարգ (CMS), ինչպիսիք են WordPress- ը, որոնք յուրաքանչյուր տողի ընդմիջումից հետո կներառեն կետի պիտակները.

Կոճակի պատկերներ ավելացնելով

Հենց հիմա, եթե HTML- ի մի մասը վերևից բերեք օրինակից, այն ամենը, ինչ դուք կստանաք, այն հղումն է, որն ասում է «Կոճակի տեքստ»: Հաջորդ քայլը, որը մենք կցանկանանք ձեռնարկել, կոճակի պատկերն ավելացնել մեր կոդին.

Այնուամենայնիվ, նախքան դա անելը, եկեք մի փոքր ստիլինգ ավելացնենք արտաքին բաժանարար ծածկոցին, որպեսզի կարողանանք տեսնել, թե ինչ է կատարվում մի փոքր ավելի պարզ.

.լոգարիթմական կոճակ {
ցուցադրում. inline-block;
լայնությունը `ավտո;
լուսանցք `20px;
}

Այդ կոդն ուղղակի կտա որոշակի տարածություն մեր կոճակի շուրջը և կստիպի պարունակող div- ին նեղանալ դեպի հղման և տեքստի չափը: Այժմ մենք պատրաստ ենք ավելացնել մեր կոճակի նկարները.

.լոգարիթմական հղում {
ֆոնային պատկեր. url (‘կապույտ-կոճակ-աջ.png’);
ֆոնային չափս. ավտոմատ 100%;
ֆոն-դիրք ՝ ճիշտ;
ֆոնային կրկնել. չկրկնել;
}
.լոգարիթմական տեքստ {
ֆոնային պատկեր. url (‘կապույտ-կոճակ-ձախ.png’);
ֆոնային չափս. ավտոմատ 100%;
ֆոն-դիրք. ձախ;
ֆոնային կրկնել. չկրկնել;
}

Այսպիսով, հիմա մենք ավելացրել ենք մեր կոճակի պատկերը: Դժբախտաբար, դեռ շատ բան նայելն այնքան էլ շատ չէ: Բացի այդ, եթե խոշորացնում եք և ուշադիր նայում եք, կնկատեք, որ ձախ ձեռքի պատկերը իրականում նստած է աջ ղեկի պատկերի վերևում: Ոչ թե այն էֆեկտը, որը մենք պատրաստվում ենք.

Վատ կոճակ

Կոճակի ոճավորում

Եկեք մի փոքր ավելացնենք տեքստի շուրջը: Սա կստիպի մեր կոճակը ավելի կոճակի տեսք ունենալ: Բացի այդ, մենք պետք է փոխենք շրջանի և խարիսխի տարրերի ցուցադրումը ներածված բլոկի մեջ, որպեսզի երկուսն էլ արձագանքեն լիցքաթափմանը և լուսամփոփեն այնպես, ինչպես ուզում ենք:.

.լոգարիթմական հղում {
ցուցադրում. inline-block;
}
.լոգարիթմական տեքստ {
լիցք `20px;
ցուցադրում. inline-block;
}

Այդ ծածկագիրը մեր կոճակին կտա որոշակի չափ: Այնուամենայնիվ, մենք դեռ ունենք ձախողման և աջ պատկերների միջև համընկնման խնդրահարույց խնդիրը: Այն, ինչ մենք պետք է անենք `աջ ձեռքի պատկերը մի փոքր դեպի աջ տեղափոխելու համար մարժան օգտագործելն է, իսկ հետո ճիշտ նույն բացասական լուսանցքը կիրառել ձախ ձեռքի պատկերին.

.լոգարիթմական հղում {
մարժա-ձախ `17px;
}
.լոգարիթմական տեքստ {
լուսանցք-ձախ `-17px;
}

17 պիքսել արժեքը կիրառելի է կոճակի մեր հատուկ նկարների համար: Եթե ​​դուք օգտագործում եք տարբեր պատկերներ, ապա ձեզ հարկավոր է ճշգրտել այս արժեքը փորձարկման և սխալի միջոցով, մինչև կոճակը ճիշտ տեսնի.

Անցնելուց առաջ եկեք նաև առաջ գնանք և մեր ստեղնաշարի տեքստին մի քանի ոճ ավելացնել.

.լոգարիթմական տեքստ {
գույնը ՝ #fff;
տառաչափը `14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
տեքստի վերափոխում. մեծատառ;
font-weight: bold;
տեքստային դասավորված. կենտրոն;
}

Այս պահին մեր կոճակը, ըստ էության, նման է կոճակին!

Լավ կոճակ

Կոճակի սավառնի էֆեկտ

Հենց հիմա, եթե ձեր մկնիկը կախեք կոճակի վրա, վիզուալ նշան չկա, որ ձեր մկնիկը կոճակի վրա է: Եկեք շտկենք դա `ավելացնելով կախիչի էֆեկտ.

.լոգարիթմական տեքստ. Հովեր, .Սահանջող տեքստ. ակտիվ {
տուփ-ստվեր `ներդիր 0 0 0 1000px rgba (255,255,255, .2);
}

Չնայած որ դա, իհարկե, աշխատում է, մի փոքր կոպիտ է: Նախ ՝ սավառնի ազդեցությունը շատ կտրուկ անցում է կատարում ներսից և դրսից: Երկրորդ, եթե կոճակը տեղադրեք մուգ ֆոնի վրա, կնկատեք, որ սավառնի ազդեցությունը տարածվում է կոճակի կլորացված անկյուններից այն կողմ.

Մենք կարող ենք այդ երկու խնդիրներն էլ շտկել span- ի տարրին ավելացված մի քանի տող կոդով.

.լոգարիթմական տեքստ {
-վեբկիթիտ-անցում-սեփականություն. տուփ-ստվեր; / * Safari * /
-վեբկիթի-անցումային տևողություն .2s; / * Safari * /
անցում-ունեցվածք. տուփ-ստվեր;
անցումային տևողություն .2s;
սահմանային շառավիղ `12px;
}

Այժմ մեր սավառնի էֆեկտն անցում կկատարվի և կանցնի վայրկյանների երկու հարյուրերորդի ընթացքում `մի փոքր թեթևացում, բայց բավական է, որ անցումը սահուն լինի: Երկրորդ, սահմանի շառավիղի կանոնը կլորացնեն սավառնի էֆեկտի անկյունները `պատկերը համապատասխանելու համար.

Նկատի ունեցեք, որ 12 պիքսել արժեքը, որը մենք դիմեցինք սահմանային շառավղով, հատուկ է մեր կոճակի պատկերին: Եթե ​​դուք օգտագործում եք այլ պատկեր, ապա պետք է ճշգրտեք այս արժեքը.

Կոճակի պատկերների միացում

Հենց հիմա, մենք կարող ենք URL ավելացնել խարիսխի տարրերի href ատրիբուտին, և մեր կոճակները կհամապատասխանեն որպես հղումներ: Այնուամենայնիվ, այս գրառման վերևում հայտնվեց մի գիֆ, որը ցույց տվեց միացվող էֆեկտ, որը փոխեց կոճակի պատկերը: Եկեք հիմա շրջենք կոճակները փոխելու համար.

Նախ, մենք պետք է նոր պատկերն ավելացնենք կոճակներին: Կատարելու ձևը `նոր դասի կոճակի պատկերները ավելացնելով, այնուհետև` օգտագործելով jQuery ՝ դասը միացնելու և անջատելու դասը կոճակը սեղմելիս.

Եկեք սկսենք CSS- ից.

.ընթացիկ կոճակ
ֆոնային պատկեր. url (‘black-button-right.png’);
}
.ընթացիկ կոճակ
ֆոնային պատկեր. url (‘black-button-left.png’);
}

Հենց հիմա, փոփոխվող էֆեկտը չի գործում: Այնուամենայնիվ, եթե ձեռքով ավելացրեք դասի ընթացիկ կոճակը կոճակի բեռնարկղի բաժնում, կտեսնեք ձեր կոճակի երկրորդ տարբերակը.

Սեղմելու համար կոճակի երկու տարբերակների միջև փոխելու համար հարկավոր է օգտագործել jQuery ՝ կոճակի ընթացիկ դասի միացման և անջատման համար.

Այնուամենայնիվ, նախքան դա անելը, մենք պետք է որոշենք, թե որ կոճակներն ենք ուզում փոխել կոճակները: Մենք դա կարող ենք անել `դասարան ավելացնելով ցանկացած կոճակի վրա, որը մենք ցանկանում ենք օգտագործել որպես կոճակները փոխելու համար: Եկեք օգտագործենք դասի միացման կոճակը այս նպատակով.

Այսպիսով, ցանկացած կոճակ որպես փոխարկիչի կոճակ նշանակելու համար մենք պարզապես կավելացնենք այդ դասը արտաքին բաժանարար փաթաթվածին.

Այժմ մենք կարող ենք օգտագործել jQuery ՝ այդ կոճակի համար ընթացիկ կոճակի դասը միացնելու և անջատելու համար.

$ (‘. փոխարկել կոճակը): կտտացրեք (գործառույթ ())
$ (սա) .toggleClass (‘ընթացիկ կոճակ’);
վերադարձ կեղծ;
});

Այդ ծածկագրում մի քանի բան է կատարվում: Եկեք անցնենք դրանով.

Նախ, մենք բեռնավորում ենք jQuery- ը Google- ի կողմից հյուրընկալված գրադարաններից: Եթե ​​ձեր կայքը արդեն օգտագործում է jQuery, ապա կարող եք բաց թողնել առաջին սցենարի տարրը.

Երկրորդ սցենարի տարրը պարունակում է պարզ jQuery գործառույթ.

Գործառույթը դիտում է ցանկացած տարր `դասի միացման կոճակով: Երբ այդ դասի որևէ տարր կտտացվում է, ֆունկցիան կրակում է կտտացրած տարրի վրա դասի ընթացիկ կոճակը միացնելու կամ անջատելու համար:.

Վերջապես, գործառույթը վերադարձնում է արժեքը կեղծ, ինչը կանխում է հղման լռելյայն պահվածքը, այն է `վերբեռնել էջը, քանի որ մեր խարիսխի տարրերի href ատրիբուտը դատարկ կլինի միացման կոճակի վրա.

Այս կոդերի ավելացված քանակով մենք կարող ենք միացնել մեր կոճակը մեր սրտի բովանդակությանը.

Անիմացիան միացնելու համար կտտացրեք պատկերը.

Լոգարիթմական դռան կոճակի օրինակ 2

Ամբողջական կոդով

Եթե ​​դուք հետևում եք քայլ առ քայլ, ապա այս կոճակների համար արդեն կստեղծեք աղբյուրի կոդի ամբողջական տարբերակը: Այնուամենայնիվ, եթե դուք չեք հետևել այս երկուսին, կարող եք վերցնել այս ձեռնարկի կոճակի կոճակի ամբողջական աղբյուրը `պատճենելով ներքևի կոդը HTML փաստաթղթի.

Սահող դռների կոճակները

.լոգարիթմական կոճակ {
ցուցադրում. inline-block;
լայնությունը `ավտո;
լուսանցք `20px;
}
.լոգարիթմական հղում {
ֆոնային պատկեր. url (‘կապույտ-կոճակ-աջ.png’);
ֆոնային չափս. ավտոմատ 100%;
ֆոն-դիրք ՝ ճիշտ;
ֆոնային կրկնել. չկրկնել;
ցուցադրում. inline-block;
մարժա-ձախ `17px;
}
.լոգարիթմական տեքստ {
ֆոնային պատկեր. url (‘կապույտ-կոճակ-ձախ.png’);
ֆոնային չափս. ավտոմատ 100%;
ֆոն-դիրք. ձախ;
ֆոնային կրկնել. չկրկնել;
ցուցադրում. inline-block;
լիցք `20px;
լուսանցք-ձախ `-17px;
գույնը ՝ #fff;
տառաչափը `14pt;
font-family: ‘Open-Sans’, Arial, sans-serif;
տեքստի վերափոխում. մեծատառ;
font-weight: bold;
տեքստային դասավորված. կենտրոն;
-վեբկիթիտ-անցում-սեփականություն. տուփ-ստվեր; / * Safari * /
-վեբկիթի-անցումային տևողություն .2s; / * Safari * /
անցում-ունեցվածք. տուփ-ստվեր;
անցումային տևողություն .2s;
սահմանային շառավիղ `12px;
}
.լոգարիթմական տեքստ. Հովեր, .Սահանջող տեքստ. ակտիվ {
տուփ-ստվեր `ներդիր 0 0 0 1000px rgba (255,255,255, .2);
}
.ընթացիկ կոճակ
ֆոնային պատկեր. url (‘black-button-right.png’);
}
.ընթացիկ կոճակ
ֆոնային պատկեր. url (‘black-button-left.png’);
}


Միացրեք կոճակը

Հղման կոճակը

$ (‘. փոխարկել կոճակը): կտտացրեք (գործառույթ ())
$ (սա) .toggleClass (‘ընթացիկ կոճակ’);
վերադարձ կեղծ;
});

Ձեր կոճակը լավ օգտագործելով

Փազլի վերջին կտորն այն է, որ ձեր նոր կոճակները լավ օգտագործեք: Ահա մի քանի գաղափարներ, որոնք սկսելու համար:

  • URL ավելացնել խարիսխի տարրերի href ատրիբուտին և օգտագործել կոճակը ՝ ցանկացած էջի հղման համար: Նկատի ունեցեք, որ դա անելու համար դուք կցանկանայիք բաց թողնել կոճակի դասի դասը կոճակի փաթաթիչից.
  • Կոճակը միացնելիս օգտագործեք լրացուցիչ jQuery կամ JavaScript ՝ լրացուցիչ տեղեկությունները ցուցադրելու կամ թաքցնելու համար.
  • Եթե ​​իսկապես հավակնոտ եք զգում, օգտագործեք կոճակները կայքի նավարկության համար և օգտագործեք jQuery ՝ որոշելու, թե արդյո՞ք էջը համընկնում է կոճակի URL- ի հետ և միացրեք ընթացիկ կոճակի դասը, եթե երկուսն էլ համապատասխանեն.

Ամեն ինչ CSS գույների մասին

Ամեն ինչ CSS գույների մասին

CSS- ի հետ ամենակարևոր և հավանական շփոթեցնող բաներից մեկը գույնն է: Վեբ էջի գրեթե բոլոր տարրերը կարող են գունավորվել CSS- ի միջոցով.

CSS գույնի հատկությունները

Մեկ մանրուք, որը հաճախ շրջում է նոր առջևի մշակողների մոտ, CSS գույնի հատկությունն է: Ինչը խառնաշփոթ է դարձնում, այդ գույնը չի վերահսկում տարրը ինքնին, այլ տեքստը տարրի ներսում.

Ինքնին տարրի (տուփի) գույնը սովորաբար վերահսկվում է ֆոնային գույնի, սահմանային գույնի կամ սղագրության ֆոնի և սահմանի հատկությունների միջոցով, որոնք ներառում են գունային տեղեկատվություն: Կարող եք նաև գույնը դնել տուփի ստվերի վրա.

Սովորաբար, տարրի ֆոնային գույնը ընդգրկում է տարրի բովանդակությունը, լիցքավորումը և սահմանի տարածքը: Սա սովորական պահվածք է, որը պատկերացնում են CSS ստանդարտի ստեղծողները: Այնուամենայնիվ, լիցք և բովանդակությունը տարբեր գույներ պատրաստելու ձևեր կան.

Գույնի հայտարարագրեր

Բացի CSS- ի տարբեր հատկություններից, որոնք կարող են օգտագործվել գույնը նշելու համար, CSS- ում գույնը որոշելու երեք տարբեր եղանակ կա. RGB, hex արժեք կամ անուն.

/ * Այս բոլոր երեքը նույն գույնը կլինեն: * /

.red-rgb
ֆոնային գույնը `rgb (255, 0, 0);
}

.կարմիր-հեքիաթ {
ֆոնային գույնը ՝ # ff0000;
}

.կարմիր անուն {
ֆոնային գույնը ՝ կարմիր;
}

Երկրորդը (hex արժեքը) ամենատարածվածն է, բայց մենք կսկսենք RGB- ից, քանի որ hex- ի արժեքները իմաստ չեն ունենա, քանի դեռ չեք հասկանում, թե ինչպես է աշխատում RGB- ն.

RGB արժեքները

Համակարգչային մոնիտորները, հեռուստատեսային էկրանները և նման այլ ցուցադրիչները ունեն պիքսելներ: Գունավոր էկրանների վրա յուրաքանչյուր պիքսել բաժանվում է երեք ենթահպիչի ՝ կարմիր, կանաչ և կապույտ.

Սրանք, այսպես կոչված, «լույսի առաջնային գույներն» են: Այս երեք գույների համադրությունը տարբեր ինտենսիվությամբ կարող է օգտագործվել ցանկացած գույնի ստեղծման համար, որը մարդկային աչքը կարող է տեսնել: Սա հայտնի է որպես «հավելումների գույնի խառնուրդ»:

(Արժե իմանալ, որ սա ամեն ինչ կապ ունի մարդու աչքի հետ, և ոչ թե ինքնին լույսի հետ):

Displayուցադրման տարբեր էկրաններ տարբեր հնարավորություններ ունեն `ըստ ինտենսիվությունների այն տեսականի, որը կարող է արտադրել յուրաքանչյուր ենթածրագիր: Շատ պարզ էկրանը կարող է ունենալ երկու ինտենսիվություն յուրաքանչյուր գույնի համար (անջատված կամ միացված), մինչդեռ շատ բարձրորակ էկրանը կարող է ունենալ շատ ավելի աստիճանական աստիճաններ:.

Որպես ստանդարտ, համակարգիչները օգտագործում են զրոյից (0-ը `ամբողջ ճանապարհը) մինչև 255-ը (ամբողջ ճանապարհը) յուրաքանչյուր ենթածրագրի համար (օրինակ, 128-ը կիսով չափ է): Սա 256 հնարավոր ուժգնություն է յուրաքանչյուր ենթածրագրի համար, ինչը նշանակում է, որ յուրաքանչյուր ենթածրագրի արժեքը կարող է պահվել որպես 8 բիթ բայթ (2 8 = 256).

Քանի որ կան երեք գույներ, որոնցից յուրաքանչյուրը ներկայացված է 8 բիթով, գույների ընդհանուր քանակը, որոնք այս կերպ կարելի է ներկայացնել, ավելի քան 16 միլիոն է (256 3 = 16,777,216).

Գույների այս տեսականին կարող է ներկայացվել `պարզապես նշելով յուրաքանչյուր ենթածրագրի արժեքը, այսպիսին է.

rgb (0, 128, 255)

Այդ օրինակում, կարմիր ենթածրագիրը ամբողջ ճանապարհն է, կանաչ ենթահամակարգը կիսով չափ է ընթանում, իսկ կապույտ ենթահողը պարկեշտ է: Այդ գույնը նման է հետևյալին.

Այս համակարգում սպիտակ (բոլոր եղանակներով բոլոր գույները) rgb (255, 255, 255), իսկ սև (բոլոր գույներն անջատված) rgb (0, 0, 0).

RGB գույները նույնպես կարող են որոշվել որպես տոկոսներ, օգտագործելով տասնորդական, ոչ թե մեկ հետագծի նիշով.

rgb (0.0, 50.0, 100.0)

Այս օգտագործումը շատ տարածված չէ.

Hex արժեքները

Նույն ճշգրիտ տեղեկատվությունը գրելու ավելի կոմպակտ եղանակ է վեց արժեքների օգտագործումը: Hex- ի գույնի արժեքը գրվում է hash (ֆունտ) նշանով, որին հաջորդում են վեց hexadecimal նիշ, երեք զույգով, այսպիսին է.

# 0080ff

Առաջին զույգը ներկայացնում է կարմիր արժեքը, երկրորդ զույգը ներկայացնում է կանաչ արժեքը, իսկ երրորդ զույգը ներկայացնում է կապույտ արժեքը: Այս օրինակում 00-ը նշանակում է ընդհանրապես առանց կարմիրի, 80-ը նշանակում է կանաչ կես ճանապարհ, իսկ ff- ը `կապույտը, միևնույնն է: Այսպիսով, սա նույն գույնն է, որքան rgb (0, 128, 255).

Դա գուցե մի փոքր շփոթեցնի, եթե չեք օգտագործում hexadecimal համարները: Մեր նորմալ տասնորդական համակարգում յուրաքանչյուր նիշ կարող է ունենալ 10 արժեք (0-9): Hexadecimal համարակալման դեպքում յուրաքանչյուր նիշն ունի 16 հնարավոր արժեք (0-9, ա-զ).

Սա հնարավորություն է տալիս 0-255-ով բոլոր արժեքները ներկայացնել երկու թվանշանով ՝ 0-ff: Տեսեք այս hexadecimal ձեռնարկը լրացուցիչ տեղեկությունների համար.

Այս համակարգում սպիտակը #ffffff- ն է, իսկ սևը `000000.

Hex- ի գույնի արժեքները CSS- ում գույները նշելու ամենատարածված միջոցն են.

CSS գույնի անուններ

Առանձնահատուկ գույն նշելու վերջին միջոցը նախապես սահմանված գունային անվանումներից մեկը օգտագործելն է: W3C- ն պահպանում և երբեմն թարմացնում է գունային պաշտոնական անունների ցուցակը, որոնք կարող են օգտագործվել համարակալված գունային կոդերի փոխարեն: Օրինակ, սևը կարող է օգտագործվել # 000000-ի փոխարեն.

Համացանցի առաջին օրերին այս անվանումների գույները օգնեցին սահմանել «վեբ անվտանգ գույների» փոքր, ոչ պաշտոնական հավաքածու, որոնք լավ աջակցում էին զննարկիչների մեծամասնության և էկրանների էկրաններին:.

Այսօր գունային անուններ ունենալու ամենամեծ առավելությունն այն է, որ դրանք ավելի հեշտ է հիշել: Օրինակ, թեթև բութը ավելի հեշտ է հիշել (և ճիշտ գրել), քան դրա համարժեքները, # add8e6 կամ rgb (173, 216, 230).

CSS Գույների անունների ցուցակ

Գույնի անուն
Hex արժեքները
Գույնի օրինակ
aliceblue# f0f8ff
հնություն# faebd7
ջրբա# 00ffff
ակվամարին# 7fffd4
գորշ# f0ffff
բեժ# f5f5dc
կծիկ# ffe4c4
Սեվ# 000000
բլանշեդալմոնդ# ffe4c4
Կապույտ# 0000 գ
կապույտ գույն# 8a2be2
շագանակագույն# a52a2a
բյուրեղյա# deb887
կադետբլու# 5f9ea0
chartreuse# 7fff00
շոկոլադ# d2691e
մարջան# ff7f50
եգիպտացորեն# 6495ed
եգիպտացորեն# fff8dc
բշտիկ# dc143c
մուգ կապույտ# 00008b
մուգչյան# 008b8b
darkgoldenrod# b8860b
մուգ մոխրագույն# a9a9a9
մուգ կանաչ# 006400
մութ# a9a9a9
մութխակի# bdb76b
մութմագենտա# 8b008b
մուգ գույնի գույն# 556b2f
darkorange# ff8c00
մութորիչ# 9932cc
մուգ կարմիր# 8b0000
մութսալմոն# e9967a
մուգ գույնի երանգ# 8fbc8f
darkslateblue# 483d8b
darkslategray# 2f4f4f
darkslategrey# 2f4f4f
darkturquoise# 00ced1
մուգավոլիտ# 9400d3
խորքը# ff1493
խորքային# 00bfff
մառախուղ# 696969
մռայլ# 696969
բծախնդրություն# 1e90ff
կրակ# b22222
ծաղկաթուխ# fffaf0
անտառապատ# 228b22
ֆուչիա# ff00ff
gainsboro#dcdcdc
ուրվական# f8f8ff
ոսկի# ffd700
ոսկեգույն# daa520
մոխրագույն# 808080
կանաչ# 008000
կանաչ# adff2f
մոխրագույն# 808080
մեղրաբլիթ# f0fff0
թեժ կետ# ff69b4
հնդկական# cd5c5c
ինդիգո# 4b0082
փղոսկր# fffff0
խակի# f0e68c
նարդոս# e6e6fa
նարդոս# fff0f5
օրինաչափ# 7cfc00
լիմոնֆիֆոն#fffacd
բաց կապույտ# add8e6
լույս# f08080
լույս# e0ffff
թեթև շողոքորթ# fafad2
բաց մոխրագույն# d3d3d3
բաց կանաչ# 90ee90
բաց մոխրագույն# d3d3d3
լապտեր# ffb6c1
լույսեր# ffa07a
լուսաշող# 20b2aa
թեթևամտություն# 87cefa
լույսեր# 778899
լույսեր# 778899
կայծակ# b0c4de
թեթև# ffffe0
կրաքարի# 00ff00
կրաքարի# 32cd32
սպիտակեղեն# faf0e6
մարուն# 800000
միջակամամարին# 66cdaa
միջնաբերդ# 0000 սդ
միջինորակ# ba55d3
միջնակարգ# 9370db
միջին զանգված# 3cb371
mediumslateblue# 7b68ee
միջին սերնդի գույն# 00fa9a
միջնագիր# 48d1cc
միջերկրածով# c71585
կեսգիշեր# 191970
անանուխ# f5fffa
միրիրոզ# ffe4e1
մոկկասին# ffe4b5
navajowhite#ffdead
ծովային# 000080
հինավուրց# fdf5e6
ձիթապտուղ# 808000
olivedrab# 6b8e23
նարնջագույն# ffa500
նարնջագույն# ff4500
խոլորձ# da70d6
palegoldenrod# eee8aa
գունատ# 98fb98
paleturquoise#afeeee
գունատված# db7093
պապայավիպ# ffefd5
դեղձ# ffdab9
Պերու# cd853f
վարդագույն# ffc0cb
սալոր# dda0dd
փոշի# b0e0e6
մանուշակագույն# 800080
հակահեղափոխություն# 663399
կարմիր# ff0000
վարդագույն# bc8f8f
Արքայական կապույտ# 4169e1
թամբ# 8b4513
սաղմոն# fa8072
ավազոտ ավազ# f4a460
ծովային# 2e8b57
ծովախորշ# fff5ee
սիենա# a0522d
արծաթ# c0c0c0
երկնագույն# 87ceeb
սայթաքել# 6a5acd
սլաք# 708090
slategrey# 708090
ձյուն#fffafa
գարուն# 00ff7f
պողպատ# 4682b4
թուխ# d2b48c
հալել# 008080
փուշ# d8bfd8
լոլիկ# ff6347
փիրուզագույն# 40e0d0
Մանուշակ# ee82ee
ցորեն# f5deb3
սպիտակ#ffffff
սպիտակեցում# f5f5f5
դեղին# ffff00
դեղնավուն# 9acd32

Այլ CSS գունային աղբյուրներ

  • W3Schools- ի CSS Color Tutorial- ը թեման արագ ակնարկ է ՝ լրացուցիչ օրինակներով.
  • CSS Color Converter- ը առցանց գործիք է, որը վերցնում է ցանկացած գունային ձևաչափ և այն վերափոխում է բոլոր մյուսներին, գումարած ՝ ապահովում է գունային պալիտրա հնարավոր ընտրություններ.
  • CSS գունային տեղեկանք Mozilla Developer Network- ից `տարբեր գույների ստանդարտների և բնութագրերի վերաբերյալ տեղեկատվություն ստանալու լավագույն վայրերից մեկը.
  • Գույներ, նախապատմություններ և գրադիենտներ. Ավելացնել անհատականությունը CSS- ով (2015), Էրիկ Ա Մեյերի կողմից, հիանալի գիրք է, որը մանրամասնորեն ընդգրկում է CSS գույները:.

Գրելու արդյունավետ CSS

Գրելու արդյունավետ CSS

Արդյունավետ CSS- ի գրելն աներևակայելի կարևոր է: Այսօրվա ինտերնետ օգտագործողները շատ կարճ ուշադրության տևողություններ ունեն, ուստի ձեր կայքն ավելի երկար է տևում, այնքան ավելի մեծ են հավանականությունը, որ նրանք հարվածեն հետևի կոճակին.

Եթե ​​դուք ստեղծում եք մի պարզ կայք, արդյունավետ CSS- ն այդքան էլ կարևոր չէ: Բայց նման կայքերը ավելի ու ավելի հազվադեպ են լինում: Եթե ​​դուք կառուցում եք մեծ և բարդ կայք, ձեզ պետք է անհանգստանա ձեր CSS- ի արդյունավետությամբ.

Ստորև մենք կարևորում ենք, թե ինչու է կարևոր CSS արդյունավետությունը, ինչպես գրել ավելի արդյունավետ ընտրիչներ և առաջարկել որոշ գործիքներ, որոնք կարող են օգնել ձեզ հետագայում օպտիմիզացնել ձեր ծածկագիրը.

Ինչու է արդյունավետ CSS գործեր

Ձեր կոդը գրելիս CSS արդյունավետությունը հաշվի չառնելը կարող է լրջորեն վնասել ձեր էջի ընդհանուր կատարումը: Եվ վերջին բանը, որ ցանկանում եք, դանդաղ բեռնման կայք ունենալն է.

Ձեր նպատակն է հնարավորինս հեշտ դարձնել զննարկչի կողմից ձեր կոդը մատուցելը `անգամ այն ​​բրաուզերները, որոնք ավելի քիչ արդյունավետ են գործում.

Եղել են փաստարկներ, որ հեղինակի գործը չէ անհանգստացնել ընտրողների օպտիմալացման մասին, այն պետք է լինի այն շարժիչի գործը, որը կազմում է ծածկագիրը: Չնայած դա որոշ չափով ճիշտ է, բայց ոչ բոլոր օգտվողներ են պատրաստվում օգտագործել ժամանակակից զննարկիչ.

Դեռևս կան ամբողջ աշխարհում օգտագործողներ, որոնք ունեն միայն հին համակարգիչներ և դիտարկիչներ: Դուք ատում եք պատժել այդ օգտագործողներին, պարզապես այն պատճառով, որ նրանք մուտք չունեն վերջին տեխնոլոգիա: Գուցե ժամանակի ընթացքում սա փոխվի.

Բայց, երբ ձեր կոդն եք գրում, ձեր օգտագործողները հաշվի առնելը միշտ էլ լավ գաղափար է.

Ընտրողները ամենակարևորն են

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

Այն սկսվում է առանցքային ընտրողի կողմից և շարժվում դեպի ձախ ՝ կանոնների ընտրողի նախնիներին փնտրելու համար: Այնուհետև այն շարունակում է շարժվել ձախից, մինչև կանոնն ավարտված չէ, կամ էլ այն հանգեցնում է անհամապատասխանության.

Այսպիսով, եթե ձեր ծածկագիրը կարդում է ul > im im, ապա առաջին բանը, որը մեկնաբանվելու է, img է.

Հիմնական ընտրիչը վերջին մասն է, որը մենք հատկացրել ենք ընտրողի ավարտին.

CSS ընտրիչների չորս տեսակ

CSS ընտրիչների չորս հիմնական տեսակ կա, որոնց մասին պետք է տեղյակ լինեք և ճիշտ օգտագործեք ձեր CSS ծածկագիրը արդյունավետ: Ստորև ընտրողները պատվիրվում են իրենց արդյունավետության տեսանկյունից: Վերևում գտնվողներն առավել արդյունավետ են, իսկ ներքևում ՝ նվազագույնը.

ID ընտրող

ID- ի ընտրիչը վերաբերում է որոշակի HTML տարրին ՝ օգտագործելով ID հատկանիշը և նման է հետևյալին.

# հիմնական-նավարկություն

HTML- ում սա կօգտագործվի հետևյալ կերպ.

Դասի ընտրող

Դասի ընտրողը կընտրի տարրեր որոշակի դասի վերագրման շրջանակներում և նման է հետևյալին.

.կենտրոն

HTML- ում սա կօգտագործվի հետևյալ կերպ.

Պիտակների ընտրիչ

Պիտակների ընտրիչները ավելի քիչ արդյունավետ են, քան նույնականացման վկայականներն ու դասերը, ուստի դրանք պետք է օգտագործվեն խնայողաբար: Բայց դրանք ճիշտ պայմաններում կարող են արդյունավետ լինել: Պիտակների ընտրիչները, ընդհանուր առմամբ, նման են.

ուլ

HTML- ում պիտակը պարզապես ոճավորվում է, ինչպես թելադրվում է CSS- ով, երբ այդ պիտակն օգտագործվում է (այս դեպքում `ul).

Համընդհանուր ընտրող

Համընդհանուր ընտրիչը կարող է կիրառվել ցանկացած փաստաթղթի ձեր փաստաթղթում: Արդյունավետ CSS գրելու համար պետք է հնարավորության դեպքում խուսափել համընդհանուր ընտրիչ: Համընդհանուր ընտրիչը նշանակվում է հետևյալ կերպ.

*

CSS- ի արդյունավետ կանոններ ՝ հաշվի առնելու համար

Հիշելու համար կան մի քանի հիմնական կանոններ, որոնք կօգնեն ձեզ գրել ավելի արդյունավետ CSS: Այս կանոնները սրտանց հաշվի առնելով ՝ ձեր CSS կոդը շատ արագ կբեռնվի և ավելի լավ կաշխատի շրջապատի յուրաքանչյուր զննարկչի մեջ.

Մի օգտագործեք հետնորդ ընտրողներ

Հետնորդ ընտրող ցանկացած երկու ընտրող է, որոնք առանձնացված չեն համատեղիչի միջոցով: Տոհմային ընտրողը ամենաքիչը արդյունավետ ընտրողն է և կարող է իսկապես բացասական ազդեցություն ունենալ կատարման վրա.

Հետնորդ ընտրողների որոշ օրինակ, որոնք չպետք է օգտագործեք, ներառում են.

վերնագիր h3

ոտնագիր p

.մարմնի div

Մի՛ նշիր որակյալ նույնականացումները

Քանի որ նույնականացման նշանները կարող են վերաբերել միայն մեկ տարրին, իմաստ չունի դրանք որակել այն հատուկ պիտակի հետ, որով նրանք կօգտագործվեն: Օրինակ,

li # ձախ-նավարկություն

Անհրաժեշտ չէ զննարկիչին ասել, թե ընտրողի վրա ինչ ընտրություն է կիրառվելու: Փոխարենը, սա ավելի արդյունավետ է.

# ձախ-նավարկություն

Նկատի ունեցեք, որ նույնը դասերի մասին է, բայց ավելի փոքր չափով: Այնպես որ, մի՛ որակավորեք նաև դասերը.

Օգտագործեք CSS ժառանգություն, որքան հնարավոր է

Գույքի ժառանգությունը տիրապետելու կարևոր բան է: Իմացեք, թե որ հատկությունները կփոխանցվեն տարրից տարր և թույլ տվեք, որ նրանք կատարեն իրենց գործը.

Օրինակ, տառատեսակի չափը ժառանգվում է: Այսպիսով, եթե այն սահմանեք փաստաթղթի մարմնի համար, ապա անհրաժեշտ չէ այն սահմանել p և li պիտակների համար.

Սահմանափակեք ձեր կանոնները

Ձեր պիտակների վրա չափազանց շատ կանոններ ավելացնելը կդանդաղեցնի ձեր CSS կոդը և մեծապես կբարդացնի համապատասխանեցման գործընթացը.

Օրինակ

մարմինը .Widget-left #widget

Սա վատ կոդ է: Ուղղակի շատ բան է կատարվում: Մյուս կողմից:

# վիդջեթ

.վիդջեթ-ձախ

Սրանք շատ ավելի արդյունավետ են.

Վերը նշված խորհուրդների իրականացումը կօգնի ձեր CSS ծածկագիրը շատ ավելի արդյունավետ դարձնել: Եթե ​​ցանկանում եք ստուգել ձեր ծածկագիրը կամ գտնել այն ավելի արդյունավետ եղանակներ, ապա ստուգեք ներքևում նշված որոշ գործիքներ.

Ձեր CSS բարելավման գործիքներ

Եթե ​​հիշում եք վերը նշված կանոնները, ձեր CSS ծածկագիրը շատ ավելի արդյունավետ կլինի.

Բայց եթե ցանկանում եք ավելի լավ օպտիմալացնել ձեր CSS կոդը, կան գործիքներ, որոնք կօգնեն ձեզ այնտեղ հասնել: Ստորև մենք պրոֆիլավորում ենք մի քանի գործիքներ, որոնք կօգնեն սեղմել ձեր CSS- ը, սահմանել ընտրողներ և նույնիսկ ստեղծել ձեր համարները.

  • CSS սթրեսի փորձարկում. Սա շատ զով է այն առումով, որ այն միկրո ճշգրտումներ է կատարում ձեր կայքում, ինչպիսիք են ոլորումը, խոշորացումը, չափափոխումը և այլն: Ավելին, դա անում է այս ամենը 30 վայրկյանում: Այնուհետև այն ձեզ հաղորդում է ուղարկում ձեր CSS- ի արդյունավետության մասին.
  • Սահմանեք CSS- ի ID- ներ. Վեբ տուփ CSS բեռնիչը շատ օգտակար գործիք է: Դա կարող է օգնել հստակեցնել դասերը և նույնականացման վկայությունները և նույնիսկ կարող է անել որոշ CSS օպտիմիզացիա ձեզ համար.
  • Նվազեցրեք ձեր CSS ընտրիչները. Սա ցույց է տալիս ներկայումս առկա CSS ընտրիչները, որոնց հետ միասին օգտագործում են տարրերի ընտրիչները: Սա թույլ է տալիս նվազեցնել ձեր ընտրած ընտրողների քանակը, այնպես որ կարող եք նվազեցնել ձեր ընդհանուր հիշողության բեռը: Այս գործիքի միջոցով կարող եք միացնել ցանկացած URL, այնպես որ կարող եք նաև ուսումնասիրել այլ կայքեր.
  • Նեղացրեք ձեր CSS ծածկագիրը. Նեղացրեք ձեր գործող CSS կոդը: Ավելի քիչ կոդ, որ դուք պետք է ավելի լավ կազմելու համար: Այն տրամադրում է «առաջ» և «հետո» սքրինշոթ, այնպես որ դուք կարող եք տեսնել փոփոխությունները, որոնք կատարել են այս գործիքը.
  • Սեղմեք ձեր CSS ֆայլերը. Ձեր CSS ֆայլերը gzipping- ն կօգնի մաքրել այն: Այսպիսով, դա կարող է օգնել նվազեցնել HTTP պատասխանի ընդհանուր չափը և, այդպիսով, սերվերի պատասխանության ժամանակը.

Արդյունավետ CSS- ի գրելը լավ գաղափար է

Անկախ նրանից, թե դուք ընտրում եք ձեր CSS- ի օպտիմալացումը, կախված է ձեր կողմից: Դա այսօրվա ժամանակակից զննարկիչների հետ լիովին անհրաժեշտ չէ: Այնուամենայնիվ, եթե դուք ստեղծում եք բարդ կայք, ապա արժե անել.

Ավելին, դուք դեռ կարող եք ունենալ օգտվողներ, ովքեր ունեն ավելի հին կարգավորումներ և խելացի գաղափար է նաև նրանց կարիքները հոգալու համար: Հուսով եմ, այս բաժինը կօգնի ձեզ հենց այդպես վարվել և ավելի արդյունավետ CSS գրել.

Վարպետ CSS առցանց

Վարպետ CSS առցանց

Կան շատ տեղեր առցանց, որտեղ CSS- ն սովորելիս կարող եք դիտել տեսանյութեր, ամբողջական դասընթացներ և նույնիսկ կոդ ՝ զննարկչի շրջանակներում: Չնայած առկա են տասնյակ, եթե ոչ հարյուրավոր աղբյուրներ, այստեղ կան մի քանիսը մեր սիրված անվճար վայրերից ՝ CSS- ի մասին սովորելու համար.

Եթե ​​դուք իսկապես CSS- ին բոլորովին նոր եք, Մի վախեցիր համացանցից սկսնակների համար հարմար տեսանյութեր է, որոնք ներկայացնում են ինչպես CSS, այնպես էլ HTML: Եթե ​​սկսում եք զրոյից, ապա սա լավ արտադրված շարք է, որոնք չեն վախեցնի նրանց, ովքեր պարզապես մեկնարկում են իրենց ճանապարհորդությունը ՝ CSS սովորելու համար.

Եթե ​​նախկինում երբևէ չեք գրել ոճային թերթ, առաջինը գրելու լավ տեղն է CSS ձեռնարկը տրամադրվում է Համաշխարհային ցանցի կոնսորցիումի կողմից (W3C): Այս ձեռնարկը շատ բացատրություններ չի տալիս, այնպես որ, եթե դուք սովորում եք սովորող, ապա սա կարող է լինել իդեալական վայր մեկնարկի համար.

HTML և CSS գրելը պահանջում է, որ դուք օգտագործեք տեքստային խմբագիր, ֆայլերը պահեք պատշաճ ձևաչափերով և վերնագրերով և օգտագործեք զննարկիչ ՝ ձեր աշխատանքը դիտելու համար: Եթե ​​նախընտրում եք անցնել մի ծրագիր, որը թույլ է տալիս ֆայլերը ուղղակիորեն խմբագրել ձեր զննարկիչում, Կոդեկադեմիա հենց այն է, ինչ փնտրում եք.

Մեկ այլ ռեսուրս, որը ծածկում է Codecademy- ի նույն հիմքը, բայց այն կպահանջի, որ դուք սովորեք, թե ինչպես օգտագործել տեքստային խմբագրիչը և ինչպես ֆայլերը ճիշտ ձևաչափով պահել, Սովորեք կոդ HTML և CSS հեղինակ ՝ Շեյ Հով Հիմնարարությունը յուրացնելուց հետո մատչելի է նաև առաջադեմ ծրագիր.

Էջերի դասավորությունը վերահսկելը բարդագույն և կարևորագույն խնդիրներից է, որն իրականացվում է CSS- ի միջոցով: Եթե ​​խնդիրներ եք ունենում վերահսկելու դասավորությունների կախումը, ապա ձեռնարկը Իմացեք դասավորությունը հենց այն է, ինչ ձեզ հարկավոր է.

Mozilla մշակողների ցանց առաջարկում է CSS ձեռնարկ, որն ընդգրկում է CSS- ի բոլոր հիմնական գործառույթները այնպես, որ պատրաստի ձեզ անցնել ավելի դժվար թեմաների:.

Եթե ​​ցանկանում եք ամուր հիմք, որից դուք կարող եք վերածվել CSS- ի լիարժեք մշակողի, ապա կարող եք շատ ավելին անել, քան MDN CSS ձեռնարկը:.

Վերջապես, ռեսուրսների ոչ մի ցուցակ ամբողջական չի լինի, առանց նշելու CSS- ի զարգացումը խթանող կազմակերպությունը.

Թեև, իհարկե, այս ցուցակի ամենադյուրին ձեռնարկը չէ, այն ընդգրկուն է և մանրամասն: Եթե ​​ձեր նպատակը մի փոքր CSS սովորելն է, սա ձեզ համար ուսումնական ձեռնարկ չէ, բայց եթե դուք սկսում եք ճանապարհորդությունը `դառնալ CSS- ի լիարժեք մշակող, ապա սա լավ ձեռնարկ է ձեր գոտու տակ ընկնելու համար:.

Դիզայնի ոգեշնչում

CSS- ի զարմանալի աշխատանքներ

Եթե ​​դուք փնտրում եք դիզայնի ոգեշնչում, կամ ցանկանում եք ավելի լավ պատկերացում կազմել, թե ինչ կարող է անել CSS- ը, ահա մի քանի տեղ ՝ CSS- ի ցուցադրված աշխատանքները ստուգելու համար.

  • Creative Bloq- ը հավաքել է քսանչորս տպավորիչ CSS անիմացիոն անիմացիոն այս ընտրովի ցուցակը: Երբ նայում եք դրանց միջոցով, հիշեք, որ այս անիմացիաներից շատերը բացի CSS- ից օգտվում են նաև JavaScript- ից.
  • CSS Design Awards- ը ստեղծեց տաս անիմացիաների այս ցուցակը ՝ ամբողջական ցուցադրությամբ և դասընթացներով, որպեսզի կարողանաք գաղափարները կիրառել ձեր սեփական նախագծերի համար:.
  • MDN DemoStudio- ն այն վայրն է, որտեղ դուք կարող եք դիտել CSS- ի հարյուրավոր ցուցադրություններ ՝ ըստ ժողովրդականության, դիտումների քանակի, միտման կարգավիճակի, կամ նախ և առաջ դիտելով նորագույն ցուցադրությունները:.
  • Նախորդ ցուցակների համար ընտրված անիմացիաներից շատերը հյուրընկալվում են Code Pen- ում, իսկ գրիչների ուղղակիորեն շարժվելը ձեզ հնարավորություն կտա մուտք գործել HTML, CSS և JavaScript օգտագործմամբ ստեղծված տպավորիչ անիմացիոն հսկայական քանակ:.
  • Եթե ​​դուք տեսել եք բոլոր հաճելի անիմացիաները, որոնք դուք մտածում եք տեսնել, և փոխարենը ցանկանում եք տեսնել, թե ինչպես կարելի է CSS- ն օգտագործել ամբողջ կայքը փոխելու համար, առանց HTML- ի մի փոփոխություն կատարելու, ստուգեք վեբ կայքի այս էլեգանտ ձևավորումները, որոնք ընդգծում են ուժը CSS.

Պաշտոնական խոսքը CSS3- ի մասին

Պաշտոնական խոսքը CSS3- ի մասին

W3C- ն այն կազմակերպությունն է, որը մղում է վեբ ստանդարտների զարգացումը, ներառյալ CSS3 մոդուլները: Երբ դուք սովորում եք CSS և մակարդակի բարձրացնում ձեր հմտությունները, դուք պետք է ծանոթանաք W3C- ին և նրանց առաջարկած տեխնիկական փաստաթղթերին:.

W3C CSS- ի գլխավոր էջը մեկնարկի պահոցն է CSS- ի բոլոր բաների համար W3C- ում: Այս էջից կարող եք տեղեկատվություն գտնել ընթացիկ ստանդարտ զարգացման աշխատանքների վերաբերյալ.

Առաջարկվող ընթերցում

Առաջարկվող ընթերցում

CSS3- ի հետ ավելի խորը փոխըմբռնման և փորձի մշակման ամենաարդյունավետ ձևերից մեկը բազմաթիվ աղբյուրների և ուսուցման մեթոդների օգտագործումն է.

Եթե ​​փորձել եք մեկ ուսումնական ձեռնարկ, կամ երկուսը և ցանկանում եք փորձել լրացուցիչ մեթոդ, կամ եթե պարզապես նախընտրում եք աշխատել գրավոր տեքստից, ահա շուկայում CSS- ի լավագույն տեքստերից մի քանիսը.

  • CSS3 Վեբ դիզայներների համար (2010), Դեն Սեդարհոլմի կողմից. A List Apart- ի հիմնադիր Jեֆրի Զելդմանի նախաբանով և հաստատում է CSS-Tricks- ի Chris Coyier- ի և Eric Meyer- ի, CSS- ի մասին մի քանի գրքերի հեղինակ, այս տեքստը Դրի Սեդարհոլմը, Dribbble- ի համահիմնադիրը, CSS3 տեքստերի համար ոսկե ստանդարտ է.
  • HTML և CSS. Վեբ կայքեր ձևավորել և կառուցել (2011), հեղինակ ՝ Jon Duckett. Այս տեքստերը ներառում են և HTML, և CSS, և երկու թեմաների ամենատարածված և հարգված ներածություններից մեկն է:.
  • Սովորեք CSS- ն մեկ օրում և լավ սովորեք այն (2015), Jamեյմի Չան. Եթե դուք CSS- ի սկսնակ եք և ցանկանում եք արագ ձեռք բերել հիմունքները, այս գիրքը ձեզ համար է.
  • CSS. The Missing Manual (2015), David Sawyer McFarland. Այս տեքստը ուղղված չէ զուտ սկսնակներին, այլ փոխարենը ընդգրկում է առաջադեմ թեմաներ, ինչպիսիք են Flexbox- ը և Sass- ի օգտագործումը: Եթե ​​պատրաստ եք համակերպվել սկսնակ կարգավիճակից, այս տեքստը կօգնի ձեզ այնտեղ հասնել.
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map