Констекстік селекторлар
Мұрагерліктің тағы да бір ерекшелігі – ол стильдерді констекті түрде қолданыла алды. Мысалы, түсін жасыл, ал аспан көк етіп орнатудан басқа, тегін және тегтерінің арасында және тек қана осылардың арасында осы бөлімді тапқан кезде сары түсті етіп орнатуға болады. Мұны жасау оңай:
h3 big {color: yellow}
Бұл жерде стильдер кестесі тегіне бірмезгілде орнатылып қосылған құрамы сары түсте көрінеді. Бұл беттің басқа жерлерінде стиліне әсер етпейді. Бұл жердегі конструкциядағы үтірдің жоғын тексеру керек, болмаса, бұл селектор екі тегтің құрамы да сары түспен көрінеді дегенді білдіретін болады. Мұндай ережелер контекстік селектор деп аталады, себебі олар контекстке тәуелді айнымалылар мәнін анықтайды.
Әртүрлі айнымалылар үшін, айнымалыларды үтір арқылы бөлумен бір қатарда мәнін анықтауға болады.
Мысалы, h3 em, h2 i {color: yellow}
7.2.2 тапсырма. Абзацтар үшін әріпше стилін жасаңыз – бірінші әріп шрифттің белгілі бір түрімен үлкейтілген қоңыр түсте болуы керек. Бірінші бөлімде «Привет» сөзін сіз FONT:
Привет
тегі арқылы жасаған болатынсыз. Ол жерде қанша абзац болса, сонша осындай ұзын код қою керек еді. Бұдан жұмыс уақыты ұлғаяды, код өлшемі көбейді және бетті жүктеу уақыты ұзарады.
CSS көмегімен мұны қысқартуға болады.
Нұсқалардың бірі - ЕМ ерекшеленуімен атрибутты қолдану.
Привет
,
Ал атрибуттың өзі стильдер кестесінде анықталады:
p em {color="gray"; font-size: 140%; font-family: "Arial";}
Бұл ұзақ қатар бір рет қана жазылады. Ал әрбір абзацта әріпшені жазу 50 символдан 10 символға дейін қысқарады.
Веб-бетті жүктеу уақыты мен өз қайратыңызды үнемдеудің күштіт мақсаты емес па? Сонымен қатар ЕМ тегінің ішіндегі мәтін тек қана абзац ішінде ғана қоңыр түске боялады. Ал басқа орындарда ол кәдімгідей әрекет етеді. ЕМ тегінің орнына кез-келген басқа тегтерді де қолдануға болады.
Бұл жерде сі шрифттердің жазылуына көру мақсатында мысалжүргіздіңіз. Бұдан кейін мәтін – бұл ақпаратты жұмысшының құралы болғандықтан оны пайдаланумен жақынырақ танысу керек.
Достарыңызбен бөлісу: |
