Веб-құжаттарда CSS мұрасы қалай жұмыс істейді

CSS-мен веб-сайтты стилизациялаудың маңызды бөлігі мұра ұғымын түсіну болып табылады.

CSS мұрасы автоматты түрде пайдаланылатын сипаттың стилімен анықталады. Мәнер сипаты өң-түсі көрінген кезде, «мұра» деп аталатын бөлімді көресіз. Егер сіз көптеген веб-дизайнерлер болсаңыз, сіз сол бөлімді елемегенсіз, бірақ ол мақсатқа қызмет етеді.

CSS мұрасы дегеніміз не?

HTML құжатындағы әрбір элемент ағаштың бөлігі болып табылады және бастапқы элементінен басқа әрбір элемент оны қамтитын басты элементі бар. Егер қандай да бір стильдер осы басты элементке қолданылса, қасиеттері мұра болып табылса, оған қоса берілген элементтерге қолданылуы мүмкін.

Мысалы, төменде көрсетілген HTML коды EM тегін қамтитын H1 тегі бар:

Бұл Үлкен Тақырып

EM элементі H1 элементінің еншілес элементі болып табылады және мұраланған H1-дегі кез келген мәнерлер ЕМ мәтініне де жіберіледі. Мысалға:

h1 {font-size: 2em; }

Қаріп өлшемі сипаты мұраланғандықтан, «Үлкен» (EM таңбалары ішіне салынған) мәтіні H1 қалған бөлігі сияқты бірдей болады. Себебі CSS сипатында орнатылған мәнді мұраға алады.

CSS мұрасын қалай пайдалануға болады

Оны пайдаланудың ең оңай жолы - мұраланған және мұраланбайтын CSS қасиеттерімен танысу. Егер сипат мұраланған болса, онда құжаттың әрбір еншілес элементі үшін мән қалады.

Мұны пайдаланудың ең жақсы тәсілі - BODY сияқты өте жоғары деңгейдегі элементтің негізгі мәнерлерін орнату. Егер қаріп тұқымдарын денеңіздің сипатына орнатсаңыз, мұрагерлік арқасында бүкіл құжат сол қаріп-отбасын сақтайды. Бұл іс жүзінде басқарудың оңай болуы үшін кішірек стиль кестелерін жасауға мүмкіндік береді, себебі жалпы стильдер аз болады. Мысалға:

body {қаріп-отбасы: Arial, sans-serif; }

Inherit стилінің мәнін пайдаланыңыз

Әр CSS сипаты ықтимал опция ретінде «мұраланған» мәнді қамтиды. Бұл веб-браузерге сипат әдетте мұраға берілмесе де, ол ата-аналармен бірдей мәнге ие болуы керек. Мұралы емес маржа сияқты мәнерді орнатсаңыз, ата-аналар сияқты бірдей маржа беру үшін мұра мәнін кейінгі сипаттарда пайдалануға болады. Мысалға:

body {margin: 1em; } p {margin: inherit; }

Мұра есептеу құндылықтарын қолданады

Бұл ұзындықты пайдаланатын қаріп өлшемдері сияқты мұраланған мәндер үшін маңызды. Есептелген мән веб-беттегі басқа мәнге қатысты мән болып табылады.

BODY элементінде 1EM қаріп өлшемін орнатсаңыз, бүкіл беттің өлшемі барлығы 1м болады. Себебі, тақырыптар (H1-H6) және басқа элементтер (кейбір шолғыштар кесте сипаттарын басқаша есептеу) сияқты элементтер веб-шолғышта салыстырмалы өлшемге ие болады. Басқа шрифт өлшемі туралы ақпарат болмаған кезде, веб-браузер әрқашан H1 тақырыбына беттегі ең үлкен мәтінді, содан кейін H2 және тағы басқасын жасайды. BODY элементін белгілі бір қаріп өлшеміне орнатқанда, ол «орташа» қаріп өлшемі ретінде пайдаланылады және тақырып элементтері осыдан есептеледі.

Мұрагерлік және фондық сипаттар туралы ескертпе

Тізімдегі бірнеше стильдер W3C-дегі CSS 2-де мұраланған жоқ, бірақ веб-браузерлер әлі де мәндерді иеленеді. Мысалы, келесі HTML және CSS жазған болсаңыз: