CSS2 եւ CSS3 տարբերությունները

Հասկանալով CSS3- ի հիմնական փոփոխությունները

CSS2- ի եւ CSS3- ի միջեւ ամենամեծ տարբերությունն այն է, որ CSS3- ը բաժանվել է տարբեր բաժինների, որոնք կոչվում են մոդուլներ: Այս մոդուլներից յուրաքանչյուրը W3C- ի միջոցով ընթանում է առաջարկության գործընթացի տարբեր փուլերում: Այս գործընթացը շատ ավելի հեշտ է դարձնում CSS3- ի տարբեր բաժիններ, որոնք ընդունվում եւ իրականացվում են տարբեր արտադրողների կողմից բրաուզերում:

Եթե ​​այս գործընթացը համեմատում եք CSS2- ի հետ կատարվածի հետ, որտեղ ամեն ինչ ներկայացվում է որպես միասնական փաստաթուղթ, բոլոր Cascading Style Sheets- ի տեղեկատվության մեջ, դուք սկսում եք տեսնել առաջարկությունը `ավելի փոքր, առանձին կտորների վերացման առավելությունները: Քանի որ յուրաքանչյուր մոդուլը աշխատում է անհատապես, մենք ունենք CSS3 մոդուլների համար բրաուզերի օժանդակության ավելի լայն շրջանակ:

Ինչպես ցանկացած նոր եւ փոփոխվող հստակեցում, համոզվեք, որ ձեր CSS3 էջերը փորձարկեք այնքանով, որքան հնարավոր է շատ բրաուզերներում եւ օպերացիոն համակարգերում: Հիշեք, որ նպատակն այն է, որ ոչ բոլոր վեբ-բրաուզերում նայող վեբ էջերը ստեղծելը, այլ ապահովել, որ CSS3- ի ոճերը, որոնք օգտագործում եք, ոմանք օգտագործում են այն բրաուզերներում, որոնք աջակցում են նրանց եւ որ նրանք զիջում են նրբագեղ կերպով ավելի հին բրաուզերների համար չեն:

Նոր CSS3 ընտրողներ

CSS3- ը առաջարկում է նոր ձեւեր, որոնք կարող եք գրել CSS- ի կանոնները նոր CSS ընտրողներին, ինչպես նաեւ նոր կոմբինատորին եւ մի քանի նոր կեղծ տարրեր:

Երեք նոր հատկանիշ ընտրողներ.

• Հատկանշման սկիզբը համապատասխանում է ճիշտ տարրին [foo ^ = "bar"] Այս տարրը ունի foo- ի հատկանիշ, որը սկսվում է "բար" -ից
• Հատկանշման ավարտը համապատասխանում է ճիշտ տարրին [foo $ = "bar"] Այս տարրը ունի foo- ի հատկանիշ, որը ավարտվում է «բար» -ի հետ
• Հատկորոշիչը պարունակում է խաղային տարրը [foo * = "bar"] Այս տարրը ունի foo- ի հատկանիշ, որը պարունակում է «բար» տողը

16 նոր կեղծ դասեր.

• արմատ
  • Փաստաթղթի արմատական ​​տարրը: HTML- ում դա միշտ է:
• : nth-child (n)
  • Օգտագործեք սա `ճշգրիտ երեխայի տարրերին համապատասխանելու համար կամ օգտագործեք փոփոխականներ, փոխարինող համընկնումներ ստանալու համար:
• nth- երեխա (n)
  • Համապատասխանում է երեխայի տարրերը, որոնք հաշվում են վերջինից:
• : nth-of-type (n)
  • Համանման եղբայրների տարրեր նույն անունով, նախքան այն փաստաթղթի ծառի մեջ:
• : nth-end-of-type (n)
  • Համանման եղբայրական տարրեր նույն անունով, որոնք հաշվում են ներքեւից:
• վերջին երեխա
  • Համապատասխանում ծնողի վերջին երեխայի տարրը:
• առաջին տիպը
  • Համապատասխանում է այդ տիպի առաջին եղբայրական տարրը:
• վերջին տիպի
  • Համապատասխանում է այդ տիպի վերջին եղբայրական տարրին:
• :միակ երեխա
  • Համապատասխանի տարրը, որը ծնողի միակ երեխա է:
• միայն մի տեսակ
  • Համապատասխանում տարրը, որն իր տեսակի միակն է:
• դատարկ
  • Համադրեք այն տարրը, որը չունի երեխաներ (ներառյալ տեքստային հանգույցները):
• : թիրախ
  • Համապատասխանում է մի տարր, որը հղում կատարող URI- ի թիրախ է:
• միացված է
  • Համադրեք տարրը, երբ այն միացված է:
• :անաշխատունակ
  • Համադրեք այն տարրը, երբ այն անջատված է:
• :ստուգվում
  • Համադրեք այն տարրը, երբ այն ստուգվում է (ռադիո կոճակը կամ վանդակը):

• : ոչ (ներ)
  • Համապատասխանում է, երբ տարրը չի համապատասխանում պարզ ընտրողին :

Մեկ նոր կոմբինատոր.

• elementA ~ elementB
  • Համադրեք, երբ elementB- ը ինչ-որ տեղ հետեւում է elementA- ից, անպայման անմիջապես:

Նոր հատկություններ

CSS3- ը նաեւ ներկայացրեց CSS- ի մի շարք նոր հատկություններ: Այս հատկություններից շատերն էին ստեղծել տեսողական ոճեր, որոնք, հավանաբար, ավելի շատ միավորվեցին Photoshop- ի նման գրաֆիկական ծրագրով: Նրանցից ոմանք, ինչպես սահմանային շառավղով կամ արկղերի ստվերում, եղել են շուրջը, քանի որ CSS3- ն է: Մյուսները, ինչպիսիք են Flexbox կամ նույնիսկ CSS Grid- ը, նոր ոճեր են, որոնք դեռեւս հաճախ համարվում են CSS3 լրացումներ:

CSS3- ում վանդակը մոդելը չի ​​փոխվել: Բայց կան մի քանի նոր ոճի հատկություններ, որոնք կարող են օգնել ձեզ ոճավորել ձեր արկղերի ծայրերը եւ սահմանները:

Բազմակի նախապատմություն I mages

Օգտագործելով ֆոնային պատկեր, ֆոնային դիրքը եւ ֆոնային կրկնող ոճերը, կարող եք նշել մի քանի ֆոնային պատկերներ, որոնք շերտավորվում են միմյանց վերեւում, վանդակում: Առաջին պատկերն օգտագործողին ամենամոտ շերտ է, որի հետ նկարել են հետեւյալը: Եթե ​​կա ֆոնի գույն, այն նկարում է ստորեւ բոլոր պատկերների շերտերը:

Նոր ֆոնի ոճի հատկությունները

CSS3-ում կան նաեւ նոր ֆոնային հատկություններ:

• ֆոնային տեսահոլովակ
  • Այս հատկությունը սահմանում է, թե ինչպես պետք է ֆոնային պատկերը կտրված լինի: Սխալը սահմանային տուփն է, բայց այն կարող է փոխարինել լիցքավորման վանդակում կամ բովանդակության վանդակում:
• ֆոնային ծագումը
  • Այս հատկությունը որոշում է, թե արդյոք ֆոնին պետք է տեղեր լցված տուփի մեջ, սահմանի վանդակում կամ բովանդակության վանդակում:
• ֆոնային չափը
  • Այս հատկությունը թույլ է տալիս ցույց տալ ֆոնային պատկերի չափը: Այն թույլ է տալիս ձգվել փոքր պատկերներ, էջը տեղադրելու համար:

Փոփոխություններ առկա ֆոնի ոճի հատկությունների համար

Կան նաեւ մի քանի փոփոխություններ, որոնք առկա ֆոնի վրա են:

• ֆոնային-կրկնում
  • Այս գույքի համար կա երկու նոր արժեք `տարածություն եւ փուլ: Տիեզերքը տարածվում է վանդակապատ պատկերի մեջ, առանց քաշելու: Կլոր փեղկը ֆոնային պատկերն է, որպեսզի վանդակում մի քանի անգամ կպցնել:
• ֆոնային հավելված
  • Նոր արժեքը «տեղական» է ավելացված, որպեսզի ֆոնի վրա ոլորեք տարրերի բովանդակությունը, երբ այդ տարրը ունի ոլորման գիծ:
• ֆոնի վրա
  • Ֆոնային ստեղնաշարի գույքը ավելացնում է չափի եւ ծագման հատկությունները:

CSS3 սահմանային հատկություններ

CSS3- ի սահմաններում կարող ենք լինել այն ոճերը, որոնք մենք օգտագործում ենք (պինդ, կրկնակի, խճճված եւ այլն) կամ դրանք կարող են լինել պատկեր: Plus, CSS3- ը բերում է կլորացված անկյուններ ստեղծելու ունակություն: Սահմանային պատկերները հետաքրքիր են, քանի որ դուք ստեղծում եք բոլոր չորս սահմանների պատկերը, ապա պատմեք CSS- ին, թե ինչպես կիրառել այդ պատկերը ձեր սահմաններում:

Նոր Սահմանային Ոճ Properties

CSS3-ում որոշ սահմանային հատկություններ կան.

• սահմանի շառավղով
  • border- bottom -right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
  • Այս հատկությունները թույլ են տալիս ստեղծել ձեր եզրագծերի կլորացված անկյունները:
• border-image-source- ը
  • Սահմանում է սահմանային ոճերի փոխարեն օգտագործվող պատկերը աղբյուրի ֆայլը:
• border-image-slice- ը
  • Ներքին դրվածքներ ներկայացնում է սահմանի պատկերի եզրերից
• border-image-width- ը
  • Սահմանում է սահմանի պատկերի լայնությունը:
• border-image-outset- ը
  • Սահմանում է, որ սահմանի պատկերը տարածքը տարածվում է սահմանի վանդակում:
• border-image-stretch
  • Սահմանում է, թե ինչպես սահմանի պատկերի կողմերն ու միջին հատվածները պետք է սալիկապատված կամ չափավոր լինեն:
• սահմանային պատկեր
  • Սահմանային պատկերի հատկությունների համար ստանդարտ հատկություն:

Սահմանափակումների եւ ծագումների հետ կապված CSS3- ի լրացուցիչ հատկություններ

Երբ տուփը կոտրված է էջի ընդմիջման ժամանակ, սյունակի ընդմիջումը գծային ընդմիջման համար (ներկառուցված տարրերի համար), տուփի ձեւավորման ընդմիջման հատկությունը սահմանում է, թե ինչպես են նոր տուփերը փաթաթված սահմանով եւ լցվածությամբ: Հնուց ֆորմատները կարելի է բաժանել տարբեր կոտրված արկղերի միջեւ, օգտագործելով այս հատկությունը:

Կա նաեւ տուփի ստվերային հատկություն, որը կարող է օգտագործվել ստվերների տարրեր ավելացնելու համար:

CSS3- ով այժմ հեշտությամբ կարելի է ստեղծել մի քանի վեբ էջ, առանց սեղանների կամ բարդ բաժնի տեքստի կառույցների: Պարզապես զրուցեք բրաուզերում, թե որքան սյուներ պետք է ունենաք մարմնի տարրը եւ որքանով դրանք պետք է լինեն: Plus Դուք կարող եք ավելացնել սահմանները (կանոնները), ֆոնային գույները, որոնք տարածվում են սյունակի բարձրության վրա, եւ ձեր տեքստը կավարտվի բոլոր սյունակների միջոցով ավտոմատ կերպով:

CSS3 սյունակները - սահմանեք սյունակների քանակը եւ լայնությունը

Կան երեք նոր հատկություններ, որոնք թույլ են տալիս սահմանել ձեր սյունակների թվաքանակը եւ լայնությունը.

• սյունակի լայնությունը
  • Սահմանում է ձեր սյունակները լայնությունը: Այնուհետեւ բրաուզերը տեքստը հոսում է տարածքը լրացնելով լայնությամբ սյունակներով:
• սյունակ-հաշվարկ
  • Սահմանում է էջում սյունակների թիվը: Բրաուզերը այնուհետեւ բավականաչափ լայն սյուններ է ստեղծում տարածության մեջ, բայց միայն այն համարը, որը դուք նշում եք:
• սյունակները
  • Ստանդարտի գույք, որտեղ դուք կարող եք սահմանել կամ լայնությունը կամ համարը (կամ երկուսն էլ, բայց դա հազվադեպ է իմաստ):

CSS3 սյունակ բացերը եւ կանոնները

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

• սյունակ-բացը
  • Սահմանում է բացվածքների լայնությունը սյունակների միջեւ:
• սյունակ-կանոն-գույնը
  • Սահմանում է կանոնի գույնը:
• սյունակ-կանոն-ոճ
  • Սահմանում է կանոնի ոճը (պինդ, կետավոր, կրկնակի եւ այլն):
• սյունակ-կանոն-լայնություն
  • Սահմանում է կանոնի լայնությունը:
• սյունակ-կանոն
  • Ստանդարտ հատկություն, որը սահմանում է բոլոր երեք սյունակային կանոնները միանգամից:

CSS3 սյունակն ընդմիջում, կողպված սյունակներ եւ լցնում սյունակներ

Սյունակային ընդմիջումները օգտագործում են նույն CSS2 տարբերակները, որոնք օգտագործվում են բեկված բովանդակության ընդմիջումները սահմանելու համար, սակայն երեք նոր առանձնահատկություններով ` կոտրել, առաջանալ , կոտրել եւ կոտրել :

Սեղանների պես, դուք կարող եք սահմանել էլեմենտներ, սյունակների սյունակները սյունակաթափ հատկությամբ: Սա թույլ է տալիս ստեղծել վերնագրեր, որոնք ավելի շատ սյունակներ են տարածում թերթի պես:

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

CSS3-ում ավելի շատ հնարավորություններ, որոնք ներառում են CSS2- ում

CSS3-ում գոյություն չունեցող բազմաթիվ հավելյալ հատկանիշներ կան, այդ թվում `

• CSS- ի կաղապարի դասավորության մոդուլ եւ CSS3 Grid positioning մոդուլ .
• CSS3 տեքստային մոդուլ . Շտկել տեքստը եւ նույնիսկ ստեղծել CSS- ներով բացվող ստվերներ:
• CSS3 Գունավոր մոդուլ : Այժմ անթափանցիկությամբ:
• Փոփոխությունները տուփի մոդելի մեջ . Ներառյալ շքեղ գույքի գույքը, որը գործում է IE պիտակի նման:
• CSS3 ինտերֆեյսի մոդուլ . Ձեզ տրամադրել նոր cursors, պատասխանների գործողությունների, անհրաժեշտ դաշտերը, եւ նույնիսկ չափափոխել տարրերը :
• ԶԼՄ-ների հարցումներ . ԶԼՄ-ների հարցումները հնարավորություն են տալիս ավելի ճկունություն սահմանելիս, թե ինչպես պետք է օգտագործել ոճը: Օրինակ, կարող եք սահմանել ոճաթերթ, որը միայն 20-ից ավելի տեսադաշտ ունեցող վթարային սարքերի համար է:
• CSS3 Ruby- ի մոդուլը : Ապահովում է աջակցություն լեզուների համար, որոնք օգտագործում են տեքստային շերտ, փաստաթղթեր նկարագրելու համար:
• CSS3 Paged Media մոդուլ . Ավելի շատ աջակցություն paged media- ի համար (թուղթ, թափանցիկություն եւ այլն):
• Ստեղծված բովանդակություն . L ղեկավարող ստորաբաժանումներ եւ ստորագրություններ, ծանոթագրություններ եւ այլ բովանդակություն, որոնք ծրագրավորվում են, հատկապես paged media- ի համար:
• CSS3 խոսքի մոդուլ . Փոփոխություններ, սովորական CSS- ում: