CSS ժառանգության ակնարկ

Ինչպես CSS ժառանգությունը աշխատում է վեբ փաստաթղթերում

CSS- ի հետ վեբ կայքի ձեւավորման կարեւոր մասն է հասկանում ժառանգության հայեցակարգը:

CSS- ի ժառանգությունը ավտոմատ կերպով սահմանվում է օգտագործվող գույքի ոճով: Երբ դուք նայեք ոճի գույքի ֆոնային գույնը, կտեսնեք «Ժառանգություն» բաժին: Եթե ​​դուք նման եք վեբ դիզայներների մեծ մասը, ապա դուք անտեսել եք այդ բաժինը, բայց դա ծառայում է նպատակին:

Ինչ է CSS ժառանգությունը:

HTML- ի փաստաթղթի յուրաքանչյուր տարրը ծառի մի մասն է եւ յուրաքանչյուր տարր, բացառությամբ նախնական տարրը ունի ծնողի տարրը, որը պարունակում է այն: Ինչ էլ որ ոճերը կիրառվեն այդ ծնողի տարրին, կարող են կիրառվել այն իրերի մեջ ներառված տարրերը, եթե հատկությունները կարող են ժառանգել:

Օրինակ, ստորեւ բերված այս HTML կոդը ունի H1 պիտակը, որը ներառում է EM tag:

Սա մեծ վերնագիր

EM տարրը H1 տարրի երեխա է եւ ժառանգված H1- ի ցանկացած ոճերը կփոխանցվեն նաեւ EM տեքստին: Օրինակ:

h1 {font-size: 2em; }

Քանի որ տառատեսակի չափը ժառանգված է, այն տեքստը, որը ասում է «մեծ» (որը EM- ի տողերի մեջ կցված է) նույն չափը կլինի, ինչպես մնացած H1- ը: Դա այն պատճառով է, որ ժառանգում է CSS- ի գույքի մեջ սահմանված արժեքը:

Ինչպես օգտագործել CSS ժառանգությունը

Օգտագործման ամենադյուրին միջոցը ծանոթանալ CSS- ի ժառանգված հատկություններին : Եթե ​​գույքը ժառանգված է, ապա դուք գիտեք, որ արժեքը կմնա նույնը փաստաթղթում յուրաքանչյուր երեխայի տարրերի համար:

Օգտագործման լավագույն տարբերակն այն է, որ ձեր հիմնական ոճերը սահմանեն շատ բարձր մակարդակի տարրերի վրա, ինչպես BODY- ը: Եթե ​​ձեր տառատեսակը կարգավորեք ձեր մարմնի վրա, ապա ժառանգության շնորհիվ ամբողջ փաստաթուղթը կպահպանի նույն տառատեսակը: Դա, ըստ էության, կկատարի ավելի փոքր ձեւաչափեր, որոնք հեշտ է կառավարել, քանի որ կան ընդհանուր ոճեր: Օրինակ:

body {font-family: Arial, sans-serif; }

Օգտագործեք Inherit Style արժեքը

Յուրաքանչյուր CSS- ի հատկությունը ներառում է «ժառանգություն» արժեքը որպես հնարավոր տարբերակ: Սա ասում է վեբ բրաուզերը, որ նույնիսկ եթե գույքը սովորաբար ժառանգված չէ, այն պետք է ունենա նույն արժեքը, ինչպես ծնողը: Եթե ​​դուք սահմանել եք այնպիսի ոճ, ինչպիսին ժառանգված չէ, կարող եք օգտագործել ժառանգական արժեքը հետագա հատկությունների վրա, որպեսզի նրանք նույն ծածկույթն ունենան որպես ծնող: Օրինակ:

մարմինը {margin: 1em; } p {margin: ժառանգություն; }

Ժառանգությունը օգտագործում է հաշվարկված արժեքներ

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

Եթե ​​ձեր BODY տարրի վրա 1em տառատեսակի չափը սահմանեք, ձեր ամբողջ էջը չի լինի միայն 1-ի չափով: Դա այն է, որ այնպիսի տարրեր, ինչպիսիք են վերնագրերը (H1-H6) եւ այլ տարրեր (որոշ բրաուզերների համար սեղանի հատկությունները տարբեր կերպ են հաշվարկում) ունեն վեբ զննարկիչի համեմատական ​​չափը: Այլ տառաչափի տեղեկատվության բացակայության դեպքում, վեբ զննարկիչը միշտ կդարձնի H1- ի վերնագիր էջի ամենամեծ տեքստը, այնուհետեւ, H2- ը եւ այլն: Երբ ձեր BODY- ի տարրը որոշակի տառաչափի սահմանում է, ապա այն օգտագործվում է որպես «միջին» տառատեսակի չափս, իսկ վերնագրի տարրերը հաշվարկվում են դրանից:

Ծանոթագրություն ժառանգության եւ ֆոնային հատկությունների մասին

Կան բազմաթիվ ոճեր, որոնք նշված են W3C- ում CSS 2-ում ժառանգված չեն, սակայն վեբ բրաուզերները դեռեւս ժառանգում են արժեքները: Օրինակ, եթե դուք գրել եք հետեւյալ HTML եւ CSS: